import { WebDirective } from './../../types';
import { WebApplication } from '@/application';
import { SNComponent, SNItem, ComponentArea } from 'snjs';
import { isDesktopApplication } from '@/utils';
import template from '%/directives/editor-menu.pug';
import { PureCtrl } from '@Controllers/abstract/pure_ctrl';
import { ComponentMutator } from '@/../../../../snjs/dist/@types/models';

interface EditorMenuScope {
  callback: (component: SNComponent) => void
  selectedEditor: SNComponent
  currentItem: SNItem
  application: WebApplication
}

class EditorMenuCtrl extends PureCtrl implements EditorMenuScope {

  callback!: (component: SNComponent) => void
  selectedEditor!: SNComponent
  currentItem!: SNItem
  application!: WebApplication

  /* @ngInject */
  constructor(
    $timeout: ng.ITimeoutService,
  ) {
    super($timeout);
    this.state = {
      isDesktop: isDesktopApplication()
    };
  }

  $onInit() {
    super.$onInit();
    const editors = this.application.componentManager!.componentsForArea(ComponentArea.Editor)
      .sort((a, b) => {
        return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
      });
    const defaultEditor = editors.filter((e) => e.isDefaultEditor())[0];
    this.setState({
      editors: editors,
      defaultEditor: defaultEditor
    });
  };

  selectComponent(component: SNComponent) {
    if (component) {
      if (component.conflictOf) {
        this.application.changeAndSaveItem(component.uuid, (mutator) => {
          mutator.conflictOf = undefined;
        })
      }
    }
    this.$timeout(() => {
      this.callback(component);
    });
  }

  toggleDefaultForEditor(editor: SNComponent) {
    if (this.state.defaultEditor === editor) {
      this.removeEditorDefault(editor);
    } else {
      this.makeEditorDefault(editor);
    }
  }

  offlineAvailableForComponent(component: SNComponent) {
    return component.local_url && this.state.isDesktop;
  }

  makeEditorDefault(component: SNComponent) {
    const currentDefault = this.application.componentManager!
      .componentsForArea(ComponentArea.Editor)
      .filter((e) => e.isDefaultEditor())[0];
    if (currentDefault) {
      this.application.changeItem(currentDefault.uuid, (m) => {
        const mutator = m as ComponentMutator;
        mutator.defaultEditor = false;
      })
    }
    this.application.changeAndSaveItem(component.uuid, (m) => {
      const mutator = m as ComponentMutator;
      mutator.defaultEditor = true;
    });
    this.setState({
      defaultEditor: component
    });
  }

  removeEditorDefault(component: SNComponent) {
    this.application.changeAndSaveItem(component.uuid, (m) => {
      const mutator = m as ComponentMutator;
      mutator.defaultEditor = false;
    });
    this.setState({
      defaultEditor: null
    });
  }
}

export class EditorMenu extends WebDirective {
  constructor() {
    super();
    this.restrict = 'E';
    this.template = template;
    this.controller = EditorMenuCtrl;
    this.controllerAs = 'self';
    this.bindToController = true;
    this.scope = {
      callback: '&',
      selectedEditor: '=',
      currentItem: '=',
      application: '='
    };
  }
}