"use client";

import Box from "@mui/material/Box";

import { Dropdown, type DropdownOption } from "@/components/ui/dropdown";

import {
  cdcIssueMatrixText,
  type CdcIssueMatrixLanguage,
} from "./cdc-issue-matrix-i18n";
import {
  CdcIssueMatrixViewToggle,
  type CdcIssueMatrixView,
} from "./cdc-issue-matrix-view-toggle";

export type CdcIssueMatrixFilterState = {
  category: string[];
  status: string[];
  workingGroup: string[];
  year: string[];
  plenaryEscalation: string[];
};

export type CdcIssueMatrixFilterOptions = Record<
  keyof CdcIssueMatrixFilterState,
  string[]
>;

export const defaultCdcIssueMatrixFilters: CdcIssueMatrixFilterState = {
  category: [],
  status: [],
  workingGroup: [],
  year: [],
  plenaryEscalation: [],
};

const filterOrder: Array<keyof CdcIssueMatrixFilterState> = [
  "category",
  "status",
  "workingGroup",
  "year",
  "plenaryEscalation",
];

const FILTER_WIDTHS: Record<keyof CdcIssueMatrixFilterState, number> = {
  category: 134,
  status: 112,
  workingGroup: 150,
  year: 100,
  plenaryEscalation: 200,
};

const FILTER_WIDTHS_KH: Record<keyof CdcIssueMatrixFilterState, number> = {
  category: 150,
  status: 120,
  workingGroup: 165,
  year: 110,
  plenaryEscalation: 255,
};

type CdcIssueMatrixFiltersProps = {
  filters: CdcIssueMatrixFilterState;
  language: CdcIssueMatrixLanguage;
  options: CdcIssueMatrixFilterOptions;
  view: CdcIssueMatrixView;
  onChange: (key: keyof CdcIssueMatrixFilterState, value: string[]) => void;
  onViewChange: (view: CdcIssueMatrixView) => void;
};

export function CdcIssueMatrixFilters({
  filters,
  language,
  options,
  view,
  onChange,
  onViewChange,
}: CdcIssueMatrixFiltersProps) {
  const text = cdcIssueMatrixText[language] ?? cdcIssueMatrixText.en;
  const filterWidths = language === "kh" ? FILTER_WIDTHS_KH : FILTER_WIDTHS;

  const filterLabels: Record<keyof CdcIssueMatrixFilterState, string> = {
    category: text.filters.categories,
    status: text.filters.status,
    workingGroup: text.filters.pswgs,
    year: text.filters.year,
    plenaryEscalation: text.filters.plenaryEscalation,
  };

  return (
    <Box
      sx={{
        display: "flex",
        flexWrap: "wrap",
        alignItems: "center",
        justifyContent: "space-between",
        gap: 1.5,
        mb: 2.5,
      }}
    >
      <Box sx={{ display: "flex", flexWrap: "wrap", gap: 1.5 }}>
        {filterOrder.map((key) => {
          const dropdownOptions: DropdownOption[] = options[key].map(
            (item) => ({
              label: item,
              value: item,
            }),
          );

          return (
            <Dropdown
              key={key}
              displayMode="count"
              label={filterLabels[key]}
              multiple
              onChange={(value) =>
                onChange(key, Array.isArray(value) ? value : [value])
              }
              options={dropdownOptions}
              showCheckbox
              value={filters[key]}
              width={filterWidths[key]}
            />
          );
        })}
      </Box>

      <CdcIssueMatrixViewToggle
        view={view}
        language={language}
        onChange={onViewChange}
      />
    </Box>
  );
}