"use client"; import { useMemo, useState, type MouseEvent, } from "react"; import CheckBoxOutlineBlankRoundedIcon from "@mui/icons-material/CheckBoxOutlineBlankRounded"; import CheckBoxRoundedIcon from "@mui/icons-material/CheckBoxRounded"; import ExpandMoreRoundedIcon from "@mui/icons-material/ExpandMoreRounded"; import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded"; import KeyboardArrowUpRoundedIcon from "@mui/icons-material/KeyboardArrowUpRounded"; import TuneRoundedIcon from "@mui/icons-material/TuneRounded"; import { Box, Button, Checkbox, Menu, MenuItem, Typography, } from "@mui/material"; import { alpha, useTheme, } from "@mui/material/styles"; import type { RgcDecisionLanguage } from "../data/rgc-decision-i18n"; export type RgcDecisionFilterState = { status: string[]; primaryAgency: string[]; category: string[]; meetingDate: string[]; }; export type RgcDecisionFilterOptions = { status: string[]; primaryAgency: string[]; category: string[]; meetingDate: string[]; }; export const defaultRgcDecisionFilters: RgcDecisionFilterState = { status: [], primaryAgency: [], category: [], meetingDate: [], }; type FilterKey = keyof RgcDecisionFilterState; type RgcDecisionFiltersProps = { filters: RgcDecisionFilterState; options: RgcDecisionFilterOptions; language: RgcDecisionLanguage; onChange: ( key: FilterKey, value: string[], ) => void; onReset: () => void; }; type FilterButtonProps = { label: string; open: boolean; width: { xs: string; sm?: string; md?: string; }; onClick: ( event: MouseEvent, ) => void; }; type CheckboxOptionProps = { label: string; checked: boolean; onClick: () => void; }; const FILTER_ORDER: FilterKey[] = [ "status", "primaryAgency", "category", "meetingDate", ]; const ENGLISH_MONTHS = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ] as const; function normalizeMeetingMonth( value: string | null | undefined, ): string { const match = /^(\d{4})-(\d{2})/.exec( String(value ?? "").trim(), ); if (!match) { return ""; } const year = Number(match[1]); const month = Number(match[2]); if ( !Number.isInteger(year) || month < 1 || month > 12 ) { return ""; } return `${year}-${String(month).padStart( 2, "0", )}`; } function parseMeetingMonth( value: string | null | undefined, ): { year: number; monthIndex: number; } { const normalized = normalizeMeetingMonth(value); if (normalized) { const [year, month] = normalized.split("-"); return { year: Number(year), monthIndex: Number(month) - 1, }; } const now = new Date(); return { year: now.getFullYear(), monthIndex: now.getMonth(), }; } function buildMeetingMonth( year: number, monthIndex: number, ): string { return `${year}-${String( monthIndex + 1, ).padStart(2, "0")}`; } function getMonthLabel( monthIndex: number, language: RgcDecisionLanguage, ): string { if (language !== "kh") { return ENGLISH_MONTHS[monthIndex]; } return new Intl.DateTimeFormat( "km-KH", { month: "short", }, ).format( new Date(2026, monthIndex, 1), ); } function formatMeetingMonth( value: string, language: RgcDecisionLanguage, ): string { const parsed = parseMeetingMonth(value); return `${getMonthLabel( parsed.monthIndex, language, )} ${parsed.year}`; } function FilterButton({ label, open, width, onClick, }: FilterButtonProps) { const theme = useTheme(); const isDark = theme.palette.mode === "dark"; return ( ); } function CheckboxOption({ label, checked, onClick, }: CheckboxOptionProps) { const theme = useTheme(); const isDark = theme.palette.mode === "dark"; return ( } checkedIcon={ } sx={{ p: 0, color: isDark ? theme.palette.text.secondary : "#98A2B3", "&.Mui-checked": { color: theme.palette.primary.main, }, }} /> {label} ); } function getButtonLabel({ key, selectedValues, options, language, }: { key: FilterKey; selectedValues: string[]; options: string[]; language: RgcDecisionLanguage; }): string { const defaultLabels: Record< FilterKey, string > = { status: language === "kh" ? "ស្ថានភាព" : "Status", primaryAgency: language === "kh" ? "ស្ថាប័នទទួលបន្ទុក" : "Primary Agency", category: language === "kh" ? "ប្រភេទ" : "Category", meetingDate: language === "kh" ? "កាលបរិច្ឆេទប្រជុំ" : "Meeting Date", }; if (selectedValues.length === 0) { return defaultLabels[key]; } if (selectedValues.length === 1) { const selected = selectedValues[0]; if (key === "meetingDate") { return formatMeetingMonth( selected, language, ); } return selected; } const validSelectedCount = selectedValues.filter((value) => options.includes(value), ).length; return `${defaultLabels[key]} (${ validSelectedCount || selectedValues.length })`; } export function RgcDecisionFilters({ filters, options, language, onChange, onReset, }: RgcDecisionFiltersProps) { const theme = useTheme(); const isDark = theme.palette.mode === "dark"; const [ anchorEl, setAnchorEl, ] = useState( null, ); const [ activeFilter, setActiveFilter, ] = useState( null, ); const initialMeetingMonth = parseMeetingMonth( filters.meetingDate[0], ); const [ draftMonthIndex, setDraftMonthIndex, ] = useState( initialMeetingMonth.monthIndex, ); const [ draftYear, setDraftYear, ] = useState( initialMeetingMonth.year, ); const openMenu = ( key: FilterKey, event: MouseEvent, ) => { if (key === "meetingDate") { const selected = parseMeetingMonth( filters.meetingDate[0], ); setDraftMonthIndex( selected.monthIndex, ); setDraftYear(selected.year); } setActiveFilter(key); setAnchorEl(event.currentTarget); }; const closeMenu = () => { setAnchorEl(null); setActiveFilter(null); }; const toggleOption = ( key: FilterKey, option: string, ) => { const currentValues = filters[key] ?? []; const nextValues = currentValues.includes(option) ? currentValues.filter( (item) => item !== option, ) : [ ...currentValues, option, ]; onChange(key, nextValues); }; const normalizedOptions = useMemo( () => { const unique = ( values: string[], ): string[] => { return Array.from( new Set( values .map((value) => value?.trim(), ) .filter( ( value, ): value is string => Boolean(value), ), ), ); }; return { status: unique( options.status ?? [], ), primaryAgency: unique( options.primaryAgency ?? [], ).sort((a, b) => a.localeCompare(b), ), category: unique( options.category ?? [], ).sort((a, b) => a.localeCompare(b), ), meetingDate: unique( options.meetingDate ?? [], ) .map(normalizeMeetingMonth) .filter(Boolean) .sort((a, b) => b.localeCompare(a), ), }; }, [options], ); const menuOptions = activeFilter && activeFilter !== "meetingDate" ? normalizedOptions[ activeFilter ] : []; const menuWidth = activeFilter === "status" ? 220 : activeFilter === "primaryAgency" ? 260 : activeFilter === "category" ? 260 : 300; const selectedMeetingDate = filters.meetingDate[0] ?? ""; return ( <> {FILTER_ORDER.map((key) => { const selectedValues = filters[key] ?? []; const label = getButtonLabel({ key, selectedValues, options: normalizedOptions[key], language, }); const width = key === "status" ? { xs: "140px", md: "140px", } : key === "primaryAgency" ? { xs: "190px", md: "190px", } : key === "category" ? { xs: "180px", md: "180px", } : { xs: "180px", md: "180px", }; return ( openMenu( key, event, ) } /> ); })} {activeFilter === "meetingDate" ? ( {getMonthLabel( draftMonthIndex, language, )} {draftYear} {selectedMeetingDate ? ( ) : null} ) : menuOptions.length > 0 ? ( menuOptions.map( (option) => { const checked = activeFilter !== null && ( filters[ activeFilter ] ?? [] ).includes(option); return ( { if (!activeFilter) { return; } toggleOption( activeFilter, option, ); }} /> ); }, ) ) : ( {language === "kh" ? "មិនមានទិន្នន័យ" : "No options found"} )} ); } export default RgcDecisionFilters;