/**
 * Copyright (c) 2023-present Plane Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

import { observer } from "mobx-react";
import { ArrowDownWideNarrow, ArrowUpWideNarrow } from "lucide-react";
import { INBOX_ISSUE_ORDER_BY_OPTIONS, INBOX_ISSUE_SORT_BY_OPTIONS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { CheckIcon, ChevronDownIcon } from "@plane/propel/icons";
import type { TInboxIssueSortingOrderByKeys, TInboxIssueSortingSortByKeys } from "@plane/types";
import { CustomMenu } from "@plane/ui";
// constants
// helpers
import { cn } from "@plane/utils";
// hooks
import { useProjectInbox } from "@/hooks/store/use-project-inbox";
import useSize from "@/hooks/use-window-size";

type TInboxIssueOrderByDropdownProps = {
  compact?: boolean;
};

export const InboxIssueOrderByDropdown = observer(function InboxIssueOrderByDropdown(
  props: TInboxIssueOrderByDropdownProps
) {
  const { compact = false } = props;
  // hooks
  const { t } = useTranslation();
  const windowSize = useSize();
  const useCompactButtons = compact || windowSize[0] <= 1280;
  const { inboxSorting, handleInboxIssueSorting } = useProjectInbox();
  const orderByDetails =
    INBOX_ISSUE_ORDER_BY_OPTIONS.find((option) => inboxSorting?.order_by?.includes(option.key)) || undefined;
  const smallButton =
    inboxSorting?.sort_by === "asc" ? (
      <div className="nodedc-external-icon-button">
        <ArrowUpWideNarrow className="size-3.5" />
      </div>
    ) : (
      <div className="nodedc-external-icon-button">
        <ArrowDownWideNarrow className="size-3.5" />
      </div>
    );
  const largeButton = (
    <div
      className={cn(
        "nodedc-external-action-button flex min-h-[2.5rem] items-center gap-2 px-4 py-0 text-13 font-medium"
      )}
    >
      {inboxSorting?.sort_by === "asc" ? (
        <ArrowUpWideNarrow className="size-3.5" />
      ) : (
        <ArrowDownWideNarrow className="size-3.5" />
      )}
      {t(orderByDetails?.i18n_label || "inbox_issue.order_by.created_at")}
      <ChevronDownIcon className="size-3" strokeWidth={2} />
    </div>
  );
  return (
    <CustomMenu
      customButton={useCompactButtons ? smallButton : largeButton}
      placement="bottom-end"
      maxHeight="lg"
      closeOnSelect
    >
      {INBOX_ISSUE_ORDER_BY_OPTIONS.map((option) => (
        <CustomMenu.MenuItem
          key={option.key}
          className="flex items-center justify-between gap-2"
          onClick={() => handleInboxIssueSorting("order_by", option.key as TInboxIssueSortingOrderByKeys)}
        >
          {t(option.i18n_label)}
          {inboxSorting?.order_by?.includes(option.key) && <CheckIcon className="size-3" />}
        </CustomMenu.MenuItem>
      ))}
      <hr className="my-2 border-subtle" />
      {INBOX_ISSUE_SORT_BY_OPTIONS.map((option) => (
        <CustomMenu.MenuItem
          key={option.key}
          className="flex items-center justify-between gap-2"
          onClick={() => handleInboxIssueSorting("sort_by", option.key as TInboxIssueSortingSortByKeys)}
        >
          {t(option.i18n_label)}
          {inboxSorting?.sort_by?.includes(option.key) && <CheckIcon className="size-3" />}
        </CustomMenu.MenuItem>
      ))}
    </CustomMenu>
  );
});
