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'

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 [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 (hex === '#NaNNaNNaN') {
      setColor(colorTemp)
      onChange(colorTemp)
    } else {
      setColor(hex)
      onChange(hex)
    }
  }

  return (
    <React.Fragment>
      <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>
        )}
        <Popover
          overlayClassName="color-picker__popover"
          content={
            <ColorPicker
              className="color-picker__picker"
              color={color}
              onChange={(newColor: string) => onChangeColor(newColor)}
            />
          }
          placement="bottomLeft"
          trigger={['click']}
        >
          <div
            className={classNames(
              {
                'color-picker__input': true,
                '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>
          </div>
          {!!error && <Text className="color-picker__error">{error}</Text>}
        </Popover>
      </div>
    </React.Fragment>
  )
}

export default ColorPickerInput
