"use strict";

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

var _preact = require("preact");

var _editing = require("./editing");

var _description = require("./description");

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

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

class EditableMacroDescription extends _preact.Component {
  constructor(props) {
    super(props);
    this.toggleEditing = this.toggleEditing.bind(this);
    this.state = {
      editing: false,
      skipped: [],
      originalMacro: props.macro,
      modifiedMacro: props.macro,
      inProgressMacro: null,
      inProgressSkipped: null
    };
  }

  toggleEditing() {
    const {
      editing,
      inProgressMacro,
      inProgressSkipped
    } = this.state;
    const update = {
      editing: !editing
    };
    let macroToReport = null;

    if (editing) {
      update.inProgressMacro = null;
      update.inProgressSkipped = [];
      update.modifiedMacro = inProgressMacro;
      update.skipped = inProgressSkipped;
      macroToReport = inProgressMacro;
    }

    this.setState(update, () => {
      if (this.props.onChange) {
        const update = {
          editing: !editing
        };

        if (macroToReport) {
          update.macro = macroToReport;
        }

        this.props.onChange(update);
      }
    });
  }

  render() {
    const rest = (0, _object.omit)(this.props, ['macro', 'onChange']);
    const {
      editing,
      originalMacro,
      modifiedMacro,
      skipped
    } = this.state;
    let contents;

    if (editing) {
      contents = (0, _preact.h)("div", {
        className: "pa2 bg-light-blue b--gray br2"
      }, (0, _preact.h)("h4", {
        className: "mt0"
      }, "Editing preset"), (0, _preact.h)("p", {
        className: "mt0"
      }, "Deselect anything you don't want to include."), (0, _preact.h)(_editing.MacroSelectable, {
        buttons: (0, _preact.h)(_button.Button, {
          "data-e2e": "doneEditing",
          onClick: this.toggleEditing,
          className: "mr2"
        }, "Done Editing"),
        onChange: (macro, skipped) => {
          this.setState({
            inProgressMacro: macro,
            inProgressSkipped: skipped
          });
        },
        macro: originalMacro,
        skipped: skipped
      }));
    } else {
      contents = (0, _preact.h)("div", {
        className: "bg-lightest-blue pa2 br2"
      }, (0, _preact.h)("h4", {
        className: "mt0"
      }, "Preset Summary"), (0, _preact.h)("p", null, "Click \"Edit\" to select only the answers you want to include."), (0, _preact.h)(_button.IconButton, {
        "data-e2e": "editPreset",
        icon: "edit",
        className: "mb3",
        onClick: this.toggleEditing
      }, "Edit"), (0, _preact.h)(_description.MacroDescription, {
        "data-e2e": "macroDescription",
        macro: modifiedMacro
      }));
    }

    return (0, _preact.h)("div", rest, contents);
  }

}

exports.EditableMacroDescription = EditableMacroDescription;