import React, { useState, useEffect } from 'react';

import ColorSelectorComp from '../components/ColorSelector';

import useStore from '../store';

type Props = {
  title?: string;
  selectedColor?: string;
  onClick: (color: string) => void;
  mode?: 'normal' | 'shape' | 'watermark';
};

const ColorSelector: React.FC<Props> = ({
  title,
  onClick,
  selectedColor,
  mode,
}: Props) => {
  const [isCollapse, setCollapse] = useState(true);
  const [{ sidebarState, markupToolState }] = useStore();

  const pickerToggle = (e: React.MouseEvent<HTMLElement>): void => {
    e.preventDefault();
    setCollapse(!isCollapse);
  };

  useEffect(() => {
    setCollapse(true);
  }, [markupToolState, sidebarState]);

  return (
    <ColorSelectorComp
      title={title}
      onClick={onClick}
      selectedColor={selectedColor}
      mode={mode}
      pickerToggle={pickerToggle}
      isCollapse={isCollapse}
    />
  );
};

export default ColorSelector;