import { Checkbox } from "@/components/ui/checkbox";
import { TOption } from "@/shared/types";
import StatusBadge from "./status-badge";
import { Controller, useFormContext } from "react-hook-form";

type TFilterStatusBadgeProps = {
  status: TOption[];
}

const FilterStatusBadge = ({
  status,
}: TFilterStatusBadgeProps) => {
  const { control } = useFormContext();

  return (
    <Controller
      control={control}
      name="status"
      render={({ field }) => (
        <div className="flex flex-wrap gap-x-3 gap-y-7 h-[fit-content]">
          {status.map((stat) => (
            <label key={stat.value} className="flex items-center gap-2 cursor-pointer">
              <Checkbox
                variant={"dashboard"}
                className="cursor-pointer"
                checked={field.value?.includes(stat.value) || false}
                onCheckedChange={(checked) => {
                  const currentValues = field.value || [];
                  if (checked) {
                    field.onChange([...currentValues, stat.value]);
                  } else {
                    field.onChange(currentValues.filter((val: string) => val !== stat.value));
                  }
                }}
              />
              <StatusBadge status={stat.value} label={stat.label} />
            </label>
          ))}
        </div>
      )}
    />
  )
}

export default FilterStatusBadge