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

import { useState } from "react";
import { observer } from "mobx-react";
import { useTranslation } from "@plane/i18n";
import { SearchIcon, CloseIcon } from "@plane/propel/icons";
// hooks
import { useLabel } from "@/hooks/store/use-label";
import { useMember } from "@/hooks/store/use-member";
import { usePlatformOS } from "@/hooks/use-platform-os";
// local imports
import { FilterDate } from "./date";
import { FilterLabels } from "./labels";
import { FilterMember } from "./members";
import { FilterPriority } from "./priority";
import { FilterStatus } from "./status";

export const InboxIssueFilterSelection = observer(function InboxIssueFilterSelection() {
  const { t } = useTranslation();
  // hooks
  const { isMobile } = usePlatformOS();
  const {
    project: { projectMemberIds },
  } = useMember();
  const { projectLabels } = useLabel();
  // states
  const [filtersSearchQuery, setFiltersSearchQuery] = useState("");

  return (
    <div className="flex h-full w-full flex-col overflow-hidden">
      <div className="px-1 pb-2">
        <div className="nodedc-dropdown-search">
          <SearchIcon className="text-placeholder" width={12} height={12} strokeWidth={2} />
          <input
            type="text"
            className="w-full bg-transparent outline-none placeholder:text-placeholder"
            placeholder={t("search")}
            value={filtersSearchQuery}
            onChange={(e) => setFiltersSearchQuery(e.target.value)}
            autoFocus={!isMobile}
          />
          {filtersSearchQuery !== "" && (
            <button type="button" className="grid place-items-center text-tertiary transition-colors hover:text-primary" onClick={() => setFiltersSearchQuery("")}>
              <CloseIcon className="text-tertiary" height={12} width={12} strokeWidth={2} />
            </button>
          )}
        </div>
      </div>

      <div className="vertical-scrollbar scrollbar-sm h-full w-full overflow-y-auto px-1 pb-1">
        {/* status */}
        <div className="border-t border-white/6 py-2 first:border-t-0 first:pt-0">
          <FilterStatus searchQuery={filtersSearchQuery} />
        </div>
        {/* Priority */}
        <div className="border-t border-white/6 py-2">
          <FilterPriority searchQuery={filtersSearchQuery} />
        </div>
        {/* assignees */}
        <div className="border-t border-white/6 py-2">
          <FilterMember
            filterKey="assignees"
            label={t("assignees")}
            searchQuery={filtersSearchQuery}
            memberIds={projectMemberIds ?? []}
          />
        </div>
        {/* Created By */}
        <div className="border-t border-white/6 py-2">
          <FilterMember
            filterKey="created_by"
            label={t("created_by")}
            searchQuery={filtersSearchQuery}
            memberIds={projectMemberIds ?? []}
          />
        </div>
        {/* Labels */}
        <div className="border-t border-white/6 py-2">
          <FilterLabels searchQuery={filtersSearchQuery} labels={projectLabels ?? []} />
        </div>
        {/* Created at */}
        <div className="border-t border-white/6 py-2">
          <FilterDate filterKey="created_at" label={t("created_at")} searchQuery={filtersSearchQuery} />
        </div>
        {/* Updated at */}
        <div className="border-t border-white/6 py-2">
          <FilterDate filterKey="updated_at" label={t("updated_at")} searchQuery={filtersSearchQuery} />
        </div>
      </div>
    </div>
  );
});
