import React, {useState} from 'react';
import {TwitterPicker} from 'react-color';
import PropTypes from 'prop-types';
import Сlassnames from 'classnames';
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,
  handleChange,
  color,
  colors,
}) => {
  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,
};

ColorPicker.defaultProps = {
  color: {
    r: 255,
    g: 105,
    b: 0,
  },
  enabled: true,
  colors: ['#D9E3F0', '#F47373', '#697689', '#37D67A', '#2CCCE4', '#555555', '#DCE775', '#FF8A65', '#BA68C8'],
};

export default ColorPicker;