import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
import { __ } from '@wordpress/i18n';
import { _pg } from './adminData';
import NavMenu from './NavMenu';
import GlobalSearch from './GlobalSearch';
import './editor-header.css';
import { applyFilters } from '../extend';

/**
 * Dark top bar shared by the form editor and the form settings page:
 * back link, form title, Editor / Settings / Entries tabs, and page actions on the right.
 */
export default function EditorHeader({ formId, title, onTitleChange, active = 'editor', children }) {
  const withId = (url) => (formId ? `${url}&form_id=${formId}` : url);
  const tab = (key, label, href) => (key === active
    ? <button className="fg-editor-tab active" type="button">{label}</button>
    : <a className="fg-editor-tab" href={href}>{label}</a>);

  return (
    <header className="fg-editor-header">
      <div className="fg-editor-header-left">
        <NavMenu />
        <a className="fg-editor-back" href={_pg.all_forms}><FontAwesomeIcon icon={faArrowLeft} /> {__( 'Back', 'formglut' )}</a>
        <input
          className="fg-editor-title-input"
          value={title}
          readOnly={!onTitleChange}
          onChange={onTitleChange ? (e) => onTitleChange(e.target.value) : undefined}
          placeholder={__( 'Enter form title...', 'formglut' )}
        />
      </div>
      <div className="fg-editor-header-center">
        {/* Add-ons add tabs with formglut.editor.tabs: { key, label, href } (e.g. Results). */}
        {applyFilters('formglut.editor.tabs', [
          { key: 'editor', label: __( 'Editor', 'formglut' ), href: formId ? `${_pg.editor}&form_id=${formId}` : _pg.editor },
          { key: 'settings', label: __( 'Settings', 'formglut' ), href: formId ? `${_pg.form_settings}&form_id=${formId}` : _pg.settings },
          { key: 'entries', label: __( 'Entries', 'formglut' ), href: withId(_pg.entries) },
        ], { formId, active }).map((t) => <React.Fragment key={t.key}>{tab(t.key, t.label, t.href)}</React.Fragment>)}
      </div>
      <div className="fg-editor-header-right">
        {/* Add-ons add buttons (e.g. Revisions) with formglut.editor.headerActions: an array of elements. */}
        {applyFilters('formglut.editor.headerActions', [], { formId, active }).map((el, i) => <React.Fragment key={i}>{el}</React.Fragment>)}
        {children}
      </div>
      <GlobalSearch button={false} />
    </header>
  );
}