import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState } from "react";
import getTaskDescription from "../../utils/get-task-description.js";
import SampleContainer from "../SampleContainer";
import UniversalSampleEditor from "../UniversalSampleEditor";
import Button from "@material-ui/core/Button";
import * as colors from "@material-ui/core/colors";
import { styled } from "@material-ui/core/styles";
import InterfaceIcon from "../InterfaceIcon";
import KeyboardArrowRightIcon from "@material-ui/icons/KeyboardArrowRight";
import Checkbox from "@material-ui/core/Checkbox";
import Box from "@material-ui/core/Box";
import { useTranslation } from "react-i18next";
var Title = styled("div")({
  fontSize: 18,
  fontWeight: "bold",
  color: colors.grey[700],
  borderBottom: "1px solid ".concat(colors.grey[300]),
  paddingBottom: 8,
  marginBottom: 8,
  paddingLeft: 8
});
var StyledButton = styled(Button)({
  display: "flex",
  textAlign: "left",
  justifyContent: "flex-start",
  marginTop: 8
});
export var Composite = function Composite(_ref) {
  var sample = _ref.sample,
      iface = _ref.interface,
      _onModifySample = _ref.onModifySample,
      containerProps = _ref.containerProps,
      sampleIndex = _ref.sampleIndex;
  var fields = iface.fields;

  var _useState = useState(),
      _useState2 = _slicedToArray(_useState, 2),
      selectedField = _useState2[0],
      changeSelectedField = _useState2[1];

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

  if (!fields) throw new Error("No fields defined. Try adding a field in Setup");

  if (selectedField) {
    return /*#__PURE__*/React.createElement(UniversalSampleEditor, {
      interface: selectedField.interface,
      sample: _objectSpread(_objectSpread({}, sample), {}, {
        annotation: (sample.annotation || {})[selectedField.fieldName]
      }),
      onExit: function onExit() {
        return changeSelectedField(null);
      },
      onModifySample: function onModifySample(output) {
        _onModifySample(_objectSpread(_objectSpread({}, sample), {}, {
          annotation: _objectSpread(_objectSpread({}, sample.annotation), {}, _defineProperty({}, selectedField.fieldName, output))
        }));

        changeSelectedField(null);
      }
    });
  }

  return /*#__PURE__*/React.createElement(SampleContainer, Object.assign({}, containerProps, {
    currentSampleIndex: sampleIndex,
    description: getTaskDescription(sample) || iface.description
  }), /*#__PURE__*/React.createElement(Title, null, "Fields"), fields.map(function (field, index) {
    return /*#__PURE__*/React.createElement(StyledButton, {
      key: field.fieldName,
      onClick: function onClick() {
        changeSelectedField(_objectSpread(_objectSpread({}, field), {}, {
          index: index
        }));
      },
      fullWidth: true,
      variant: "outlined"
    }, /*#__PURE__*/React.createElement(InterfaceIcon, {
      style: {
        color: colors.grey[500],
        marginRight: 16
      },
      type: field.interface.type
    }), field.fieldName, /*#__PURE__*/React.createElement(Box, {
      flexGrow: 1
    }), /*#__PURE__*/React.createElement(Checkbox, {
      checked: Boolean((sample.annotation || {})[field.fieldName])
    }), /*#__PURE__*/React.createElement(KeyboardArrowRightIcon, null));
  }), /*#__PURE__*/React.createElement(StyledButton, {
    onClick: function onClick() {
      return containerProps.onExit("go-to-next");
    },
    fullWidth: true,
    variant: "outlined"
  }, /*#__PURE__*/React.createElement(KeyboardArrowRightIcon, {
    style: {
      color: colors.grey[500],
      marginRight: 16
    }
  }), t("next"), /*#__PURE__*/React.createElement(Box, {
    flexGrow: 1
  }), /*#__PURE__*/React.createElement(Box, {
    height: "42px"
  }), /*#__PURE__*/React.createElement(KeyboardArrowRightIcon, null)));
};
export default Composite;