'use strict';

exports.__esModule = true;
exports.GradientSpectrum = exports.ColorSwatch = undefined;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _ButtonCopy = require('../../atoms/buttons/ButtonCopy');

var _ButtonCopy2 = _interopRequireDefault(_ButtonCopy);

require('./styles.css');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

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

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

var GradientTile = function GradientTile(props) {
  var colorRef = (0, _react.useRef)(null);

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

  (0, _react.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 _react2.default.createElement(
    'li',
    { className: props.token + '--' + effect },
    _react2.default.createElement(
      'h3',
      { className: 'ma__sidebar-heading' },
      name
    ),
    _react2.default.createElement('div', { className: 'sg-swatch', ref: colorRef }),
    _react2.default.createElement(
      'div',
      { className: 'sg-info' },
      _react2.default.createElement(
        'span',
        null,
        hexValue
      ),
      _react2.default.createElement(_ButtonCopy2.default, { content: hexValue }),
      _react2.default.createElement('br', null),
      _react2.default.createElement(
        'code',
        { style: { fontSize: '1rem' } },
        token
      )
    )
  );
};

GradientTile.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Gradient index, used to determine the percentage of the effect */
  index: _propTypes2.default.number,
  /** Color effect: tint or shade  */
  effect: _propTypes2.default.string,
  /** Base color name */
  name: _propTypes2.default.string,
  /** Base color SCSS variable name */
  token: _propTypes2.default.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 _react2.default.createElement(
    'ul',
    { className: 'sg-colors sg-colors--gradient' },

    // eslint-disable-next-line react/no-array-index-key
    tilesArray.map(function (index) {
      return _react2.default.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: _propTypes2.default.string,
  /** Base color name */
  name: _propTypes2.default.string,
  /** Base color SCSS variable alias */
  token: _propTypes2.default.string
} : {};

exports.ColorSwatch = ColorSwatch;
exports.GradientSpectrum = GradientSpectrum;