"use client";

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

import {
  Dropdown,
  type DropdownOption,
} from "@/components/ui/dropdown";
import type { MeetingCalendarFilters } from "../meeting-calendar-data";

const STATUS_DROPDOWN_WIDTH = 134;
const YEAR_DROPDOWN_WIDTH = 116;
const ISSUE_COUNT_DROPDOWN_WIDTH = 175;

const statusOptions: DropdownOption[] = [
  { label: "Draft", value: "Draft" },
  { label: "Scheduled", value: "Scheduled" },
  { label: "Submitted", value: "Submitted" },
  { label: "Completed", value: "Completed" },
];

const defaultYearOptions: DropdownOption[] = [
  { label: "2026", value: "2026" },
  { label: "2025", value: "2025" },
  { label: "2024", value: "2024" },
];

const issueCountOptions: DropdownOption[] = [
  { label: "1", value: "1" },
  { label: "2", value: "2" },
  { label: "3", value: "3" },
  { label: "4", value: "4" },
  { label: "5", value: "5" },
];

type FilterKey = keyof MeetingCalendarFilters;

type MinistryMeetingCalendarFiltersProps = {
  filters: MeetingCalendarFilters;
  onChange: (key: FilterKey, value: string[]) => void;
  yearOptions?: string[];
};

export function MinistryMeetingCalendarFilters({
  filters,
  onChange,
  yearOptions = [],
}: MinistryMeetingCalendarFiltersProps) {
  const resolvedYearOptions: DropdownOption[] =
    yearOptions.length > 0
      ? yearOptions.map((year) => ({ label: year, value: year }))
      : defaultYearOptions;
  return (
    <Box
      sx={{
        display: "flex",
        flexWrap: "wrap",
        gap: 0.75,
        flex: 1,
        minWidth: 0,
        width: "100%",
      }}
    >
      <Box sx={{ width: { xs: "100%", sm: STATUS_DROPDOWN_WIDTH }, minWidth: 0 }}>
        <Dropdown
          displayMode="count"
          label="Status"
          multiple
          onChange={(value) =>
            onChange("status", Array.isArray(value) ? value : [value])
          }
          options={statusOptions}
          showCheckbox
          value={filters.status}
          width="100%"
        />
      </Box>

      <Box sx={{ width: { xs: "100%", sm: YEAR_DROPDOWN_WIDTH }, minWidth: 0 }}>
        <Dropdown
          displayMode="count"
          label="Year"
          multiple
          onChange={(value) =>
            onChange("year", Array.isArray(value) ? value : [value])
          }
          options={resolvedYearOptions}
          showCheckbox
          value={filters.year}
          width="100%"
        />
      </Box>

      <Box
        sx={{
          width: { xs: "100%", sm: ISSUE_COUNT_DROPDOWN_WIDTH },
          minWidth: 0,
        }}
      >
        <Dropdown
          displayMode="count"
          label="Number of issues"
          multiple
          onChange={(value) =>
            onChange("issueCount", Array.isArray(value) ? value : [value])
          }
          options={issueCountOptions}
          showCheckbox
          value={filters.issueCount}
          width="100%"
        />
      </Box>
    </Box>
  );
}