// resources/assets/ts/ContactsPage/components/DropdownFilter.tsx
import React, { useState } from "react";
import Button from '@mui/material/Button';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Checkbox from '@mui/material/Checkbox';
import ListItemText from '@mui/material/ListItemText';
import Divider from '@mui/material/Divider';
import Typography from '@mui/material/Typography';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';

interface DropdownFilterProps {
  title: string;
  options: Option[];
  onChange: (updatedOptions: Option[]) => void;
  color?: string;
}

export interface Option {
  label: string;
  value: string | number;
  checked: boolean;
}

const DropdownFilter: React.FC<DropdownFilterProps> = ({
  title,
  options,
  onChange,
  color,
}) => {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);

  const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const handleCheckboxChange = (index: number) => {
    const updated = options.map((opt, i) =>
      i === index ? { ...opt, checked: !opt.checked } : opt
    );
    onChange(updated);
  };

  return (
    <>
      <Button
        variant="contained"
        color="secondary"
        onClick={handleOpen}
        endIcon={<KeyboardArrowDownIcon />}
        sx={{
          textTransform: 'none', // remove uppercase
          fontFamily: 'Roboto, sans-serif',
          fontWeight: 500,
          fontSize: '0.875rem', // body2 size
          color: color,
        }}
      >
        <Typography variant="body2" sx={{ fontWeight: 500 }}>{title}</Typography>
      </Button>
      <Menu
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
        transformOrigin={{ vertical: "top", horizontal: "left" }}
      >
        {options.map(({ label, value, checked }, i) => (
          <React.Fragment key={i}>
            <MenuItem
              onClick={() => handleCheckboxChange(i)}
              dense
              sx={{ minWidth: 200 }}
            >
              <Checkbox checked={checked} size="small" />
              <ListItemText primary={label} />
            </MenuItem>
            {i === 0 && <Divider />}
          </React.Fragment>
        ))}
      </Menu>
    </>
  );
};

export default DropdownFilter;