import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";

import ArrowDown from "@icons/ArrowDownIcon";

import type { CategoryType } from "./Template";

const CATEGORIES = [
  { categoryType: "All", category: "Все" },
  { categoryType: "Tourism", category: "Туризм" },
  { categoryType: "Services", category: "Услуги" },
  { categoryType: "RealEstate", category: "Недвижимость" },
  { categoryType: "Auto", category: "Авто" },
  { categoryType: "Health", category: "Здоровье и уход" },
  { categoryType: "Research", category: "Исследовательские" },
  { categoryType: "Production", category: "Производство" },
  { categoryType: "Repair", category: "Ремонт" },
  { categoryType: "Education", category: "Образование" },
] as const;

type SelectCategoryProps = {
  categoryType: CategoryType | "All";
  setCategoryType: (categoryType: CategoryType) => void;
};

export const SelectCategory = ({
  categoryType,
  setCategoryType,
}: SelectCategoryProps) => (
  <FormControl
    fullWidth
    size="small"
    sx={{
      width: "27%",
      minWidth: "200px",
      height: "45px",
      "& .MuiInputLabel-outlined": { mt: "4px", ml: "-3px" },
      "& .MuiInputLabel-outlined.MuiInputLabel-shrink": {
        ml: "3px",
        mt: "0px",
      },
    }}
  >
    <InputLabel
      sx={{ color: "black", fontSize: "16px", lineHeight: "19px" }}
      id="demo-simple-select-label"
    >
      Категории
    </InputLabel>
    <Select
      labelId="demo-simple-select-label"
      id="category-select"
      label="Категории"
      defaultValue="re"
      variant="outlined"
      value={categoryType}
      onChange={({ target }) => setCategoryType(target.value as CategoryType)}
      sx={{ height: "45px", borderRadius: "10px" }}
      inputProps={{ sx: { pt: "12px" } }}
      IconComponent={(props) => <ArrowDown {...props} />}
    >
      {CATEGORIES.map((currentCategory) => (
        <MenuItem
          key={currentCategory.categoryType}
          value={currentCategory.categoryType}
        >
          {currentCategory.category}
        </MenuItem>
      ))}
    </Select>
  </FormControl>
);
