import * as React from "react";

import { WorkspaceLanguage } from "./workspace";

export interface ToolbarProps {
  canSaveDiagram?: boolean;
  onSaveDiagram?: () => void;
  canPersistChanges?: boolean;
  onPersistChanges?: () => void;
  onForceLayout?: () => void;
  onClearAll?: () => void;
  onZoomIn?: () => void;
  onZoomOut?: () => void;
  onZoomToFit?: () => void;
  onExportSVG?: (fileName?: string) => void;
  onExportPNG?: (fileName?: string) => void;
  onPrint?: () => void;
  languages?: readonly WorkspaceLanguage[];
  selectedLanguage?: string;
  onChangeLanguage?: (language: string) => void;
  hidePanels?: boolean;
}

interface ToolbarState {
  clearAllArmed?: boolean;
}

const CLASS_NAME = "graph-explorer-toolbar";
// how long the "Clear All" confirmation stays armed before reverting on its own
const CLEAR_ALL_ARM_TIMEOUT = 4000;

export class DefaultToolbar extends React.Component<ToolbarProps, ToolbarState> {
  state: ToolbarState = {};
  private clearAllTimeout: ReturnType<typeof setTimeout> | undefined;

  componentWillUnmount() {
    this.clearClearAllTimeout();
  }

  private clearClearAllTimeout() {
    if (this.clearAllTimeout !== undefined) {
      clearTimeout(this.clearAllTimeout);
      this.clearAllTimeout = undefined;
    }
  }

  private onClearAllClick = () => {
    if (this.state.clearAllArmed) {
      this.clearClearAllTimeout();
      this.setState({ clearAllArmed: false });
      this.props.onClearAll();
    } else {
      this.clearClearAllTimeout();
      this.clearAllTimeout = setTimeout(() => {
        this.setState({ clearAllArmed: false });
      }, CLEAR_ALL_ARM_TIMEOUT);
      this.setState({ clearAllArmed: true });
    }
  };

  private onChangeLanguage = (
    event: React.SyntheticEvent<HTMLSelectElement>
  ) => {
    const value = event.currentTarget.value;
    this.props.onChangeLanguage(value);
  };

  private onExportSVG = () => {
    this.props.onExportSVG();
  };

  private onExportPNG = () => {
    this.props.onExportPNG();
  };

  private renderSaveDiagramButton() {
    if (!this.props.onSaveDiagram) {
      return null;
    }
    return (
      <button
        type="button"
        className="saveDiagramButton graph-explorer-btn graph-explorer-btn-primary"
        disabled={this.props.canSaveDiagram === false}
        onClick={this.props.onSaveDiagram}
      >
        <span className="fa fa-floppy-o" aria-hidden="true" /> Save diagram
      </button>
    );
  }

  private renderPersistAuthoredChangesButton() {
    if (!this.props.onPersistChanges) {
      return null;
    }
    return (
      <button
        type="button"
        className="saveDiagramButton graph-explorer-btn graph-explorer-btn-success"
        disabled={this.props.canPersistChanges === false}
        onClick={this.props.onPersistChanges}
      >
        <span className="fa fa-floppy-o" aria-hidden="true" /> Save data
      </button>
    );
  }

  private renderLanguages() {
    const { selectedLanguage, languages } = this.props;
    if (languages.length <= 1) {
      return null;
    }

    return (
      <span
        className={`graph-explorer-btn-group ${CLASS_NAME}__language-selector`}
      >
        <label className="graph-explorer-label">
          <span>Data Language</span>
        </label>
        <select value={selectedLanguage} onChange={this.onChangeLanguage}>
          {languages.map(({ code, label }) => (
            <option key={code} value={code}>
              {label}
            </option>
          ))}
        </select>
      </span>
    );
  }

  render() {
    return (
      <div className={CLASS_NAME}>
        <div className="graph-explorer-btn-group graph-explorer-btn-group-sm">
          {this.renderSaveDiagramButton()}
          {this.renderPersistAuthoredChangesButton()}
          {this.props.onClearAll ? (
            <button
              type="button"
              className={
                this.state.clearAllArmed
                  ? "graph-explorer-btn graph-explorer-btn-danger"
                  : "graph-explorer-btn graph-explorer-btn-default"
              }
              title={
                this.state.clearAllArmed
                  ? "Click again to confirm"
                  : "Clear All"
              }
              onClick={this.onClearAllClick}
              onBlur={() => this.setState({ clearAllArmed: false })}
            >
              <span className="fa fa-trash" aria-hidden="true" />
              &nbsp;{this.state.clearAllArmed ? "Are you sure?" : "Clear All"}
            </button>
          ) : null}
          <button
            type="button"
            className="graph-explorer-btn graph-explorer-btn-default"
            title="Force layout"
            onClick={this.props.onForceLayout}
          >
            <span className="fa fa-sitemap" aria-hidden="true" /> Layout
          </button>
          <button
            type="button"
            className="graph-explorer-btn graph-explorer-btn-default"
            title="Zoom In"
            onClick={this.props.onZoomIn}
          >
            <span className="fa fa-search-plus" aria-hidden="true" />
          </button>
          <button
            type="button"
            className="graph-explorer-btn graph-explorer-btn-default"
            title="Zoom Out"
            onClick={this.props.onZoomOut}
          >
            <span className="fa fa-search-minus" aria-hidden="true" />
          </button>
          <button
            type="button"
            className="graph-explorer-btn graph-explorer-btn-default"
            title="Fit to Screen"
            onClick={this.props.onZoomToFit}
          >
            <span className="fa fa-arrows-alt" aria-hidden="true" />
          </button>
          <button
            type="button"
            className="graph-explorer-btn graph-explorer-btn-default"
            title="Export diagram as PNG"
            onClick={this.onExportPNG}
          >
            <span className="fa fa-picture-o" aria-hidden="true" /> PNG
          </button>
          <button
            type="button"
            className="graph-explorer-btn graph-explorer-btn-default"
            title="Export diagram as SVG"
            onClick={this.onExportSVG}
          >
            <span className="fa fa-picture-o" aria-hidden="true" /> SVG
          </button>
          <button
            type="button"
            className="graph-explorer-btn graph-explorer-btn-default"
            title="Print diagram"
            onClick={this.props.onPrint}
          >
            <span className="fa fa-print" aria-hidden="true" />
          </button>
          {this.renderLanguages()}
        </div>
      </div>
    );
  }
}