import Сlassnames from 'classnames';
import PropTypes from 'prop-types';
import React, {useState} from 'react';
import {TwitterPicker} from 'react-color';
import './styles.scss';

export function rgbToHex(color) {
  const _ = (value) => {
    let hex = Number(value).toString(16);

    if (hex.length < 2) {
      hex = `0${hex}`;
    }

    return hex;
  };
  const {r, g, b} = color;

  return `#${_(r)}${_(g)}${_(b)}`;
}

export function hexToRgb(color) {
  const shortHex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color.replace(shortHex, '#$1$1$2$2$3$3'));

  return result
    ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16),
      }
    : null;
}

const ColorPicker = ({
  enabled = true,
  handleChange,
  color = {r: 255, g: 105, b: 0},
  colors = ['#D9E3F0', '#F47373', '#697689', '#37D67A', '#2CCCE4', '#555555', '#DCE775', '#FF8A65', '#BA68C8'],
}) => {
  const [displayColorPicker, setDisplayColorPicker] = useState(false);

  const colorStyle = {
    background: `rgb(${color.r}, ${color.g}, ${color.b})`,
    border: `solid 1px rgb(${color.r * 0.9}, ${color.g * 0.9}, ${color.b * 0.9})`,
  };

  function handleClick() {
    if (!enabled) {
      return;
    }

    setDisplayColorPicker(!displayColorPicker);
  }

  const value = rgbToHex(color).toUpperCase();

  return (
    <div>
      <div className={Сlassnames('ColorPicker__swatch', {ColorPicker__swatch_blended: !enabled})}>
        <div className="ColorPicker__color" style={colorStyle} onClick={handleClick} role="presentation" />
        <div className="ColorPicker__hex">{value}</div>
      </div>
      {displayColorPicker && (
        <div className="ColorPicker__popover">
          <div className="ColorPicker__cover" onClick={() => setDisplayColorPicker(false)} role="presentation" />
          <TwitterPicker
            color={color}
            onChange={handleChange}
            colors={colors}
            styles={{default: {swatch: {border: '1px solid #F1F1F1'}}}}
          />
        </div>
      )}
    </div>
  );
};

ColorPicker.propTypes = {
  color: PropTypes.shape({
    r: PropTypes.number.isRequired,
    g: PropTypes.number.isRequired,
    b: PropTypes.number.isRequired,
  }),
  handleChange: PropTypes.func.isRequired,
  colors: PropTypes.array,
  enabled: PropTypes.bool,
};

export default ColorPicker;