// @flow
'use strict';

import React, { useState } from 'react';
import reactCSS from 'reactcss';
import { SketchPicker } from 'react-color';
import classNames from 'classnames';
import { changeColor, getPrimaryColor } from 'util/theme';

type Props = {
  disabled?: boolean,
};

function ColorPicker(props: Props) {
  const { disabled } = props;
  const [displayColorPicker, toggleDisplayColorPicker] = useState(false);
  let dynamic = getPrimaryColor();
  var rgb = dynamic.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i);
  var hex = rgb
    ? (rgb[1] | (1 << 8)).toString(16).slice(1) +
      (rgb[2] | (1 << 8)).toString(16).slice(1) +
      (rgb[3] | (1 << 8)).toString(16).slice(1)
    : dynamic;
  const [color, setColor] = useState({
    hex: '#' + hex,
    rgb: { r: parseInt(rgb[1]), g: parseInt(rgb[2]), b: parseInt(rgb[3]), a: 1 },
  });

  const styles = reactCSS({
    default: {
      color: {
        background: `rgba(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}, ${color.rgb.a})`,
      },
    },
  });

  function handleChange(color) {
    console.log('Color: ', color);
    changeColor(color.rgb);
    setColor(color);
  }

  return (
    <div
      className={classNames('color-picker', {
        disabled: disabled,
      })}
    >
      <input value={color.hex} />
      <div className="swatch" onClick={() => toggleDisplayColorPicker(!displayColorPicker)}>
        <div className="color" style={styles.color} />
      </div>
      {displayColorPicker ? (
        <div className="popover">
          <div className="cover" onClick={() => toggleDisplayColorPicker(false)} />
          <SketchPicker color={color} onChange={handleChange} disableAlpha />
        </div>
      ) : null}
    </div>
  );
}

export default ColorPicker;