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, useEffect } from "react";
import { styled } from "@material-ui/core/styles";
import * as colors from "@material-ui/core/colors";
import SimpleDialog from "../SimpleDialog";
import CreatableSelect from "react-select/creatable";
import FormGroup from "@material-ui/core/FormGroup";
import Box from "@material-ui/core/Box";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";
import { setIn } from "seamless-immutable";
var Image = styled("img")({
  width: 100,
  height: 100,
  margin: 8
});
var TermsOfUse = styled("div")({
  padding: 16,
  margin: 16,
  backgroundColor: colors.green[200],
  "& a": {
    color: colors.blue[600]
  }
});
export var ImportFromCOCODialog = function ImportFromCOCODialog(_ref) {
  var open = _ref.open,
      onClose = _ref.onClose,
      onChangeDataset = _ref.onChangeDataset,
      dataset = _ref.dataset;

  var _useState = useState([]),
      _useState2 = _slicedToArray(_useState, 2),
      labelsSelected = _useState2[0],
      setLabelsSelected = _useState2[1];

  var _useState3 = useState(),
      _useState4 = _slicedToArray(_useState3, 2),
      exclusive = _useState4[0],
      setExclusive = _useState4[1];

  var _useState5 = useState(),
      _useState6 = _slicedToArray(_useState5, 2),
      shouldReplaceInterface = _useState6[0],
      setShouldReplaceInterface = _useState6[1];

  var _useState7 = useState(null),
      _useState8 = _slicedToArray(_useState7, 2),
      importedDataset = _useState8[0],
      setImportedDataset = _useState8[1];

  useEffect(function () {
    if (labelsSelected.length === 0) return;

    function loadSamples() {
      return _loadSamples.apply(this, arguments);
    }

    function _loadSamples() {
      _loadSamples = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
        var ds;
        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                _context.next = 2;
                return fetch("https://coco.universaldatatool.com/api/captions?labels=".concat(encodeURIComponent(labelsSelected.join(","))).concat(exclusive ? "&exclusive" : "")).then(function (r) {
                  return r.json();
                });

              case 2:
                ds = _context.sent;
                setImportedDataset(ds);

              case 4:
              case "end":
                return _context.stop();
            }
          }
        }, _callee);
      }));
      return _loadSamples.apply(this, arguments);
    }

    loadSamples();
  }, [exclusive, labelsSelected]);
  return /*#__PURE__*/React.createElement(SimpleDialog, {
    open: open,
    title: "Import from COCO",
    onClose: onClose,
    actions: [(importedDataset === null || importedDataset === void 0 ? void 0 : importedDataset.samples.length) > 0 && {
      text: "Add Samples",
      disabled: !importedDataset,
      onClick: function onClick() {
        onChangeDataset(setIn(dataset, ["samples"], dataset.samples.concat(importedDataset.samples)).setIn(["interface"], importedDataset.interface));
        onClose();
      }
    }].filter(Boolean)
  }, /*#__PURE__*/React.createElement(TermsOfUse, null, "By clicking \"Add Samples\" you understand that these images are from the", " ", /*#__PURE__*/React.createElement("a", {
    href: "https://cocodataset.org"
  }, "Common Objects in Context dataset"), " ", "and you must abide by", " ", /*#__PURE__*/React.createElement("a", {
    href: "https://cocodataset.org/#termsofuse"
  }, "their terms of use"), "."), /*#__PURE__*/React.createElement(CreatableSelect, {
    isMulti: true,
    onChange: function onChange(labels) {
      setLabelsSelected((labels || []).map(function (l) {
        return l.value;
      }));
    },
    options: []
  }), /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(FormControlLabel, {
    control: /*#__PURE__*/React.createElement(Checkbox, {
      checked: exclusive,
      onChange: function onChange(e, checked) {
        return setExclusive(checked);
      }
    }),
    label: "Exclusive (Single Classification)"
  }), /*#__PURE__*/React.createElement(FormControlLabel, {
    control: /*#__PURE__*/React.createElement(Checkbox, {
      checked: shouldReplaceInterface,
      onChange: function onChange(e, checked) {
        return setShouldReplaceInterface(checked);
      }
    }),
    label: "Replace Interface?"
  })), /*#__PURE__*/React.createElement(Box, {
    padding: 2,
    minHeight: "400px"
  }, ((importedDataset === null || importedDataset === void 0 ? void 0 : importedDataset.samples) || []).slice(0, 9).map(function (s) {
    return /*#__PURE__*/React.createElement(Image, {
      src: s.imageUrl
    });
  })));
};
export default ImportFromCOCODialog;