import {useDzkhFilters} from "../../stores/useDzkhFilters.js";
import {Button} from "antd";
import {ConsumerParameterSelect} from "./ConsumerParameterSelect.jsx";
import {ConsumerParameterSlider} from "./ConsumerParameterSlider.jsx";
import {SourceParameterSelect} from "./SourceParameterSelect.jsx";
import {SourceParameterSlider} from "./SourceParameterSlider.jsx";
import { ConsumerTypeSelect } from "./ConsumerTypeSelect.jsx";
import { EnergyClassSelect } from "./EnergyClassSelect.jsx";
import { WallMaterialSelect } from "./WallMaterialsSelect.jsx";

export const DzkhFilters = () => {
  const { clear, consumer_filter, source_filter } = useDzkhFilters();

  return (
    <div className="flex flex-col flex-1">
      <div className="space-y-5">
        <ConsumerParameterSelect />
        <ConsumerParameterSlider />

        <SourceParameterSelect />
        <SourceParameterSlider />

        <ConsumerTypeSelect />
        <EnergyClassSelect />
        <WallMaterialSelect />
      </div>
      {(consumer_filter || source_filter) && <div className="flex items-center justify-end pt-4">
        <div className="flex gap-2">
          <Button onClick={() => clear()} type="secondary">
            Reset filters
          </Button>
        </div>
      </div>}
    </div>
  );
};
