import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React from "react";
import SimpleDialog from "../SimpleDialog";
import Box from "@material-ui/core/Box";
import ArrowForwardIcon from "@material-ui/icons/ArrowForward";
import * as colors from "@material-ui/core/colors";
import { styled } from "@material-ui/core/styles";
import ExpansionPanel from "@material-ui/core/ExpansionPanel";
import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
import immutable from "seamless-immutable";
import { useTranslation } from "react-i18next";
import useDataset from "../../hooks/use-dataset";
var Code = styled("pre")({
  fontSize: 8
});
var StyledExpansionPanel = styled(ExpansionPanel)({
  backgroundColor: colors.grey[100],
  border: "1px solid ".concat(colors.grey[500]),
  marginTop: 16,
  marginBottom: 16
});
var StyledExpansionPanelSummary = styled(ExpansionPanelSummary)({
  fontWeight: "bold"
});
export default (function (_ref) {
  var open = _ref.open,
      onClose = _ref.onClose;

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

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

  return /*#__PURE__*/React.createElement(SimpleDialog, {
    open: open,
    onClose: onClose,
    title: "Transform Video Keyframes",
    actions: [{
      text: "Transform Video Keyframes",
      disabled: !dataset.samples,
      onClick: function onClick() {
        var samples = dataset.samples.flatMap(function (item, index) {
          if (!item.videoUrl) return {
            data: item,
            output: item.annotation
          };

          if (item.videoUrl && !item.videoFrameAt) {
            if (!item.annotation) return [];
            if (!item.annotation.keyframes) return [];
            var keyframes = item[index].annotation.keyframes;
            return Object.keys(keyframes).map(function (kf) {
              return {
                videoUrl: item.videoUrl,
                videoFrameAt: parseInt(kf),
                annotation: keyframes[kf].regions || []
              };
            });
          }
        });
        setDataset(immutable(dataset).setIn(["samples"], samples.map(function (s) {
          return s.data;
        })).setIn(["interface", "type"], "image_segmentation"));
      }
    }]
  }, t("transform-video-keyframes-dialog-explanation-text"), !dataset.samples && /*#__PURE__*/React.createElement("b", null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), t("transform-video-keyframes-dialog-explanation-warning")), /*#__PURE__*/React.createElement(StyledExpansionPanel, null, /*#__PURE__*/React.createElement(StyledExpansionPanelSummary, null, "Details"), /*#__PURE__*/React.createElement(ExpansionPanelDetails, null, /*#__PURE__*/React.createElement(Box, {
    display: "flex"
  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Code, null, "{\n  \"interface\": { \"type\": \"video_segmentation\" },\n  samples: [\n    {\n      videoUrl: \"https://example.com/video1.mp4\"\n    }\n  ],\n  taskOutput: [\n    {\n      keyframes: {\n        \"0\": { /* labels */ },\n        \"1000\": { /* labels */ },\n        \"2000\": { /* labels */ }\n      }\n    }\n  ]\n}")), /*#__PURE__*/React.createElement(Box, {
    display: "flex",
    justifyContent: "center",
    alignItems: "center"
  }, /*#__PURE__*/React.createElement(ArrowForwardIcon, {
    style: {
      color: colors.grey[500],
      width: 48,
      height: 48
    }
  })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Code, null, "{\n  \"interface\": { \"type\": \"image_segmentation\" },\n  samples: [\n    {\n      videoUrl: \"https://example.com/vid1.mp4\",\n      videoFrameAt: 0\n    },\n    {\n      videoUrl: \"https://example.com/vid1.mp4\",\n      videoFrameAt: 1000\n    },\n    {\n      videoUrl: \"https://example.com/vid1.mp4\",\n      videoFrameAt: 2000\n    }\n  ],\n  taskOutput: [\n    { /* labels */ },\n    { /* labels */ },\n    { /* labels */ }\n  ]\n}"))))));
});