import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Menu } from 'semantic-ui-react';
import { SemanticToastContainer } from 'react-semantic-toasts';
import 'react-semantic-toasts/styles/react-semantic-alert.css';

import TemplateLibrary from './TemplateLibrary';
import './App.css';

/**
 * Returns the App component which is rendered.
 *
 * @param {boolean} isOfficeInitialized Checks whether office is intialized or not
 * @returns {React.FC} React component
 */
const App = ({ isOfficeInitialized }) => {
  const [activeNav, setActiveNav] = useState('library');
  const [openOnStartup, setOpenOnStartup] = useState(false);

  useEffect(() => {
    if (isOfficeInitialized) {
      const autoOpenSetting = Office.context.document.settings.get('Office.AutoShowTaskpaneWithDocument');
      setOpenOnStartup(autoOpenSetting);
    }
  }, [isOfficeInitialized]);

  /**
   * Sets the active nav item in the navbar.
   *
   * @param {MouseEvent} event    Mouse click event
   * @param {object}     obj      An object
   * @param {string}     obj.name Name of the event
   */
  const handleClick = (event, { name }) => {
    setActiveNav(name);
  };

  /**
   * Sets whether add-in should load by default on MS Word startup.
   *
   * @param {MouseEvent} event Mouseclick to see if checkbox is clicked
   */
  const handleStartupState = event => {
    Office.context.document.settings.set('Office.AutoShowTaskpaneWithDocument', event.target.checked);
    setOpenOnStartup(event.target.checked);
    Office.context.document.settings.saveAsync();
  };

  const navItems = [
    { name: 'document', content: 'Document', component: <p>Document component goes here.</p> },
    { name: 'library', content: 'Library', component: <TemplateLibrary /> },
  ];

  if (!isOfficeInitialized) {
    return (
      <p>Please sideload the extension.</p>
    );
  }

  return (
    <React.Fragment>
      <SemanticToastContainer position="top-center" />
      <Menu widths={navItems.length}>
        {navItems.map((item, index) => (
          <Menu.Item
            active={activeNav === item.name}
            key={index}
            name={item.name}
            onClick={handleClick}
            content={item.content}
          />
        ))}
      </Menu>
      <div className="menu-body">
        {navItems.map(item => (
          item.name === activeNav && item.component
        ))}
      </div>
      <footer className="startup-container">
        <label className="checkbox">
          <span>Auto open on startup:</span>
          <input type="checkbox" checked={openOnStartup} onChange={handleStartupState}></input>
        </label>
      </footer>
    </React.Fragment>
  );
};

App.propTypes = {
  isOfficeInitialized: PropTypes.bool,
};

export default App;