"use client"
import Select, { SingleValue } from "react-select"
import { customSelectProps } from "./types/types"
import { Controller } from "react-hook-form"
import { useEffect, useState } from "react"

const CustomSelect = (props: customSelectProps) => {
const [defaultValue, setDefaultValue] = useState()

   
    
   
    const customStyles = {
        container: (provided: any) => ({
            ...provided,
            // borderColor: "transparent",
            // borderWidth: 0.5,
            height: "48px",
            // paddingX: "110px",
            width: props.width ? props.width : "100%",
            color: props.styles?.text ? props.styles.text : "#6B7280",
            position: "relative",
            // overflowX: "scroll"// This applies the blur effect
        }),
        control: (base: any, state: any) => ({
            ...base,
            // width:"100%",
            
            backgroundColor: props.styles?.bg ? props.styles.bg : "#FAF9F6",
            borderRadius: "8px",
            border: state.isFocused ? "0px solid #D1D5DB" : "0px solid #E5E7EB",
            padding:  "0 8px 0 28px",
            display: "flex",
            alignItems: "center",
            boxShadow: state.isFocused ? "0 0 0 2px #E5E7EB" : "none",
            // "&:hover": {
            //   borderColor: "#D1D5DB",
            // },
            width:"100%",
            height: "48px",
            backdropFilter: "blur(3px)", 
            
       
        }),
        placeholder: (base:any) => ({
            ...base,
            color: props.styles?.text ? props.styles.text : "#6B7280",
            fontSize: "14px",
            display: "-webkit-box",
            WebkitBoxOrient: "vertical",
            WebkitLineClamp: 1, // Limit to 2 lines
            overflow: "hidden",
            whiteSpace: "normal", // Allow wrapping
          }),
          option: (styles: any, { isSelected , isDisabled}: { isSelected: boolean, isDisabled:boolean }) => ({
            ...styles,
            
            color: isSelected ? "white" : "black",
            fontSize: "14px",
            backgroundColor: isSelected ? '#A37130' : "white",
            outline: 'none', // Removes the blue outline/focus border
            border: 'none', // Removes any border that might cause the blue appearance
            boxShadow: 'none', // Prevents any shadow from appearing when selected
            ':active': {
                ...styles[':active'],
                backgroundColor: !isDisabled
                  ? isSelected
                    ? '#A37130' : "white"
                  : undefined,
              },
            '&:hover': {
                ...styles[':hover'],
                backgroundColor: 
                     '#A37130',
                     color: 'white'
                 
              },
        }),

        
        multiValue:(styles:any)=>{
            return {...styles, backgroundColor: "white", width:'40px', display:'flex'}
        },
        multiValueLabel:(styles:any)=>{
            return {...styles, backgroundColor: "white", width:'30px'}
        },
        singleValue: (base: any) => ({
            ...base,
            color: props.styles?.text ? props.styles.text : "#6B7280",
            fontWeight: "500",
           
        }),
        dropdownIndicator: (base: any) => ({
            ...base,
            color: props.styles?.text ? props.styles.text : "#6B7280",
            padding: "0 8px",
            "&:hover": {
                color: "#6B7280",
               
            },
        }),
        menu: (base: any) => ({
            ...base,
            zIndex: 9999,
            background: "white",
        }),
    }
         
useEffect(()=>{
    
let selected :any = [];
if(props?.options?.length >0 && props?.editOption?.length > 0){
    props?.editOption?.map((optionId)=>{

       

         props?.options?.map((option)=>{

           

           if(option?.value == optionId){

            selected.push(option)

           }
         })
    })
}
  
   
    setDefaultValue(selected)
},[props.options, props.editOption])


    // Custom Single Value with an icon
    const CustomSingleValue = ({ data }: any) => (
        <div className="flex gap-[10px]  absolute ">
            {props?.icon}
            <span className=" line-clamp-1">{data?.label}</span>
        </div>
    )
    // const CustomMultiValueContainer = ({ children, ...props }: any) => {
    //     return (
    //         <div className="flex items-center gap-2">
    //             <span>{props.selectPeo.icon}</span>
    //             <div className="flex ">{children}</div>
    //         </div>
    //     )
    // }
    
    

    
      
    return (
        <>
            <div className={`flex flex-col gap-2 capitalize ${props.className ? props.className : ""}`}>
                <label
                    htmlFor="select"
                    className={` text-[12px] lg:text-[14px] ${props.styles?.text ? `text-[${props.styles.text}]`: 'text-[#0B1617]'} `}
                >
                    {props.label}
                </label>
       
                  {/* @ts-ignore */}
                  <Controller name={props.name} control={props.control}   render={({field})=>(<>

                  {/* {props?.icon} */}
                  {props?.options?.length > 0 && (  <Select
                    // data-testid="22"
                    instanceId={props.label}
                    // value={props.editOption ||[]}
                    closeMenuOnSelect={ props.isMulti ? false : true}
                     isMulti={props.isMulti}
                    //  isLoading={props?.editOption === null ? true :false}
                    defaultValue={props?.editOption !== null && props?.options.filter(valu=> valu.value === props.editOption) }
                    options={props?.options?.length> 0? props.options:[]}
                    isSearchable={false}
                    onChange={field.onChange}
                    isClearable={false}
                    
                    styles={customStyles}
                    placeholder={props.placeholder ? props.placeholder: 'Select...'}
                    // components={{ SingleValue: CustomSingleValue, }}
                />)}
                </>
               )}/>
              
                   
          
            </div>
        </>
    )
}
export default CustomSelect