import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import React, { useMemo } from "react";
import Survey from "material-survey/components/Survey";
import { asMutable } from "seamless-immutable";
var form = {
  questions: [{
    name: "enabledTools",
    title: "Enabled Tools",
    type: "multiple-dropdown",
    choices: ["create-durations", "label-durations", "create-timestamps", "label-timestamps"]
  }, {
    name: "timeFormat",
    title: "Time Format",
    type: "dropdown",
    choices: ["dates", "none", "duration"]
  }, {
    name: "allowCustomLabels",
    title: "Allow Custom Labels",
    type: "boolean"
  }, {
    name: "durationLabels",
    title: "Duration Labels",
    type: "matrixdynamic",
    columns: [{
      cellType: "text",
      name: "id",
      title: "id"
    }]
  }, {
    name: "timestampLabels",
    title: "Timestamp Labels",
    type: "matrixdynamic",
    columns: [{
      cellType: "text",
      name: "id",
      title: "id"
    }]
  }, {
    name: "graphs",
    title: "Graphs",
    type: "matrixdynamic",
    columns: [{
      cellType: "text",
      name: "keyName",
      title: "Key Name"
    }, {
      cellType: "text",
      name: "row",
      title: "Row (optional)"
    }, {
      cellType: "text",
      name: "color",
      title: "Color (optional)"
    }]
  }]
};
export default (function (_ref) {
  var iface = _ref.iface,
      onChange = _ref.onChange;
  var defaultAnswers = useMemo(function () {
    return asMutable(_objectSpread(_objectSpread({}, iface), {}, {
      durationLabels: (iface.durationLabels || []).map(function (a) {
        return {
          id: a
        };
      }),
      timestampLabels: (iface.timestampLabels || []).map(function (a) {
        return {
          id: a
        };
      }),
      graphs: (iface.graphs || []).map(function (a) {
        return _objectSpread(_objectSpread({}, a), a.row !== null && a.row !== undefined ? {
          row: a.row.toString()
        } : {});
      })
    }), {
      deep: true
    });
  }, [iface]);
  return /*#__PURE__*/React.createElement(Survey, {
    noActions: true,
    variant: "flat",
    onQuestionChange: function onQuestionChange(questionId, newValue, answers) {
      if (questionId === "durationLabels" || questionId === "timestampLabels") {
        if (newValue.length === 0) {
          newValue = undefined;
        } else {
          newValue = newValue.map(function (a) {
            return a.id;
          });
        }
      }

      if (questionId === "graphs") {
        newValue = newValue.map(function (graphRow) {
          return _objectSpread(_objectSpread({}, graphRow), {}, {
            row: graphRow.row ? parseInt(graphRow.row) : undefined
          });
        });
      }

      if (newValue.value) {
        onChange(_objectSpread(_objectSpread({}, iface), {}, _defineProperty({}, questionId, newValue.value)));
      } else {
        onChange(_objectSpread(_objectSpread({}, iface), {}, _defineProperty({}, questionId, newValue)));
      }
    },
    form: form,
    defaultAnswers: defaultAnswers
  });
});