import React, { useState } from 'react';
import { Drawer } from 'antd';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faFileLines, faPlus, faInbox, faGear, faStar, faToolbox, faHouse } from '@fortawesome/free-solid-svg-icons';
import { __ } from '@wordpress/i18n';
import { _pg, _dashboard, _pluginUrl, _brand, _logo } from './adminData';

import './app-header.css';
import { applyFilters } from '../extend';

// The Pro Features page is an overview of the paid add-on; hide it once the add-on is active.
const SHOW_PRO_FEATURES = !(typeof window !== 'undefined' && window.formglut_admin && window.formglut_admin.pro_enabled);

/**
 * Three-bar button for the left of every header. Opens a side menu with the main FormGlut pages.
 */
export default function NavMenu() {
  const [open, setOpen] = useState(false);

  const params = new URLSearchParams(window.location.search);
  const page = params.get('page') || '';
  const hasForm = !!params.get('form_id');

  // Which menu entry is current for this page.
  const current = {
    'formglut-all-forms': 'forms',
    'formglut-editor': hasForm ? 'forms' : 'new',
    'formglut-form-settings': 'forms',
    'formglut-entries': 'entries',
    'formglut-entry-detail': 'entries',
    'formglut-settings': 'settings',
    'formglut-data-logs': 'tools',
    'formglut-pro-features': 'pro',
  }[page] || '';

  // Add-ons add pages with formglut.navMenu.items: { key, label, icon, href, pages: [ page slugs that mark it current ] }.
  const items = applyFilters('formglut.navMenu.items', [
    { key: 'forms', label: __( 'All Forms', 'formglut' ), icon: faFileLines, href: _pg.all_forms },
    { key: 'new', label: __( 'Add New Form', 'formglut' ), icon: faPlus, href: _pg.editor },
    { key: 'entries', label: __( 'Entries', 'formglut' ), icon: faInbox, href: _pg.entries },
    { key: 'tools', label: __( 'Data & Logs', 'formglut' ), icon: faToolbox, href: _pg.tools },
    { key: 'settings', label: __( 'Global Settings', 'formglut' ), icon: faGear, href: _pg.settings },
    ...(SHOW_PRO_FEATURES ? [{ key: 'pro', label: __( 'Pro Features', 'formglut' ), icon: faStar, href: _pg.pro_features }] : []),
  ], { page }).filter((i) => i.href);
  const currentKey = current || (items.find((i) => (i.pages || []).includes(page)) || {}).key || '';

  return (
    <>
      <button type="button" className="fg-hamburger" aria-label={__( 'Open menu', 'formglut' )} aria-expanded={open} onClick={() => setOpen(true)}>
        <span /><span /><span />
      </button>
      <Drawer
        open={open}
        onClose={() => setOpen(false)}
        placement="left"
        width={280}
        closable
        title={<img src={_logo()} alt={_brand.name} className="fg-drawer-logo" />}
        rootClassName="fg-nav-drawer"
        styles={{ body: { padding: '12px 0' }, header: { background: 'linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 50%, #16213e 100%)', borderBottom: 0 } }}
      >
        <nav className="fg-nav-list">
          {items.map((i) => (
            <a key={i.key} href={i.href} className={i.key === currentKey ? 'active' : ''}>
              <span className="ic"><FontAwesomeIcon icon={i.icon} /></span>
              {i.label}
            </a>
          ))}
        </nav>
        <div className="fg-nav-foot">
          <a href={_dashboard}><span className="ic"><FontAwesomeIcon icon={faHouse} /></span>{__( 'WordPress Dashboard', 'formglut' )}</a>
        </div>
      </Drawer>
    </>
  );
}