import React, { useState } from 'react';

import WatermarkComponent from '../components/Watermark';

import useActions from '../actions';
import useStore from '../store';

const Watermark: React.FunctionComponent = () => {
  const [isActive, setActive] = useState(false);
  const [, dispatch] = useStore();
  const { switchSidebar } = useActions(dispatch);

  const handleClick = (): void => {
    setActive(!isActive);
    switchSidebar(!isActive ? 'watermark' : '');
  };

  return (
    <WatermarkComponent
      isActive={isActive}
      onClick={handleClick}
    />
  );
};

export default Watermark;