import { cn } from '@langgenius/dify-ui/cn'
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import {
  memo,
  useState,
} from 'react'
import { THEME_MAP } from '../../constants'
import { NoteTheme } from '../../types'

const COLOR_LIST = [
  {
    key: NoteTheme.blue,
    inner: THEME_MAP[NoteTheme.blue]!.title,
    outer: THEME_MAP[NoteTheme.blue]!.outer,
  },
  {
    key: NoteTheme.cyan,
    inner: THEME_MAP[NoteTheme.cyan]!.title,
    outer: THEME_MAP[NoteTheme.cyan]!.outer,
  },
  {
    key: NoteTheme.green,
    inner: THEME_MAP[NoteTheme.green]!.title,
    outer: THEME_MAP[NoteTheme.green]!.outer,
  },
  {
    key: NoteTheme.yellow,
    inner: THEME_MAP[NoteTheme.yellow]!.title,
    outer: THEME_MAP[NoteTheme.yellow]!.outer,
  },
  {
    key: NoteTheme.pink,
    inner: THEME_MAP[NoteTheme.pink]!.title,
    outer: THEME_MAP[NoteTheme.pink]!.outer,
  },
  {
    key: NoteTheme.violet,
    inner: THEME_MAP[NoteTheme.violet]!.title,
    outer: THEME_MAP[NoteTheme.violet]!.outer,
  },
]

export type ColorPickerProps = {
  theme: NoteTheme
  onThemeChange: (theme: NoteTheme) => void
}
const ColorPicker = ({
  theme,
  onThemeChange,
}: ColorPickerProps) => {
  const [open, setOpen] = useState(false)

  return (
    <Popover
      open={open}
      onOpenChange={setOpen}
    >
      <PopoverTrigger
        nativeButton
        render={(
          <button
            type="button"
            className={cn(
              'flex size-8 cursor-pointer items-center justify-center rounded-md hover:bg-black/5',
              open && 'bg-black/5',
            )}
          >
            <div
              className={cn(
                'size-4 rounded-full border border-black/5',
                THEME_MAP[theme]!.title,
              )}
            >
            </div>
          </button>
        )}
      />
      <PopoverContent
        placement="top"
        sideOffset={4}
        popupClassName="border-none bg-transparent shadow-none"
      >
        <div className="grid grid-cols-3 grid-rows-2 gap-0.5 rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-lg">
          {
            COLOR_LIST.map(color => (
              <div
                key={color.key}
                className="group relative flex size-8 cursor-pointer items-center justify-center rounded-md"
                onClick={(e) => {
                  e.stopPropagation()
                  onThemeChange(color.key)
                  setOpen(false)
                }}
              >
                <div
                  className={cn(
                    'absolute top-1/2 left-1/2 hidden h-5 w-5 -translate-x-1/2 -translate-y-1/2 rounded-full border-[1.5px] group-hover:block',
                    color.outer,
                  )}
                >
                </div>
                <div
                  className={cn(
                    'absolute top-1/2 left-1/2 size-4 -translate-1/2 rounded-full border border-black/5',
                    color.inner,
                  )}
                >
                </div>
              </div>
            ))
          }
        </div>
      </PopoverContent>
    </Popover>
  )
}

export default memo(ColorPicker)
