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

export const WallMaterialSelect = ({ disabled }) => {
  const {
    wall_material,
    setWallMaterial,
  } = useDzkhFilters();

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

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

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