"use client";
import { IoMdArrowDropdown } from "react-icons/io";
import { IoMdArrowDropup } from "react-icons/io";
import React, { useState } from "react";
import {cva , type VariantProps} from "class-variance-authority"
import { cn } from "../../../lib/utils";


const singleSelectVariants = cva(
  "relative",
  {
    variants: { 
      outlineVariant:{
        default:"focus:border-accent hover:border-accent-foreground",
        primary:"focus:border-primary hover:border-primary",
      },     
      size: {
        default:"w-72",
        sm:"w-52",
        lg:'w-96',
      },
    },
    defaultVariants: {
      size: "default",
      outlineVariant:'default'
    },
  }
);

interface Option {
  id: any;
  value: any;
}

interface SingleSelectDropdownProps extends VariantProps<typeof singleSelectVariants> {
  onSelect: (selectedItem: Option) => void; 
  data?: Option[];
  selectedItemStyle?: string;
  placeholder?: string;
  sizeClass?:string;
}

const defData = [
  { id: 1, value: "Option 1" },
  { id: 2, value: "Option 2" },
  { id: 3, value: "Option 3" },
]


const SingleSelectDropdown: React.ForwardRefRenderFunction<HTMLDivElement, SingleSelectDropdownProps> = (
  { onSelect, data = defData, size, outlineVariant, sizeClass, selectedItemStyle, placeholder }
) => {
  const [selectedItem, setSelectedItem] = useState<Option | null>(null);
  const [isOpen, setIsOpen] = useState(false);

  const handleSelect = (item: Option) => {
    setSelectedItem(item);
    onSelect(item);
    setIsOpen(false);
  };

  return (
    <div className={cn(singleSelectVariants({size}),sizeClass , ) } 
    >
      <div className={cn(sizeClass,singleSelectVariants({size} ) )} >
        <div
          className={`cursor-pointer ${cn(singleSelectVariants({size,outlineVariant}),sizeClass,)} px-4 py-2 text-sm text-black border rounded-md focus:outline-none flex flex-row justify-between items-center`}
          onClick={() => setIsOpen(!isOpen)}
        >
          <input
            type="text"
            readOnly
            placeholder={placeholder || "Select from the Dropdown"}
            value={selectedItem ? selectedItem.value : ""}
            className={`border border-none focus:outline-none w-full`}
          />

          {isOpen ? <IoMdArrowDropup /> : <IoMdArrowDropdown />}
        </div>
      </div>

      {isOpen && (
        <div
        className={`absolute rounded-md shadow-lg z-50 overflow-auto max-h-48 bg-white ${cn(singleSelectVariants({ size }), sizeClass)}`}
        >
          <div className="py-1">
            {data.map((item:any) => (
              <div
                key={item.id}
                className={`cursor-pointer block px-4 py-2 text-sm ${
                  selectedItem && selectedItem.id === item.id
                    ? ` ${selectedItemStyle || "bg-orange-100"}`
                    : " text-gray-700 bg-white hover:bg-accent   focus:outline-none focus:bg-gray-100"
                }`}
                onClick={() => handleSelect(item)}
              >
                {item.value}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}
 

 export default SingleSelectDropdown