import { Select } from "antd";
import { Title } from "../../components/Title.jsx";
import { useDzkhFilters } from "../../stores/useDzkhFilters.js";
import { useGetDzkhFiltersValues } from "../api/filters.js";
import { useMemo } from "react";

const key = "potreb_type";
const mapper = {
  living_house: "Residential building",
  soc_object: "Social facility"
}
export const ConsumerTypeSelect = ({ disabled }) => {
  const {
    consumer_type,
    setConsumerType,
  } = useDzkhFilters();

  const {data, isLoading: isrLoading} = useGetDzkhFiltersValues(key);

  const options = useMemo(() => {
    if (!data) return [];
    return data?.filter(Boolean).map((item) => {
      return {
        value: item,
        label: mapper[item]
      }
    })
  }, [data])
  return (
    <div>
      <Title text={"Consumer type"} />

      <Select
        style={{
          width: "100%",
        }}
        placeholder="Select type"
        onChange={(v, o) => setConsumerType(o)}
        options={options}
        allowClear={true}
        value={consumer_type}
        disabled={disabled}
      />
    </div>
  );
};
