import '@material/web/fab/fab.js';
import './components/List.js';
import './components/AddDialog.js';

import {css, html, LitElement} from 'lit';
import {createRef, ref} from 'lit/directives/ref.js';

import {SHARED_MD3_STYLES} from '../../common/styles/md3.js';
import {default as WorkflowsStorage, kWorkflowsDataKey} from '../workflowsStorage.js';

export default class WFApp extends LitElement {
  static styles = [
    SHARED_MD3_STYLES,
    css`
      :host {
        font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI',
            Helvetica, Arial, sans-serif, 'Apple Color Emoji',
            'Segoe UI Emoji', 'Segoe UI Symbol'!important;

        display: block;
        max-width: 1024px;
        margin: auto;
        position: relative;
      }

      md-fab {
        position: fixed;
        bottom: 2em;
        right: 2em;
      }
    `,
  ];

  addFabRef = createRef();

  constructor() {
    super();
    this._workflows = undefined;
    this._updateWorkflows();
    chrome.storage.onChanged.addListener((changes, areaName) => {
      if (areaName == 'local' && changes[kWorkflowsDataKey])
        this._updateWorkflows();
    });
  }

  render() {
    return html`
      <h1>Workflows</h1>
      <p>Workflows allow you to run a customized list of actions on a thread easily.</p>
      <wf-list .workflows=${this._workflows}></wf-list>
      <md-fab ${ref(this.addFabRef)}
          icon="add"
          @click=${this._showAddDialog}>
      </md-fab>
      <wf-add-dialog></wf-add-dialog>
    `;
  }

  _updateWorkflows() {
    WorkflowsStorage.getAll(/* asProtobuf = */ true).then(workflows => {
      this._workflows = workflows;
      this.requestUpdate();
    });
  }

  _showAddDialog() {
    this.renderRoot.querySelector('wf-add-dialog').open = true;
  }
}
window.customElements.define('wf-app', WFApp);