import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { selectArea } from "./mainSlice";
import { FormControl, InputLabel, Select, MenuItem } from "@material-ui/core";
import { useTranslation } from "react-i18next";

function AreaSelect() {
  const { t } = useTranslation();
  const areas = useSelector((state) => state.main.areas);
  const area = useSelector((state) => state.main.area);
  const dispatch = useDispatch();

  const renderSelect = () => {
    return areas.map((item) => {
      return (
        <MenuItem key={item.id} value={item}>
          {item.name}
        </MenuItem>
      );
    });
  };

  return (
    <FormControl variant="outlined" fullWidth>
      <InputLabel id="demo-simple-select-outlined-label">
        {t("core.AreaSelect.SelectArea")}
      </InputLabel>
      <Select
        labelId="demo-simple-select-outlined-label"
        onChange={(e) => dispatch(selectArea(e.target.value))}
        value={area}
      >
        {renderSelect()}
      </Select>
    </FormControl>
  );
}

export default AreaSelect;