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' | 'freehand' | 'watermark';
  throughPortal?: boolean;
};

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

  const pickerToggle = (): void => {
    setCollapse(!isCollapse);
  };

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

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

export default ColorSelector;