"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.PresetModal = void 0;

var _preact = require("preact");

var _function = require("../utils/function");

var _object = require("../utils/object");

var _dialog = require("../dialog");

var _button = require("../button");

var _crate = require("../crate");

var _formFields = require("../form-fields");

var _question = require("../utils/question");

var _editableDescription = require("./editable-description");

class PresetModal extends _preact.Component {
  constructor(props) {
    super(props);
    this.doSave = this.doSave.bind(this);
    this.close = (0, _function.once)(() => props.onHide());
    this.switchMode = this.switchMode.bind(this);
    this.state = {
      name: props.name || '',
      originalName: props.name || '',
      editedMacro: JSON.parse(JSON.stringify(props.macro)),
      original: props.macro,
      mode: props.id ? 'update' : 'new',
      editing: false,
      status: null
    };
  }

  getMacroVariants() {
    return {
      original: this.state.original,
      toSave: (0, _object.nullIfEmpty)(this.state.editedMacro)
    };
  }

  switchMode(newMode) {
    this.setState({
      name: newMode === 'update' ? this.state.originalName : '',
      mode: newMode
    });
  }

  doSave() {
    const {
      toSave
    } = this.getMacroVariants();
    const {
      onCreate,
      onUpdate,
      id,
      ownerType,
      ownerId
    } = this.props;
    const {
      mode,
      name
    } = this.state;
    this.setState({
      status: 'saving'
    });
    return (mode === 'update' ? onUpdate({
      id,
      name,
      macro: toSave
    }) : onCreate({
      name,
      macro: toSave,
      ownerId,
      ownerType
    })).then(() => this.setState({
      status: 'saved'
    })).then(() => {
      setTimeout(this.close, 2000);
    });
  }

  render() {
    const {
      name,
      mode,
      editing,
      status,
      originalName
    } = this.state;
    const {
      otherPresetOwnerName,
      ownerType,
      showModeToggle
    } = this.props;
    const {
      original,
      toSave
    } = this.getMacroVariants();
    const isSaving = status === 'saving';
    const isSaved = status === 'saved';
    let errorMessage = null;

    if (editing) {
      errorMessage = 'Finish editing before saving.';
    } else {
      if (toSave && !name) {
        errorMessage = 'Must specify a preset name.';
      }

      if (!toSave) {
        errorMessage = 'Nothing has been selected to save.';
      }
    }

    const canSave = !errorMessage;
    return (0, _preact.h)(_dialog.Dialog, {
      "data-e2e": "presetModal",
      style: {
        width: '500px'
      },
      title: mode === 'new' ? "Save as preset" : 'Update preset',
      doClose: this.close,
      bottom: (0, _preact.h)("div", null, errorMessage && (0, _preact.h)("div", {
        "data-e2e": "errorMessage",
        className: "bg-orange pa2 br2 mb3"
      }, errorMessage), !isSaved && (0, _preact.h)(_button.Button, {
        "data-e2e": "savePreset",
        onClick: this.doSave,
        disabled: !canSave || isSaving,
        primary: true,
        large: true,
        className: "mr3"
      }, "Save"), !isSaved && (0, _preact.h)(_button.Button, {
        "data-e2e": "cancelSave",
        large: true,
        onClick: this.close
      }, "Cancel"), isSaved && (0, _preact.h)(_button.Button, {
        "data-e2e": "doneButton",
        primary: true,
        large: true,
        onClick: this.close
      }, "Done"))
    }, isSaving && (0, _preact.h)(_crate.MessagePageCrate, {
      "data-e2e": "savingMessage",
      noShadow: true,
      loading: true
    }, "Saving..."), isSaved && (0, _preact.h)(_crate.MessagePageCrate, {
      "data-e2e": "savedMessage",
      success: true
    }, "Saved!"), !isSaved && !isSaving && (0, _preact.h)("div", null, otherPresetOwnerName && (0, _preact.h)(_crate.MessagePageCrate, {
      warning: true,
      "data-e2e": "notOwner"
    }, (0, _preact.h)("span", {
      className: "f5"
    }, "You can save this preset on behalf of", ' ', (0, _preact.h)("strong", null, otherPresetOwnerName), ". However, it will be linked to, and owned by,", ' ', (0, _preact.h)("strong", null, otherPresetOwnerName, "'s "), "account and only they will be able to change it or delete it once you create it.")), ownerType === 'org' && (0, _preact.h)(_crate.MessagePageCrate, {
      info: true,
      "data-e2e": "orgPreset"
    }, (0, _preact.h)("span", {
      className: "f5"
    }, "This preset will be owned by the organization and made available to everyone.")), showModeToggle && (0, _preact.h)("div", null, (0, _preact.h)(_formFields.SelectButtons, {
      updateValue: this.switchMode,
      "data-e2e": "modeToggle",
      item: {
        name: 'mode',
        label: 'Update or save as new?',
        choices: [(0, _question.choice)('Update', 'update'), (0, _question.choice)('New', 'new')],
        value: mode,
        allowDeselect: false,
        isComplete: true
      }
    })), (0, _preact.h)("div", null, (0, _preact.h)(_formFields.InputField, {
      updateValue: val => this.setState({
        name: val
      }),
      item: {
        label: 'Preset Name',
        name: 'name',
        value: name,
        onInput: true,
        isComplete: !!name
      }
    })), mode === 'update' && (0, _preact.h)("p", null, "This will ", (0, _preact.h)("strong", null, "overwrite"), " the existing preset: \"", originalName, "\""), original && (0, _preact.h)(_editableDescription.EditableMacroDescription, {
      className: "mt2",
      macro: original,
      onChange: ({
        editing,
        macro
      }) => {
        this.setState({
          editing,
          editedMacro: macro
        });
      }
    })));
  }

}

exports.PresetModal = PresetModal;