"use client";

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

import { Dropdown, type DropdownOption } from "@/components/ui/dropdown";
import {
  translateIssueMatrixValue,
  type IssueMatrixLanguage,
} from "./issue-matrix-i18n";

export type IssueMatrixFilterState = {
  workingGroup: string[];
  status: string[];
  category: string[];
  primaryAgency: string[];
  year: string[];
  progressReport: string[];
  attachment: string[];
};

export type IssueMatrixFilterOptions = Record<
  keyof IssueMatrixFilterState,
  string[]
>;

const filterOrder: Array<keyof IssueMatrixFilterState> = [
  "workingGroup",
  "status",
  "category",
  "primaryAgency",
  "year",
  "progressReport",
  "attachment",
];

const filterLabels: Record<keyof IssueMatrixFilterState, string> = {
  workingGroup: "Working Group",
  status: "All Status",
  category: "Category",
  primaryAgency: "Primary Agency",
  year: "Year",
  progressReport: "Progress Report",
  attachment: "Attachment",
};

export const defaultIssueMatrixFilters: IssueMatrixFilterState = {
  workingGroup: [],
  status: [],
  category: [],
  primaryAgency: [],
  year: [],
  progressReport: [],
  attachment: [],
};

type IssueMatrixFiltersProps = {
  filters: IssueMatrixFilterState;
  language: IssueMatrixLanguage;
  options: IssueMatrixFilterOptions;
  primaryAgencyLogos?: Record<string, string | null>;
  onChange: (key: keyof IssueMatrixFilterState, value: string[]) => void;
};

export function IssueMatrixFilters({
  filters,
  language,
  options,
  primaryAgencyLogos = {},
  onChange,
}: IssueMatrixFiltersProps) {
  return (
    <Box
      sx={{
        display: "grid",
        gridTemplateColumns: {
          xs: "1fr",
          sm: "repeat(2, 1fr)",
          md: "repeat(4, 1fr)",
          lg: "1.1fr 1fr 0.85fr 1.1fr 0.9fr 1.15fr 0.95fr",
        },
        gap: 1.5,
        mb: 2.5,
      }}
    >
      {filterOrder.map((key) => {
        const dropdownOptions: DropdownOption[] = options[key].map((item) => ({
          label: translateIssueMatrixValue(item, language),
          value: item,
          ...(key === "primaryAgency"
            ? { logo: primaryAgencyLogos[item] ?? null }
            : {}),
        }));

        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="100%"
          />
        );
      })}
    </Box>
  );
}