import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useRef, useState } from "react";
import * as colors from "@material-ui/core/colors";
import { styled } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import AddCircleIcon from "@material-ui/icons/AddCircle";
import CancelIcon from "@material-ui/icons/Cancel";
import TextField from "@material-ui/core/TextField";
import Survey from "material-survey/components/Survey";
import Grid from "@material-ui/core/Grid";
import { setIn } from "seamless-immutable";
import { useTranslation } from "react-i18next";
var ButtonsContainer = styled("div")({
  textAlign: "right"
});
var NoQuestions = styled("div")({
  fontSize: 18,
  color: colors.grey[500],
  fontWeight: "bold",
  textAlign: "center",
  padding: 16
});
var Question = styled("div")({
  position: "relative",
  padding: 16,
  margin: 16,
  borderLeft: "4px solid ".concat(colors.blue[400]),
  // backgroundColor: colors.grey[50],
  borderRadius: 4,
  paddingRight: 64,
  "& .quitButton": {
    position: "absolute",
    right: 4,
    top: 4
  },
  "& > *": {
    margin: 8
  }
});
var PreviewHeader = styled("div")({
  fontSize: 12,
  fontWeight: "bold",
  color: colors.grey[600],
  textTransform: "uppercase",
  margin: 16,
  marginBottom: 32
});
var StyledButton = styled(Button)({
  position: "relative",
  "& .icon": {
    marginRight: 8,
    opacity: 0.7
  }
});
export default (function (_ref) {
  var iface = _ref.iface,
      _onChange = _ref.onChange;
  var anchorEl = useRef();

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      menuOpen = _useState2[0],
      changeMenuOpen = _useState2[1];

  var _ref2 = iface.surveyjs || {},
      _ref2$questions = _ref2.questions,
      questions = _ref2$questions === void 0 ? [] : _ref2$questions;

  var _useTranslation = useTranslation(),
      t = _useTranslation.t;

  return /*#__PURE__*/React.createElement("div", null, questions.length === 0 ? /*#__PURE__*/React.createElement(NoQuestions, null, "No Inputs, Click Add Input Below") : questions.map(function (q, i) {
    return /*#__PURE__*/React.createElement(Question, {
      key: i
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        display: "flex"
      }
    }, /*#__PURE__*/React.createElement(TextField, {
      variant: "outlined",
      label: "Name / Identifier",
      value: q.name || "",
      onChange: function onChange(e) {
        _onChange(setIn(iface, ["surveyjs", "questions", i, "name"], e.target.value));
      }
    }), /*#__PURE__*/React.createElement(TextField, {
      style: {
        marginLeft: 8,
        flexGrow: 1
      },
      variant: "outlined",
      label: "Title / Instruction",
      value: q.title || "",
      onChange: function onChange(e) {
        _onChange(setIn(iface, ["surveyjs", "questions", i, "title"], e.target.value));
      }
    })), /*#__PURE__*/React.createElement(Grid, {
      container: true
    }, /*#__PURE__*/React.createElement(Grid, {
      item: true,
      xs: 6
    }, q.choices && /*#__PURE__*/React.createElement(TextField, {
      style: {
        marginTop: 8,
        paddingRight: 8,
        boxSizing: "border-box"
      },
      variant: "outlined",
      fullWidth: true,
      label: "Choices (One per Line)",
      defaultValue: q.choices.join("\n") || "",
      onChange: function onChange(e) {
        _onChange(setIn(iface, ["surveyjs", "questions", i, "choices"], e.target.value.split("\n")));
      },
      multiline: true,
      rows: 6
    })), /*#__PURE__*/React.createElement(Grid, {
      item: true,
      xs: 6
    }, /*#__PURE__*/React.createElement(PreviewHeader, null, "Preview"), /*#__PURE__*/React.createElement(Survey, {
      noActions: true,
      variant: "flat",
      key: q,
      form: {
        questions: [q]
      }
    }))), /*#__PURE__*/React.createElement(IconButton, {
      className: "quitButton",
      onClick: function onClick() {
        _onChange(setIn(iface, ["surveyjs", "questions"], [].concat(_toConsumableArray(questions.slice(0, i)), _toConsumableArray(questions.slice(i + 1)))));
      }
    }, /*#__PURE__*/React.createElement(CancelIcon, null)));
  }), /*#__PURE__*/React.createElement(ButtonsContainer, null, /*#__PURE__*/React.createElement(StyledButton, {
    onClick: function onClick(e) {
      return changeMenuOpen(true);
    },
    ref: anchorEl
  }, /*#__PURE__*/React.createElement(AddCircleIcon, {
    className: "icon"
  }), t("add-input"))), /*#__PURE__*/React.createElement(Menu, {
    anchorEl: anchorEl && anchorEl.current,
    open: menuOpen,
    onClose: function onClose() {
      return changeMenuOpen(false);
    }
  }, /*#__PURE__*/React.createElement(MenuItem, {
    onClick: function onClick() {
      changeMenuOpen(false);

      _onChange(setIn(iface, ["surveyjs", "questions"], ((iface.surveyjs || {}).questions || []).concat([{
        name: "input" + questions.length,
        type: "text",
        title: "New Text Input"
      }])));
    }
  }, t("text-input")), /*#__PURE__*/React.createElement(MenuItem, {
    onClick: function onClick() {
      changeMenuOpen(false);

      _onChange(setIn(iface, ["surveyjs", "questions"], (iface.surveyjs.questions || []).concat({
        name: "input" + questions.length,
        type: "radiogroup",
        title: "New Exclusive Choice Input",
        choices: ["Yes", "Maybe", "No"]
      })));
    }
  }, t("exclusive-choice")), /*#__PURE__*/React.createElement(MenuItem, {
    onClick: function onClick() {
      changeMenuOpen(false);

      _onChange(setIn(iface, ["surveyjs", "questions"], (iface.surveyjs.questions || []).concat({
        name: "input" + questions.length,
        type: "checkbox",
        title: "New Checkbox Input",
        choices: ["A", "B", "C"]
      })));
    }
  }, "Checkboxes"), /*#__PURE__*/React.createElement(MenuItem, {
    onClick: function onClick() {
      changeMenuOpen(false);

      _onChange(setIn(iface, ["surveyjs", "questions"], iface.surveyjs.questions.concat({
        name: "input" + questions.length,
        type: "boolean",
        title: "New Boolean Input"
      })));
    }
  }, "Boolean"), /*#__PURE__*/React.createElement(MenuItem, {
    onClick: function onClick() {
      changeMenuOpen(false);

      _onChange(setIn(iface, ["surveyjs", "questions"], (iface.questions || []).concat({
        name: "input" + questions.length,
        type: "dropdown",
        title: "New Dropdown Input",
        choices: ["A", "B", "C"]
      })));
    }
  }, t("drop-down-autocomplete")), /*#__PURE__*/React.createElement(MenuItem, {
    onClick: function onClick() {
      changeMenuOpen(false);

      _onChange(setIn(iface, ["surveyjs", "questions"], iface.surveyjs.questions.concat([{
        name: "input" + questions.length,
        type: "multiple-dropdown",
        title: "New Multiple Dropdown Input",
        choices: ["A", "B", "C"]
      }])));
    }
  }, t("multiple-item-dropdown-autocomplete"))));
});