'use client'

import { cn } from '@/lib/utils/cn'
import { CheckIcon, ChevronDownIcon } from 'lucide-react'
import React, { useState } from 'react'
import { RegisterOptions, UseFormSetValue, UseFormWatch } from 'react-hook-form'
import { ScrollArea } from 'radix-ui'

interface Props extends React.PropsWithChildren {
  label: string
  name: string
  placeholder: string
  error?: string
  register?: any
  options?: RegisterOptions
  setValue?: UseFormSetValue<any>
  watch?: UseFormWatch<any>
  containerClass?: string
  stateMode?: boolean
  propsData?: { value: string; i: number }[]
  onChange?: (i: number) => void
}

export const SelectNew: React.FC<Props> = ({
  label,
  name,
  placeholder,
  error = '',
  register,
  options,
  setValue,
  watch,
  children,
  containerClass = '',
  stateMode = true,
  propsData = [],
  onChange,
}) => {
  const [isFocused, setIsFocused] = useState(false)

  const [data, setData] = useState(propsData)
  const [currentValue, setCurrentValue] = useState(0)

  return (
    <>
      <div className={cn('relative flex flex-col', containerClass)}>
        <label htmlFor={'#das'} className="body3-med text-basic-gray-txt mr-auto">
          {label}
        </label>
        <div className="relative">
          {/* <TopArrowSvg
            className="absolute z-[20] rotate-180 mt-[5px] absolute-py-center right-[20px]"
            width={18}
            height={18}
          /> */}
          <ChevronDownIcon
            width={20}
            height={20}
            className="absolute z-[20] text-grey-200 size-[20px] translate-y-[20px] right-[12px]"
          />

          <input
            autoComplete="off"
            {...(register ? register(name, options) : {})}
            className={cn(
              `relative mt-[6px] body3-reg w-full ${error.length > 0 ? '!border-func-error' : ''} `,
              'px-3 font-b2-regular file:text-foreground placeholder:text-grey-200 text-base-white hover:placeholder:text-grey-100 flex items-center justify-center h-12 w-full min-w-0  border border-[#FCFCFC33] bg-grey-700 group-hover:bg-neutral-500 py-3 text-base outline-none file:inline-flex file:h-7 file:border-0 file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed',
              {
                'rounded-[8px]': !isFocused,
                'rounded-t-[8px]': isFocused,
              },
            )}
            type="text"
            onFocus={() => {
              setIsFocused(true)
            }}
            onBlur={() => {
              setTimeout(() => {
                setIsFocused(false)
              }, 300)
            }}
            name={name}
            id={name}
            readOnly
            {...(stateMode && { value: data[currentValue].value })}
          />
          {isFocused && children}
        </div>
        {isFocused && (
          <div
            className={cn(
              'bg-grey-700 border border-base-white/20 absolute z-[20] flex flex-col translate-y-[100%] bottom-[0px] p-[8px_8px_8px_8px] left-0 w-full',
              {
                'rounded-[8px]': !isFocused,
                'rounded-b-[8px]': isFocused,
              },
            )}
          >
            <ScrollArea.Root>
              <ScrollArea.Viewport className="overflow-y-scroll scrollbar max-h-[400px]">
                <div className="pr-0">
                  {data.map((item, i) => (
                    <div
                      onClick={() => {
                        setTimeout(() => {
                          setCurrentValue(i)
                          onChange?.(i)
                        }, 300)
                      }}
                      className={cn(
                        'b3-regular hover:bg-grey-500 bg-grey-700 flex justify-between py-[13px] px-4 border-b text-base-white',
                        {
                          'border-base-white/20': currentValue !== i,
                          'border-base-white bg-grey-500': currentValue === i,
                        },
                      )}
                      key={i}
                    >
                      <div> {item.value} </div>
                      {currentValue === i && (
                        <div>
                          <CheckIcon width={20} height={20} />
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              </ScrollArea.Viewport>
              <ScrollArea.Scrollbar
                forceMount
                className="absolute top-0 right-[-12px] w-1 bg-transparent rounded-full"
              >
                <ScrollArea.Thumb className="w-1 bg-grey-100 rounded-full transition-all" />
              </ScrollArea.Scrollbar>
              <ScrollArea.Corner className="absolute bottom-0 right-0 bg-transparent" />
            </ScrollArea.Root>
          </div>
        )}
        {error?.length > 0 ? <div className="text-func-red">{error}</div> : <></>}
        {/* <div className="text-func-error">error</div> */}
      </div>
    </>
  )
}
