import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import React, { useMemo } from "react";
import Annotator from "react-image-annotate";
import { styled } from "@material-ui/core/styles";
import useEventCallback from "use-event-callback";
import { convertFromRIARegionFmt, convertToRIAImageFmt } from "../../utils/ria-format.js";
var Container = styled("div")({
  "& .fullscreen": {
    height: "100%"
  }
});
var emptyObj = {};
var posingTools = ["create-keypoints"];
export default (function (_ref) {
  var globalSampleIndex = _ref.sampleIndex,
      iface = _ref.interface,
      sampleIndex = _ref.sampleIndex,
      sample = _ref.sample,
      _ref$containerProps = _ref.containerProps,
      containerProps = _ref$containerProps === void 0 ? emptyObj : _ref$containerProps,
      onModifySample = _ref.onModifySample;
  var saveCurrentIndexAnnotation = useEventCallback(function (output) {
    var img = output.images[0];
    var annotation = (img.regions || []).map(convertFromRIARegionFmt);
    onModifySample(_objectSpread(_objectSpread({}, sample), {}, {
      annotation: annotation
    }));
  });
  var onExit = useEventCallback(function (output, nextAction) {
    saveCurrentIndexAnnotation(output);
    if (containerProps.onExit) containerProps.onExit(nextAction);
  });
  var onNextImage = useEventCallback(function (output) {
    saveCurrentIndexAnnotation(output);
    onExit(output, "go-to-next");
  });
  var onPrevImage = useEventCallback(function (output) {
    saveCurrentIndexAnnotation(output);
    onExit(output, "go-to-previous");
  });
  var singleImageList = useMemo(function () {
    if (!sample) return [];
    return [convertToRIAImageFmt({
      title: containerProps.title || "Sample ".concat(sampleIndex),
      taskDatum: sample,
      output: sample === null || sample === void 0 ? void 0 : sample.annotation
    })]; // eslint-disable-next-line
  }, [sampleIndex, containerProps.title]);
  return /*#__PURE__*/React.createElement(Container, {
    style: {
      height: containerProps.height || "calc(100% - 70px)",
      minHeight: 600,
      width: "100%"
    }
  }, !sample ? "loading..." : /*#__PURE__*/React.createElement(Annotator, {
    key: sampleIndex,
    keypointDefinitions: iface.keypointDefinitions,
    selectedImage: 0,
    taskDescription: iface.description,
    onNextImage: onNextImage,
    onPrevImage: onPrevImage,
    enabledTools: posingTools,
    images: singleImageList,
    onExit: onExit
  }));
});