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 = "fi_energy_class";

export const EnergyClassSelect = ({ disabled }) => {
  const {
    energy_class,
    setEnergyClass,
  } = useDzkhFilters();

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

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

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