import React, { useState } from 'react';

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

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

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

  const handleClick = () => {
    setActive(!isActive);
    switchSidebar(!isActive ? 'watermark' : '');
  }
  
  return (
    <WatermarkComponent
      isActive={isActive}
      onClick={handleClick}
    />
  );
};

export default Watermark;
