import { TreeSelect } from "antd";
import { Title } from "../../components/Title.jsx";
import { CONSUMER_OPTIONS } from "../../config.js";
import { useDzkhFilters } from "../../stores/useDzkhFilters.js";

export const ConsumerParameterSelect = ({ disabled }) => {
  const {
    consumer_filter,
    setConsumerFilter,
  } = useDzkhFilters();

  return (
    <div>
      <Title text={"Consumer parameter"} />

      <TreeSelect
        mode="tags"
        style={{
          width: "100%",
        }}
        placeholder="Select parameter"
        onChange={(key) => setConsumerFilter(key)}
        treeData={CONSUMER_OPTIONS}
        allowClear={true}
        value={consumer_filter?.key}
        disabled={disabled}
        treeDefaultExpandAll
      />
    </div>
  );
};
