"use client";
import React, { useState, useEffect } from "react";
import Image from "next/image";

export interface CheckboxItem {
  label: string;
  value: string;
  image: string;
}

interface Props {
  options: CheckboxItem[];
  onSelectionChange?: (selected: string[]) => void;
  selectedValues?: string[];
  maxLimit?: number;
  limitEnabled?: boolean;
  setLimitReached?: (limitReached: boolean) => void;
}

export default function DynamicCheckboxGroup({
  options,
  onSelectionChange,
  selectedValues = [],
  maxLimit = Infinity,
  limitEnabled = false,
  setLimitReached,
}: Props) {
  const [selected, setSelected] = useState<string[]>(selectedValues);
  useEffect(() => {
    setSelected(selectedValues);
  }, [selectedValues]);

  const toggleSelection = (value: string) => {
    const isSelected = selected.includes(value);
    const limitReached = selected.length >= maxLimit;

    const updated = isSelected
      ? selected.filter((v) => v !== value)
      : limitReached && limitEnabled
      ? selected
      : [...selected, value];

    if (!isSelected && limitReached && limitEnabled) {
      setLimitReached?.(true);
      return;
    }

    setSelected(updated);
    onSelectionChange?.(updated);
    setLimitReached?.(limitEnabled ? updated.length >= maxLimit : false);
  };

  return (
    <>
      {options.map((item) => {
        const isChecked = selected.includes(item.value);
        const isDisabled =
          limitEnabled && !isChecked && selected.length >= maxLimit;

        return (
          <label
            key={item.value}
            className={`flex flex-col items-center cursor-pointer bg-gray-100/75 border-1 transition-all overflow-hidden ${
              isChecked
                ? "border-green-400 border-2 "
                : "border-gray-950/75 hover:border-gray-950"
            } ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}`}
          >
            <input
              type="checkbox"
              className="sr-only"
              checked={isChecked}
              disabled={isDisabled}
              onChange={() => toggleSelection(item.value)}
            />
            <Image
              src={item.image}
              alt={item.label}
              width={600}
              height={600}
              className="img-responsive"
            />
            <div className="w-full border-t-1 border-gray-950/50 p-4 text-sm font-light capitalize items-center justify-center align-middle text-center">
              {item.label}
            </div>
          </label>
        );
      })}
    </>
  );
}