"use client";

import { useMemo } from "react";

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

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

import {
  meetingSummaryStatusLabels,
  type MeetingSummaryFiltersValue,
  type MeetingSummaryRow,
  type MeetingSummaryStatus,
} from "../meeting-summary-data";
import { meetingSummaryI18n, type UiLang } from "../meeting-summary-i18n";

type Props = {
  lang?: UiLang;
  rows: MeetingSummaryRow[];
  filters: MeetingSummaryFiltersValue;
  onFiltersChange: (filters: MeetingSummaryFiltersValue) => void;
};

function toSelectedValues(value: string | string[]) {
  return Array.isArray(value) ? value : [value];
}

export function MeetingSummaryFilters({
  lang = "en",
  rows,
  filters,
  onFiltersChange,
}: Props) {
  const t = meetingSummaryI18n[lang];

  const options = useMemo(() => {
    const statuses = Array.from(
      new Set(rows.map((row) => row.status)),
    );
    const years = Array.from(
      new Set(
        rows.map((row) =>
          new Date(row.meetingDate).getFullYear().toString(),
        ),
      ),
    ).sort((first, second) => Number(second) - Number(first));
    const issueCounts = Array.from(
      new Set(rows.map((row) => row.issueCount)),
    ).sort((first, second) => first - second);

    return {
      statuses: statuses.map<DropdownOption>((status) => ({
        label: meetingSummaryStatusLabels[status],
        value: status,
      })),
      years: years.map<DropdownOption>((year) => ({
        label: year,
        value: year,
      })),
      issueCounts: issueCounts.map<DropdownOption>((count) => ({
        label: `${count} ${count === 1 ? "Issue" : "Issues"}`,
        value: String(count),
      })),
    };
  }, [rows]);

  return (
    <Box sx={{ display: "flex", gap: 0.75, mb: 2.25, flexWrap: "wrap" }}>
      <Dropdown
        displayMode="count"
        label={t.status}
        multiple
        onChange={(value) =>
          onFiltersChange({
            ...filters,
            statuses: toSelectedValues(value) as MeetingSummaryStatus[],
          })
        }
        options={options.statuses}
        showCheckbox
        value={filters.statuses}
        width={134}
      />

      <Dropdown
        displayMode="count"
        label={t.year}
        multiple
        onChange={(value) =>
          onFiltersChange({
            ...filters,
            years: toSelectedValues(value),
          })
        }
        options={options.years}
        showCheckbox
        value={filters.years}
        width={116}
      />

      <Dropdown
        displayMode="count"
        label={t.issues}
        multiple
        onChange={(value) =>
          onFiltersChange({
            ...filters,
            issueCounts: toSelectedValues(value),
          })
        }
        options={options.issueCounts}
        showCheckbox
        value={filters.issueCounts}
        width={150}
      />
    </Box>
  );
}