import { useCreateDict } from '@/hooks/create'
import { cn } from '@/lib/utils'
import { UseFormReturn } from 'react-hook-form'
import Image from 'next/image'
import { useEffect } from 'react'

const StyleSelector = ({
  value,
  onChange,
}: {
  value: number | undefined
  onChange: (value: number) => void
}) => {
  const { data: dicts } = useCreateDict()

  const styles = dicts?.imageStyleDictList || []

  useEffect(() => {
    if (styles.length > 0) {
      onChange(styles[0].id as number)
    }
  }, [styles])

  return (
    <div className="grid grid-cols-3 gap-4">
      {styles.map((style) => (
        <div
          key={style.id}
          className="flex cursor-pointer flex-col items-center gap-2"
          onClick={() => {
            onChange(style.id as number)
            localStorage.setItem('generate-image-style', style.id as unknown as string)
          }}
        >
          <div
            className={cn(
              'rounded-m relative flex size-[108px] items-end justify-end bg-cover bg-center bg-no-repeat',
              value === style.id &&
                "before:border-primary-variant-normal before:absolute before:-top-1 before:-left-1 before:z-10 before:h-[116px] before:w-[116px] before:rounded-sm before:border-2 before:content-['']"
            )}
          >
            <Image
              src={style.url || ''}
              alt={style.name || ''}
              className="rounded-sm object-cover"
              width={108}
              height={108}
            />
          </div>
          <span className="text-txt-primary-normal txt-body-m text-center">{style.name}</span>
        </div>
      ))}
    </div>
  )
}

export default StyleSelector
