import {
  CloseButton,
  ContractButton,
  MaximizeButton,
  MinimizeButton
} from 'components/titlebar/TitlebarButtons';
import React, { useState } from 'react';

import { app } from 'utils/services';
import favicon from 'components/titlebar/img/favicon.svg';
import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
import styles from 'components/titlebar/scss/Titlebar.module.scss';

initializeIcons();

/**
 * @namespace Titlebar
 * @description Title Component to use as an Electron customized titlebar.
 *
 * @property {id} electron-window-title-text used in main.js to set opacity on/off focus.
 * @property {id} electron-window-title-buttons used in main.js to set opacity on/off focus.
 */

const Titlebar = () => {

  const [ maximized, setMaximized ] = useState(false);

  const handleMaximizeToggle = () => {
    !maximized ? app.maximize() : app.unmaximize();
    setMaximized(!maximized);
  };

  return (
    <section className={ styles.titlebar }>
      <div>
        <img src={ favicon } alt='favicon' />
        <span id='electron-window-title-text'>{ document.title }</span>
      </div>

      <div id='electron-window-title-buttons'>
        <MinimizeButton onClick={ app.minimize }/>

        {
          maximized ?
          <ContractButton onClick={ handleMaximizeToggle }/> :
          <MaximizeButton onClick={ handleMaximizeToggle }/>
        }
        <CloseButton onClick={ app.quit } />
      </div>
    </section>
  );
};

export default Titlebar;