import React from 'react';
import PropTypes from 'prop-types';
import Color from 'color';
import cx from 'classnames';
import { useClipboard } from 'xooks';
import { Scrollbars } from 'react-custom-scrollbars';
import { useTheme } from '../../../ThemeProvider';
import HexInput from '../../../components/HexInput/HexInput';
import Background from '../../../components/Background/Background';
import classes from './ColorShadesList.styles.less';

function generateShades({ steps, value, saturation, darken }) {
  let dark = Color(value);
  let light = Color(value);

  const shades = [dark.hex()];
  const tints = [];

  for (let i = 1; i < steps; i += 1) {
    dark = dark.darken(darken).saturate(saturation);
    light = light.lighten(darken).saturate(saturation);

    dark.hex().toLowerCase() !== '#000000' && shades.push(dark.hex());
    light.hex().toLowerCase() !== '#ffffff' && tints.push(light.hex());
  }

  return [...tints.reverse(), ...shades];
}

export default function ColorShadesList({
  value,
  onChange,
  onDelete,
  canDelete,
  saturation,
  darken,
}) {
  const [theme] = useTheme();
  const clipboardAll = useClipboard();
  const clipboard = useClipboard({ timeout: 500 });
  const values = generateShades({ steps: 7, value, saturation, darken });
  const copyAll = () => clipboardAll.copy(JSON.stringify(values, null, 2));

  const items = values.map((shade, index) => (
    <button
      type="button"
      key={index}
      className={classes.shade}
      onClick={() => clipboard.copy(shade)}
    >
      <div className={classes.preview} style={{ backgroundColor: shade }} />
      <div className={classes.value}>{shade}</div>
    </button>
  ));

  return (
    <Background
      className={cx(classes.wrapper, classes[theme], { [classes.copied]: clipboard.copied })}
    >
      <div className={classes.header}>
        <HexInput value={value} onChange={onChange} />

        <div className={classes.controls}>
          <button
            className={cx(classes.copyAll, { [classes.copyAllCopied]: clipboardAll.copied })}
            type="button"
            onClick={copyAll}
          >
            {clipboardAll.copied ? 'Copied' : 'Copy all values'}
          </button>

          {canDelete && (
            <button type="button" className={classes.remove} onClick={onDelete}>
              Remove
            </button>
          )}
        </div>
      </div>
      <Scrollbars style={{ width: '100%', height: 110 }}>
        <div className={classes.shades}>{items}</div>
      </Scrollbars>
    </Background>
  );
}

ColorShadesList.propTypes = {
  value: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
  onDelete: PropTypes.func.isRequired,
  canDelete: PropTypes.bool.isRequired,
  saturation: PropTypes.number.isRequired,
  darken: PropTypes.number.isRequired,
};