import * as React from 'react';

import { ColorPicker, BoxColor, GridColors, ColumnColor, InputColor, Check } from './ColorPicker.styled';
import defaultColors from './RecommendedColors';

interface IProps {
  onChange: (string?: string) => string;
  defaultColor?: string;
}

export default React.memo(({ onChange, defaultColor }: IProps) => {
  const [ selectedColor, setSelectedColor ] = React.useState(defaultColor || '#00002D');
  const [ inputColor, setInputColor ] = React.useState(selectedColor);
  const [ recommendedColor ] = React.useState(defaultColors);

  const setColor = (color: string) => {
    setSelectedColor(color);
    setInputColor(color);
    onChange(color);
  };

  const changeColor = ({ target }: { target: any }) => {
    const { value } = target;
    const isValidHex = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(value);

    setInputColor(value);
    if (isValidHex) {
      setColor(value);
    }
  };

  return (
    <ColorPicker>
      <BoxColor color={selectedColor}>
        {selectedColor}
      </BoxColor>
      <GridColors>
        {recommendedColor.map(color => (
          <ColumnColor
            color={color.hex}
            key={color.id}
            onClick={() => setColor(color.hex)}
          >
          {color.hex === selectedColor && <Check />}
          </ColumnColor>
        ))}
      </GridColors>
      <InputColor>
        <input
          className='input'
          type='text'
          maxLength={7}
          value={inputColor}
          onChange={changeColor}
        />
      </InputColor>
    </ColorPicker>
  );
});