import React, { useRef, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import ButtonCopy from '../../atoms/buttons/ButtonCopy';
import './styles.css';

var ColorSwatch = function ColorSwatch(_ref) {
  var name = _ref.name,
      value = _ref.value,
      variable = _ref.variable;

  var hexValue = value.toUpperCase();
  return React.createElement(
    'li',
    { style: { width: 300, margin: 10, padding: 10 } },
    React.createElement(
      'h3',
      { className: 'ma__sidebar-heading' },
      name
    ),
    React.createElement('div', { className: 'sg-swatch', style: { background: value, borderRadius: 0 } }),
    React.createElement(
      'div',
      { className: 'sg-info' },
      React.createElement(
        'span',
        null,
        hexValue
      ),
      React.createElement(ButtonCopy, { content: hexValue }),
      React.createElement('br', null),
      React.createElement(
        'code',
        { style: { fontSize: '1rem' } },
        variable
      )
    )
  );
};

ColorSwatch.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Color name */
  name: PropTypes.string,
  /** Color hex value */
  value: PropTypes.string,
  /** Color variable alias */
  variable: PropTypes.string
} : {};

var GradientTile = function GradientTile(props) {
  var colorRef = useRef(null);

  var _useState = useState(''),
      rgb = _useState[0],
      setRgb = _useState[1];

  useEffect(function () {
    var computedStyles = window.getComputedStyle(colorRef.current).getPropertyValue('background-color');
    setRgb(function () {
      return computedStyles;
    });
  });
  var hex = function hex(x) {
    return ('0' + Number(x).toString(16)).slice(-2);
  };
  var rgbToHex = function rgbToHex(rgbVal) {
    var rgbValues = rgbVal && rgbVal.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    var hexValue = rgbValues && '#' + hex(rgbValues[1]) + hex(rgbValues[2]) + hex(rgbValues[3]);
    return hexValue;
  };
  var index = props.index,
      effect = props.effect;

  var firstTile = index === 0;
  var name = firstTile ? props.name : index * 10 + ' % ' + effect;
  var token = void 0;
  switch (name) {
    case props.name:
      token = '$' + props.token;
      break;
    case '50 % tint':
      token = 'lighter';
      break;
    case '90 % tint':
      token = 'lightest';
      break;
    case '30 % shade':
      token = 'darker';
      break;
    case '50 % shade':
      token = 'darkest';
      break;
    default:
      token = '';
  }
  var hexValue = rgbToHex(rgb).toUpperCase();
  return React.createElement(
    'li',
    { className: props.token + '--' + effect },
    React.createElement(
      'h3',
      { className: 'ma__sidebar-heading' },
      name
    ),
    React.createElement('div', { className: 'sg-swatch', ref: colorRef }),
    React.createElement(
      'div',
      { className: 'sg-info' },
      React.createElement(
        'span',
        null,
        hexValue
      ),
      React.createElement(ButtonCopy, { content: hexValue }),
      React.createElement('br', null),
      React.createElement(
        'code',
        { style: { fontSize: '1rem' } },
        token
      )
    )
  );
};

GradientTile.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Gradient index, used to determine the percentage of the effect */
  index: PropTypes.number,
  /** Color effect: tint or shade  */
  effect: PropTypes.string,
  /** Base color name */
  name: PropTypes.string,
  /** Base color SCSS variable name */
  token: PropTypes.string
} : {};

var GradientSpectrum = function GradientSpectrum(_ref2) {
  var token = _ref2.token,
      name = _ref2.name,
      effect = _ref2.effect;

  var tiles = effect === 'tint' ? 10 : 6;
  var i = void 0;
  var tilesArray = [];
  for (i = 0; i < tiles; i += 1) {
    tilesArray.push(i);
  }
  return React.createElement(
    'ul',
    { className: 'sg-colors sg-colors--gradient' },

    // eslint-disable-next-line react/no-array-index-key
    tilesArray.map(function (index) {
      return React.createElement(GradientTile, { key: '' + token + index, name: name, token: token, index: index, effect: effect });
    })
  );
};

GradientSpectrum.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Color effect: tint or shade  */
  effect: PropTypes.string,
  /** Base color name */
  name: PropTypes.string,
  /** Base color SCSS variable alias */
  token: PropTypes.string
} : {};

export { ColorSwatch, GradientSpectrum };