import _regeneratorRuntime from "@babel/runtime/regenerator";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState } from "react";
import SimpleDialog from "../SimpleDialog";
import { styled } from "@material-ui/core/styles";
import { setIn } from "seamless-immutable";
import Box from "@material-ui/core/Box";
import range from "lodash/range";
import TextField from "@material-ui/core/TextField";
import useDataset from "../../hooks/use-dataset";
var ErrorBox = styled("pre")({
  color: "red",
  whiteSpace: "prewrap",
  fontSize: 11
});
export default (function (_ref) {
  var open = _ref.open,
      onClose = _ref.onClose;

  var _useState = useState(""),
      _useState2 = _slicedToArray(_useState, 2),
      errors = _useState2[0],
      setErrors = _useState2[1];

  var _useState3 = useState("2"),
      _useState4 = _slicedToArray(_useState3, 2),
      rows = _useState4[0],
      setRows = _useState4[1];

  var _useState5 = useState("2"),
      _useState6 = _slicedToArray(_useState5, 2),
      columns = _useState6[0],
      setColumns = _useState6[1];

  var _useDataset = useDataset(),
      _useDataset2 = _slicedToArray(_useDataset, 2),
      dataset = _useDataset2[0],
      setDataset = _useDataset2[1];

  return /*#__PURE__*/React.createElement(SimpleDialog, {
    open: open,
    onClose: onClose,
    title: "Convert Image Samples into Segments",
    actions: [{
      text: "Convert Image Samples into Segments",
      onClick: function () {
        var _onClick = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
          var _ref2, nRows, nCols;

          return _regeneratorRuntime.wrap(function _callee$(_context) {
            while (1) {
              switch (_context.prev = _context.next) {
                case 0:
                  _ref2 = [parseInt(rows), parseInt(columns)], nRows = _ref2[0], nCols = _ref2[1];

                  try {
                    setDataset(setIn(dataset, ["samples"], range(nRows).flatMap(function (y) {
                      return range(nCols).flatMap(function (x) {
                        return dataset.samples.map(function (s) {
                          return setIn(s, ["allowedArea"], {
                            x: x / nCols,
                            y: y / nRows,
                            width: 1 / nCols,
                            height: 1 / nRows
                          });
                        });
                      });
                    })));
                    onClose();
                  } catch (e) {
                    setErrors(e.toString());
                  }

                case 2:
                case "end":
                  return _context.stop();
              }
            }
          }, _callee);
        }));

        function onClick() {
          return _onClick.apply(this, arguments);
        }

        return onClick;
      }()
    }]
  }, "This transformation will multiply the number of image samples you have, splitting each individual image into segments. The image is not processed and clipped, but rather an \"allowedArea\" property is placed on the sample which limits the labeling to a section of the image. This is useful when trying to reduce the amount of work per image sample.", /*#__PURE__*/React.createElement(Box, {
    padding: 4
  }, /*#__PURE__*/React.createElement(TextField, {
    label: "Rows",
    value: rows,
    onChange: function onChange(e) {
      return setRows(e.target.value);
    }
  }), /*#__PURE__*/React.createElement(TextField, {
    label: "Columns",
    value: columns,
    onChange: function onChange(e) {
      return setColumns(e.target.value);
    }
  })), errors && /*#__PURE__*/React.createElement(ErrorBox, null, errors));
});