/* eslint-disable react-hooks/exhaustive-deps */
import { useEffect, useState } from "react";
import clsx from "clsx";
import { unitTypesFormatted } from "../data/unitTypes";

function UnitTypesSelect({
  unitTypes,
  onSelect,
  defaultSelected,
}: {
  unitTypes: string[];
  onSelect: (unitTypes: string[]) => void;
  defaultSelected: string[];
}) {
  const [selectedUnitTypes, setSelectedUnitTypes] =
    useState<string[]>(defaultSelected);

  useEffect(() => setSelectedUnitTypes(defaultSelected), [defaultSelected]);

  useEffect(() => onSelect(selectedUnitTypes), [selectedUnitTypes]);

  return (
    <div className="flex flex-wrap 2xl:gap-[0.556vw] gap-2">
      {unitTypes.map((unitType) => (
        <p
          key={unitType}
          onClick={() =>
            setSelectedUnitTypes((prev) =>
              prev.includes(unitType)
                ? prev.filter((type) => type !== unitType)
                : [...prev, unitType]
            )
          }
          className={clsx(
            "2xl:px-[1.389vw] 2xl:py-[0.833vw] px-5 py-3 2xl:rounded-[2.778vw] rounded-[40px] 2xl:ring-[0.069vw] ring transition-[box-shadow] cursor-pointer text-s",
            selectedUnitTypes.includes(unitType)
              ? "ring-[#00BED7]"
              : "ring-[#E2E2DC] text-[#0D1922]/70"
          )}
        >
          {unitTypesFormatted.get(unitType)}
        </p>
      ))}
    </div>
  );
}

export default UnitTypesSelect;