import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useEffect, useState } from "react";
import LabelErrorBoundary from "../LabelErrorBoundary"; // import UniversalDataViewer from "../UniversalDataViewer"

import UniversalSampleEditor from "../UniversalSampleEditor";
import Stats from "../Stats";
import SampleGrid from "../SampleGrid";
import Box from "@material-ui/core/Box";
import usePosthog from "../../hooks/use-posthog";
import duration from "duration";
import { styled } from "@material-ui/core/styles";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import BorderColorIcon from "@material-ui/icons/BorderColor";
import SupervisedUserCircleIcon from "@material-ui/icons/SupervisedUserCircle";
import DataUsageIcon from "@material-ui/icons/DataUsage";
import LabelHelpView from "../LabelHelpView";
import ActiveLearningView from "../ActiveLearningView";
import useIsLabelOnlyMode from "../../hooks/use-is-label-only-mode";
import useSummary from "../../hooks/use-summary";
import useSample from "../../hooks/use-sample";
import useRemoveSamples from "../../hooks/use-remove-samples";
import useInterface from "../../hooks/use-interface";
import useAppConfig from "../../hooks/use-app-config";
var OverviewContainer = styled("div")({
  padding: 16,
  height: "100%",
  display: "flex",
  flexDirection: "column",
  boxSizing: "border-box"
});
export default (function (_ref) {
  var _ref$selectedBrush = _ref.selectedBrush,
      selectedBrush = _ref$selectedBrush === void 0 ? "complete" : _ref$selectedBrush,
      sampleIndex = _ref.sampleIndex,
      onChangeSampleIndex = _ref.onChangeSampleIndex,
      onClickSetup = _ref.onClickSetup,
      onChangeSampleTimeToComplete = _ref.onChangeSampleTimeToComplete,
      sampleTimeToComplete = _ref.sampleTimeToComplete;

  var _useState = useState("label"),
      _useState2 = _slicedToArray(_useState, 2),
      currentTab = _useState2[0],
      setTab = _useState2[1];

  var posthog = usePosthog();
  var labelOnlyMode = useIsLabelOnlyMode();

  var _useAppConfig = useAppConfig(),
      fromConfig = _useAppConfig.fromConfig;

  var _useState3 = useState(null),
      _useState4 = _slicedToArray(_useState3, 2),
      annotationStartTime = _useState4[0],
      setAnnotationStartTime = _useState4[1];

  var _useSummary = useSummary(),
      summary = _useSummary.summary;

  var removeSamples = useRemoveSamples();

  var _useSample = useSample(sampleIndex),
      sample = _useSample.sample,
      updateSample = _useSample.updateSample,
      sampleLoading = _useSample.sampleLoading;

  var _useInterface = useInterface(),
      iface = _useInterface.iface;

  var labelHelpEnabled = !fromConfig("labelhelp.disabled");
  var isInOverview = sampleIndex === null;
  var percentComplete = 0;

  if ((summary === null || summary === void 0 ? void 0 : summary.samples) && summary.samples.length > 0) {
    percentComplete = summary.samples.filter(function (s) {
      return s === null || s === void 0 ? void 0 : s.hasAnnotation;
    }).length / summary.samples.length;
  }

  useEffect(function () {
    if (labelHelpEnabled) {
      posthog.capture("label_help_showed");
    }
  }, [labelHelpEnabled, posthog]);
  useEffect(function () {
    if (currentTab === "labelhelp") {
      posthog.capture("label_help_clicked");
    }
  }, [currentTab, posthog]);
  return !isInOverview ? /*#__PURE__*/React.createElement(LabelErrorBoundary, null, /*#__PURE__*/React.createElement(UniversalSampleEditor, {
    sampleIndex: sampleIndex,
    loading: sampleLoading,
    onRemoveSample: function onRemoveSample(sampleIndex) {
      if (window.confirm("Are you sure you want to delete this sample?")) {
        removeSamples([summary.samples[sampleIndex]._id]);
      }
    },
    onModifySample: function onModifySample(newSample) {
      updateSample(_objectSpread(_objectSpread({}, newSample), {}, {
        brush: selectedBrush
      }));
    },
    onExit: function onExit() {
      var nextAction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "nothing";

      if (annotationStartTime) {
        onChangeSampleTimeToComplete(Date.now() - annotationStartTime);
      }

      switch (nextAction) {
        case "go-to-next":
          if (sampleIndex !== summary.samples.length - 1) {
            posthog.capture("next_sample", {
              interface_type: iface === null || iface === void 0 ? void 0 : iface.type
            }); // TODO reset start time

            onChangeSampleIndex(sampleIndex + 1);
            setAnnotationStartTime(Date.now());
            return;
          }

          break;

        case "go-to-previous":
          if (sampleIndex !== 0) {
            onChangeSampleIndex(sampleIndex - 1);
            setAnnotationStartTime(Date.now());
            return;
          }

          break;

        default:
          break;
      }

      onChangeSampleIndex(null);
    },
    interface: iface,
    sample: sample,
    onClickSetup: onClickSetup
  })) : /*#__PURE__*/React.createElement(OverviewContainer, null, /*#__PURE__*/React.createElement(Box, {
    display: "flex"
  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Tabs, {
    value: currentTab,
    onChange: function onChange(e, newTab) {
      return setTab(newTab);
    }
  }, /*#__PURE__*/React.createElement(Tab, {
    icon: /*#__PURE__*/React.createElement(BorderColorIcon, null),
    label: "Label",
    value: "label"
  }), !labelOnlyMode && /*#__PURE__*/React.createElement(Tab, {
    icon: /*#__PURE__*/React.createElement(DataUsageIcon, null),
    label: "Active Learning",
    value: "activelearning"
  }), !labelOnlyMode && /*#__PURE__*/React.createElement(Tab, {
    icon: /*#__PURE__*/React.createElement(SupervisedUserCircleIcon, null),
    label: "Crowd Label",
    value: "labelhelp"
  }))), /*#__PURE__*/React.createElement(Box, {
    flexGrow: 1
  }), /*#__PURE__*/React.createElement(Stats, {
    stats: [{
      name: "Percent Complete",
      value: Math.floor(percentComplete * 100) + "%"
    }, {
      name: "Time per Sample",
      value: duration(new Date(Date.now() - sampleTimeToComplete)).toString(1, 1)
    }, {
      name: "Estimated Remaining",
      value: duration(new Date(Date.now() - sampleTimeToComplete * (1 - percentComplete) * (summary.samples || []).length)).toString(1, 2)
    }]
  })), /*#__PURE__*/React.createElement(Box, {
    flexGrow: 1
  }, currentTab === "label" && /*#__PURE__*/React.createElement(SampleGrid, {
    tablePaginationPadding: 6,
    samples: (summary === null || summary === void 0 ? void 0 : summary.samples) || [],
    onClick: function onClick(selectedSampleIndex) {
      posthog.capture("open_sample", {
        interface_type: iface === null || iface === void 0 ? void 0 : iface.type
      });
      onChangeSampleIndex(selectedSampleIndex);
    }
  }), currentTab === "activelearning" && /*#__PURE__*/React.createElement(ActiveLearningView, null), currentTab === "labelhelp" && /*#__PURE__*/React.createElement(LabelHelpView, null)));
});