// #region [Imports] ===================================================================================================

// Libraries
import { useEffect, useState } from 'react';
import { useHistory } from 'react-router-dom';
import { bindActionCreators, Dispatch } from 'redux';
import { connect } from 'react-redux';

// Actions
import { PageActions } from '../../store/actions/page';

// Types
import { IStore } from '../../types/store';
import { ISingleNotice } from '../../types/notices';

// Helpers
import { getPathPrefix } from '../../helpers/utils';

// SCSS
import './index.scss';

// #endregion [Imports]

// #region [Variables] =================================================================================================

declare var acfwAdminApp: any;
const { setStorePage } = PageActions;

// #endregion [Variables]

// #region [Interfaces]=================================================================================================

interface IActions {
  setStorePage: typeof setStorePage;
}

interface IProps {
  page: string;
  notices: ISingleNotice[];
  actions: IActions;
}

// #endregion [Interfaces]

// #region [Component] =================================================================================================

const CouponsNav = (props: IProps) => {
  const { page, notices, actions } = props;
  const [prevPage, setPrevPage] = useState('');
  const history = useHistory();
  const pathPrefix = getPathPrefix();

  const {
    coupon_nav: { toplevel, dashboard, links },
    app_pages,
  } = acfwAdminApp;

  /**
   * Handle menu click event.
   *
   * @param {string} id Page ID/Slug
   */
  const handleMenuClick = (id: string) => {
    history.push(`${pathPrefix}admin.php?page=${id}`);
    actions.setStorePage({ data: id });

    // Notify the main app's BrowserRouter of the URL change.
    // The sidebar nav and main app use separate BrowserRouter instances,
    // and history.push() (pushState) does not fire popstate, so the main
    // app's router won't see the new URL without this event.
    window.dispatchEvent(new PopStateEvent('popstate'));
  };

  /**
   * Add page slug to the body's class list.
   */
  useEffect(() => {
    document.body.classList.add(page);
    if (prevPage) document.body.classList.remove(prevPage);
    setPrevPage(page);
  }, [page]);

  return (
    <>
      <a
        href={`${pathPrefix}edit.php?post_type=shop_coupon`}
        className="wp-has-submenu wp-has-current-submenu wp-menu-open menu-top toplevel_page_acfw-admin"
      >
        <div className="wp-menu-arrow">
          <div></div>
        </div>
        <div className="wp-menu-image dashicons-before dashicons-tickets-alt">
          <br />
        </div>
        <div className="wp-menu-name">
          {toplevel}
          {0 < notices.length && (
            <>
              &nbsp;
              <span className={`update-plugins count-${notices.length}`}>
                <span className="notices-count">{notices.length}</span>
              </span>
            </>
          )}
        </div>
      </a>
      <ul className="wp-submenu wp-submenu-wrap">
        <li className="wp-submenu-head" aria-hidden="true">
          {toplevel}
        </li>
        <li key="acfw-dashboard" className={`wp-first-item ${'acfw-dashboard' === page ? 'current' : ''}`}>
          <button className={`buttonlink dashboard-link`} onClick={() => handleMenuClick(`acfw-dashboard`)}>
            {dashboard}
          </button>
        </li>
        {links.map(({ link, text }: any, key: number) => (
          <li key={key}>
            <a href={link}>{text}</a>
          </li>
        ))}
        {app_pages.map(({ slug, label }: any) => (
          <li key={slug} className={slug === page ? `current` : ''}>
            <button className={`buttonlink ${slug}-link`} onClick={() => handleMenuClick(slug)}>
              {label}
            </button>
          </li>
        ))}
      </ul>
    </>
  );
};

const mapStateToProps = (store: IStore) => ({
  page: store.page,
  notices: store.adminNotices,
});

const mapDispatchToProps = (dispatch: Dispatch) => ({
  actions: bindActionCreators({ setStorePage }, dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(CouponsNav);

// #endregion [Component]