import './ColorPickerInput.scss'
import classNames from 'classnames'
import React, { useState, useEffect, useMemo } from 'react'
import { Text } from 'components/Typography'
import { Popover } from 'antd'
import ColorPicker from './ColorPicker'
import { useController } from 'react-hook-form'
import { FLAGS, useFeatureIsOn } from '@komi-app/flags-sdk'
import { Dropdown, DropdownItem } from './Dropdown/Dropdown'

interface ColorPickerInputProps {
  className?: string
  titleClassName?: string
  inputClassName?: string
  title?: string
  errorMessage?: string
  value: string
  onChange: (color: string) => void
}

const ColorPickerInput: React.FC<ColorPickerInputProps> = ({
  className,
  titleClassName,
  title,
  value,
  errorMessage,
  onChange
}) => {
  const [color, setColor] = useState<string>()
  const [error, setError] = useState<string>()
  const [expanded, setExpanded] = useState<boolean>(false)
  const [colorTemp, setColorTemp] = useState<string>(() => value)

  useEffect(() => {
    setColor(value)
  }, [value])

  useEffect(() => {
    if (errorMessage && errorMessage !== '') {
      setError(errorMessage)
    } else {
      setError(undefined)
    }
  }, [errorMessage])

  const colorMark = useMemo(
    () => ({
      backgroundColor: color
    }),
    [color]
  )

  const onChangeColor = (hex: string) => {
    if (hex.length === 7) setColorTemp(hex)
    if (!/[a-fA-F0-9]/.test(hex)) {
      return
    }

    if (hex === '#NaNNaNNaN') {
      setColor(colorTemp)
      onChange(colorTemp)
    } else {
      setColor(hex)
      onChange(hex)
    }
  }

  return (
    <div
      className={classNames({
        'color-picker': true,
        'color-picker__input-border-highlight': true,
        [className || '']: true
      })}
    >
      {title && (
        <Text
          className={classNames({
            'color-picker__title text--gray4 opacity--80 leading-22': true,
            [titleClassName || '']: true
          })}
          data-testid="color-picker__title"
        >
          {title}
        </Text>
      )}

      <Dropdown
        className="color-picker__popover"
        heading={
          <div
            className={classNames(
              {
                'color-picker__input': true,
                'color-picker__focused': expanded,
                'color-picker__input--error': !!error
              },
              className
            )}
          >
            <div
              className="color-mark"
              style={colorMark}
              data-testid="color-picker__marker"
            />

            <Text
              className="color-title"
              preset="semibold16"
              data-testid="color-picker__input"
            >
              {color?.replace('#', '') ? color : ''}
            </Text>

            {!!error && <Text className="color-picker__error">{error}</Text>}
          </div>
        }
        placeholder="Select a color"
        onClick={() => {}}
        onSelect={() => {}}
        onChange={() => {}}
        onToggle={setExpanded}
      >
        <div className="color-picker__popover">
          <ColorPicker
            className="color-picker__picker"
            color={color}
            onChange={(newColor: string) => onChangeColor(newColor)}
          />
        </div>
      </Dropdown>
    </div>
  )
}

export default ColorPickerInput
