import React from 'react';
import { SketchPicker, ColorResult } from 'react-color'; // 40 kb ?
import classnames from 'classnames';
import { IUseColor } from '../../hooks/hook';
import JDLabel from '../label/JDLabel';
import { IDiv } from '../../types/interface';

export interface IProps extends IDiv {
  /** useColorPicker를 통해서 삽입하세요. */
  colorHook: IUseColor;
  /** Label 라벨 값 공통. */
  label?: string;
}

export const JDcolorPicker: React.SFC<IProps> = ({
  label,
  className,
  colorHook,
  ...props
}) => {
  const handleClick = () => {
    colorHook.setDisplay(!colorHook.display);
  };

  const handleClose = () => {
    colorHook.setDisplay(false);
  };

  const handleChange = (color: ColorResult) => {
    colorHook.setColor(color.hex);
  };

  const styleColor = {
    backgroundColor: colorHook.color,
  };

  const classNames = classnames('JDcolorPicker', className, {});

  return (
    <div className={classNames} {...props}>
      {label && (
        <div>
          <JDLabel txt={label} />
        </div>
      )}
      <div
        tabIndex={0}
        role="button"
        className="JDcolorPicker__swatch"
        onClick={handleClick}
        onKeyPress={handleClick}
      >
        <div className="JDcolorPicker__color" style={styleColor} />
      </div>
      {colorHook.display ? (
        <div className="JDcolorPicker__modalWrap">
          <div
            className="JDcolorPicker__cover"
            tabIndex={0}
            role="button"
            onKeyPress={handleClick}
            onClick={handleClose}
          />
          <SketchPicker color={colorHook.color} onChange={handleChange} />
        </div>
      ) : null}
    </div>
  );
};

export default JDcolorPicker;
