import { ListFilter } from "lucide-react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { useCallback } from "react";
// buzzwareTech imports
import { useTranslation } from "@buzzwaretech/i18n";
import { ChevronDownIcon } from "@buzzwaretech/propel/icons";
import type { TProjectFilters } from "@buzzwaretech/types";
import { calculateTotalFilters } from "@buzzwaretech/utils";
// components
import { FiltersDropdown } from "@/components/issues/issue-layouts/filters";
import { ProjectFiltersSelection } from "@/components/project/dropdowns/filters";
import { ProjectOrderByDropdown } from "@/components/project/dropdowns/order-by";
// hooks
import { useMember } from "@/hooks/store/use-member";
import { useProjectFilter } from "@/hooks/store/use-project-filter";

export const ProjectsListMobileHeader = observer(
  function ProjectsListMobileHeader() {
    // i18n
    const { t } = useTranslation();
    // router
    const { workspaceSlug } = useParams();
    const {
      currentWorkspaceDisplayFilters: displayFilters,
      currentWorkspaceFilters: filters,
      updateDisplayFilters,
      updateFilters,
    } = useProjectFilter();

    const {
      workspace: { workspaceMemberIds },
    } = useMember();

    const handleFilters = useCallback(
      (key: keyof TProjectFilters, value: string | string[]) => {
        if (!workspaceSlug) return;
        const newValues = filters?.[key] ?? [];
        if (Array.isArray(value))
          value.forEach((val) => {
            if (!newValues.includes(val)) newValues.push(val);
            else newValues.splice(newValues.indexOf(val), 1);
          });
        else {
          if (filters?.[key]?.includes(value))
            newValues.splice(newValues.indexOf(value), 1);
          else newValues.push(value);
        }
        updateFilters(workspaceSlug.toString(), { [key]: newValues });
      },
      [filters, updateFilters, workspaceSlug],
    );

    const isFiltersApplied = calculateTotalFilters(filters ?? {}) !== 0;

    return (
      <div className="flex w-full border-b border-subtle bg-surface-1 py-2 md:hidden">
        <ProjectOrderByDropdown
          value={displayFilters?.order_by}
          onChange={(val) => {
            if (!workspaceSlug || val === displayFilters?.order_by) return;
            updateDisplayFilters(workspaceSlug.toString(), {
              order_by: val,
            });
          }}
          isMobile
        />
        <div className="flex w-full justify-around border-l border-subtle">
          <FiltersDropdown
            icon={<ListFilter className="h-3 w-3" />}
            title={t("common.filters")}
            placement="bottom-end"
            menuButton={
              <div className="flex items-center gap-2 text-13 text-secondary">
                <ListFilter className="h-3 w-3" />
                {t("common.filters")}
                <ChevronDownIcon className="h-3 w-3" strokeWidth={2} />
              </div>
            }
            isFiltersApplied={isFiltersApplied}
          >
            <ProjectFiltersSelection
              displayFilters={displayFilters ?? {}}
              filters={filters ?? {}}
              handleFiltersUpdate={handleFilters}
              handleDisplayFiltersUpdate={(val) => {
                if (!workspaceSlug) return;
                updateDisplayFilters(workspaceSlug.toString(), val);
              }}
              memberIds={workspaceMemberIds ?? undefined}
            />
          </FiltersDropdown>
        </div>
      </div>
    );
  },
);