import {twMerge} from "tailwind-merge";
import {forwardRef} from "react";
import {RegionSelect} from "../../components/RegionSelect.jsx";
import {DzkhFilters} from "../../dzkh-features/Sidebar/Filters.jsx";
import {useDzkhFilters} from "../../stores/useDzkhFilters.js";

import logo from "../../assets/dzkh_logo.png";
import ditlogo from "../../assets/dit_logo.png";

export const Logo = ({ width = 40, height = 40 }) => {
  return (
    <img width={150} height={40} src={logo} alt={"logo"}/>
  );
};

export const Sidebar = forwardRef(({ isCollapsed }, ref) => {
  const { filters, setRegion } = useDzkhFilters();

  return (
    <div
      className={twMerge(
        "h-screen p-3 overflow-y-auto shrink-0 border-solid border-border border-0 border-r-[1px] flex flex-col transition-all",
        isCollapsed ? "basis-0 px-0 -translate-x-[320px]" : "basis-[320px]"
      )}
      ref={ref}
    >
      <div className="flex flex-col flex-1">
        <div className="space-y-5">
          <div className="flex flex-row gap-1 justify-between items-center">
            <img width={"48%"} height={50} src={logo} alt={"logo"}/>
            <img width={"48%"} height={50} src={ditlogo} alt={"logo"}/>
          </div>

          <RegionSelect
            value={filters.region?.id}
            onChange={setRegion}
          />
          <DzkhFilters />
        </div>
      </div>
    </div>
  );
});
