"use client";

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

import { Dropdown, type DropdownOption } from "@/components/ui/dropdown";
import type { StakeholderType } from "@/features/stakeholder/stakeholder-data";

export type StakeholderStatusFilterValue = "active" | "inactive";
export type StakeholderHasUserFilterValue = "yes" | "no";

export type StakeholderScreenFilters = {
  statuses: StakeholderStatusFilterValue[];
  typeIds: string[];
  hasUsers: StakeholderHasUserFilterValue[];
};

export const defaultStakeholderScreenFilters: StakeholderScreenFilters = {
  statuses: [],
  typeIds: [],
  hasUsers: [],
};

const STATUS_FILTER_WIDTH = 134;
const TYPE_FILTER_WIDTH = 118;
const HAS_USER_FILTER_WIDTH = 133;

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

type StakeholderFiltersProps = {
  filters: StakeholderScreenFilters;
  stakeholderTypes: StakeholderType[];
  onChange: (filters: StakeholderScreenFilters) => void;
};

export function StakeholderFilters({
  filters,
  stakeholderTypes,
  onChange,
}: StakeholderFiltersProps) {
  const statusOptions: DropdownOption[] = [
    { label: "Active", value: "active" },
    { label: "Inactive", value: "inactive" },
  ];

  const typeOptions: DropdownOption[] = stakeholderTypes.map((type) => ({
    label: type.name,
    value: String(type.id),
  }));

  const hasUserOptions: DropdownOption[] = [
    { label: "Yes", value: "yes" },
    { label: "No", value: "no" },
  ];

  const updateFilters = (nextFilters: Partial<StakeholderScreenFilters>) => {
    onChange({ ...filters, ...nextFilters });
  };

  return (
    <Box
      sx={{
        display: "flex",
        flexWrap: "wrap",
        gap: 0.75,
        minWidth: 0,
        flex: 1,
      }}
    >
      <Box sx={{ width: { xs: "100%", sm: STATUS_FILTER_WIDTH }, minWidth: 0 }}>
        <Dropdown
          displayMode="count"
          label="All Status"
          multiple
          onChange={(value) =>
            updateFilters({
              statuses: toSelectedValues(value) as StakeholderStatusFilterValue[],
            })
          }
          options={statusOptions}
          showCheckbox
          value={filters.statuses}
          width="100%"
        />
      </Box>

      <Box sx={{ width: { xs: "100%", sm: TYPE_FILTER_WIDTH }, minWidth: 0 }}>
        <Dropdown
          displayMode="count"
          label="Type"
          multiple
          onChange={(value) =>
            updateFilters({
              typeIds: toSelectedValues(value),
            })
          }
          options={typeOptions}
          showCheckbox
          value={filters.typeIds}
          width="100%"
        />
      </Box>

      <Box
        sx={{ width: { xs: "100%", sm: HAS_USER_FILTER_WIDTH }, minWidth: 0 }}
      >
        <Dropdown
          displayMode="count"
          label="User"
          multiple
          onChange={(value) =>
            updateFilters({
              hasUsers: toSelectedValues(value) as StakeholderHasUserFilterValue[],
            })
          }
          options={hasUserOptions}
          showCheckbox
          value={filters.hasUsers}
          width="100%"
        />
      </Box>
    </Box>
  );
}