import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState, 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 regionTypeToTool = {
  "bounding-box": "create-box",
  polygon: ["create-polygon", "create-expanding-line"],
  point: "create-point",
  "allowed-area": "modify-allowed-area"
};
var Container = styled("div")({
  "& .fullscreen": {
    height: "100%"
  }
});
var emptyObj = {};
export default (function (_ref) {
  var sampleIndex = _ref.sampleIndex,
      iface = _ref.interface,
      sample = _ref.sample,
      _ref$containerProps = _ref.containerProps,
      containerProps = _ref$containerProps === void 0 ? emptyObj : _ref$containerProps,
      onModifySample = _ref.onModifySample;

  var _useState = useState(true),
      _useState2 = _slicedToArray(_useState, 2),
      showTags = _useState2[0],
      changeShowTags = _useState2[1];

  var _useState3 = useState("select"),
      _useState4 = _slicedToArray(_useState3, 2),
      selectedTool = _useState4[0],
      changeSelectedTool = _useState4[1];

  var _iface$regionTypesAll = iface.regionTypesAllowed,
      regionTypesAllowed = _iface$regionTypesAll === void 0 ? ["bounding-box"] : _iface$regionTypesAll;
  var isClassification = !Boolean(iface === null || iface === void 0 ? void 0 : iface.multipleRegionLabels);
  var isPixel = (iface === null || iface === void 0 ? void 0 : iface.type) === "image_pixel_segmentation";
  var saveCurrentIndexAnnotation = useEventCallback(function (output) {
    var img = output.images[0];
    var annotation = multipleRegions ? (img.regions || []).map(convertFromRIARegionFmt) : convertToRIAImageFmt((img.regions || [])[0]);

    var _ref2 = output.allowedArea || {},
        x = _ref2.x,
        y = _ref2.y,
        width = _ref2.w,
        height = _ref2.h;

    onModifySample(_objectSpread(_objectSpread({}, sample), {}, {
      annotation: annotation
    }, output.allowedArea ? {
      allowedArea: {
        x: x,
        y: y,
        width: width,
        height: height
      }
    } : {}));
  });
  var labelProps = useMemo(function () {
    return isPixel ? {
      regionClsList: ["background"].concat(iface.labels || []).map(function (l) {
        return typeof l === "string" ? l : l.id;
      })
    } : isClassification ? {
      regionClsList: (iface.labels || []).map(function (l) {
        return typeof l === "string" ? l : l.id;
      })
    } : {
      regionTagList: (iface.labels || []).map(function (l) {
        return typeof l === "string" ? l : l.id;
      })
    };
  }, [isClassification, iface.labels, isPixel]);
  var multipleRegions = iface.multipleRegions || iface.multipleRegions === undefined;
  var onExit = useEventCallback(function (output, nextAction) {
    saveCurrentIndexAnnotation(output);
    changeShowTags(output.showTags);
    changeSelectedTool(output.selectedTool);
    containerProps.onExit(nextAction);
  });
  var onNextImage = useEventCallback(function (output) {
    return onExit(output, "go-to-next");
  });
  var onPrevImage = useEventCallback(function (output) {
    return onExit(output, "go-to-previous");
  });
  var singleImageList = useMemo(function () {
    return [convertToRIAImageFmt({
      title: containerProps.title || "Sample ".concat(sampleIndex),
      taskDatum: sample,
      output: sample.annotation,
      selectedIndex: sampleIndex
    })]; // eslint-disable-next-line
  }, [sampleIndex, containerProps.title]);
  var enabledTools = iface.type === "image_pixel_segmentation" ? undefined : useMemo(function () {
    return ["select"].concat(regionTypesAllowed.flatMap(function (rt) {
      return regionTypeToTool[rt];
    }).filter(Boolean));
  }, [regionTypesAllowed]);
  var allowedArea = useMemo(function () {
    if (!iface.allowedArea && !(sample === null || sample === void 0 ? void 0 : sample.allowedArea)) return undefined;

    var _ref3 = (sample === null || sample === void 0 ? void 0 : sample.allowedArea) || (iface === null || iface === void 0 ? void 0 : iface.allowedArea),
        x = _ref3.x,
        y = _ref3.y,
        w = _ref3.width,
        h = _ref3.height;

    return {
      x: x,
      y: y,
      w: w,
      h: h
    }; // eslint-disable-next-line
  }, [iface.allowedArea, sample === null || sample === void 0 ? void 0 : sample.allowedArea]);
  return /*#__PURE__*/React.createElement(Container, {
    style: {
      height: containerProps.height || "calc(100% - 70px)",
      minHeight: 600,
      width: "100%"
    }
  }, /*#__PURE__*/React.createElement(Annotator, Object.assign({
    key: sampleIndex,
    fullImageSegmentationMode: isPixel,
    selectedImage: 0,
    taskDescription: iface.description,
    showTags: showTags
  }, labelProps, {
    autoSegmentationOptions: iface.autoSegmentationEngine,
    allowedArea: allowedArea,
    onNextImage: onNextImage,
    onPrevImage: onPrevImage,
    enabledTools: enabledTools,
    selectedTool: selectedTool,
    images: singleImageList,
    onExit: onExit
  })));
});