import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState, useEffect, useMemo } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Header from "../Header";
import SamplesView from "../SamplesView";
import SetupPage from "../SetupPage";
import useElectron from "../../hooks/use-electron";
import useTimeToCompleteSample from "../../hooks/use-time-to-complete-sample.js";
import { useToasts } from "../Toasts";
import useEventCallback from "use-event-callback";
import usePosthog from "../../hooks/use-posthog";
import classnames from "classnames";
import LabelView from "../LabelView";
import useIsLabelOnlyMode from "../../hooks/use-is-label-only-mode";
import { HotKeys } from "react-hotkeys";
import { useHotkeyStorage } from "../HotkeyStorage";
import useInterface from "../../hooks/use-interface";
import useSummary from "../../hooks/use-summary";
import useRemoveSamples from "../../hooks/use-remove-samples";
import "brace/mode/javascript";
import "brace/theme/github";
var useStyles = makeStyles({
  headerButton: {
    color: "#fff"
  },
  saveIcon: {
    marginRight: 4
  },
  editIcon: {
    marginLeft: 4
  },
  container: {
    display: "flex",
    flexDirection: "column",
    width: "100vw",
    height: "100vh"
  }
});
export default (function (_ref) {
  var content = _ref.content,
      inSession = _ref.inSession,
      url = _ref.url,
      _ref$onChangeDataset = _ref.onChangeDataset,
      onChangeDataset = _ref$onChangeDataset === void 0 ? function () {
    return null;
  } : _ref$onChangeDataset,
      onChangeFile = _ref.onChangeFile,
      onFileDrop = _ref.onFileDrop,
      _ref$initialMode = _ref.initialMode,
      initialMode = _ref$initialMode === void 0 ? "setup" : _ref$initialMode,
      authConfig = _ref.authConfig,
      user = _ref.user,
      recentItems = _ref.recentItems,
      selectedBrush = _ref.selectedBrush;
  var labelOnlyMode = useIsLabelOnlyMode();
  var c = useStyles();

  var _useToasts = useToasts(),
      addToast = _useToasts.addToast;

  var _useState = useState(labelOnlyMode ? "label" : initialMode),
      _useState2 = _slicedToArray(_useState, 2),
      mode = _useState2[0],
      changeMode = _useState2[1];

  var _ref2 = useElectron() || {},
      ipcRenderer = _ref2.ipcRenderer;

  var posthog = usePosthog();

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

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

  var removeSamples = useRemoveSamples();

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

  var headerTabs = labelOnlyMode ? ["Label"] : ["Setup", "Samples", "Label"];

  var _useTimeToCompleteSam = useTimeToCompleteSample(),
      _useTimeToCompleteSam2 = _slicedToArray(_useTimeToCompleteSam, 2),
      sampleTimeToComplete = _useTimeToCompleteSam2[0],
      changeSampleTimeToComplete = _useTimeToCompleteSam2[1];

  useEffect(function () {
    if (!ipcRenderer) return;

    var onOpenSettingsPage = function onOpenSettingsPage() {
      return changeMode("settings");
    };

    var onOpenSamplesPage = function onOpenSamplesPage() {
      return changeMode("samples");
    };

    var onOpenLabelPage = function onOpenLabelPage() {
      return changeMode("label");
    };

    ipcRenderer.on("open-settings-page", onOpenSettingsPage);
    ipcRenderer.on("open-samples-page", onOpenSamplesPage);
    ipcRenderer.on("open-label-page", onOpenLabelPage);
    return function () {
      ipcRenderer.removeListener("open-settings-page", onOpenSettingsPage);
      ipcRenderer.removeListener("open-samples-page", onOpenSamplesPage);
      ipcRenderer.removeListener("open-label-page", onOpenLabelPage);
    };
  }, [ipcRenderer]);
  useEffect(function () {
    posthog.people.set({
      average_time_to_complete_sample: sampleTimeToComplete
    });
  }, [sampleTimeToComplete, posthog.people]);
  useEffect(function () {
    if (mode !== "label") setSampleIndex(null);
    posthog.capture("open_editor_tab", {
      tab: mode
    });
  }, [mode, posthog]);
  var onChangeTab = useEventCallback(function (tab) {
    return changeMode(tab.toLowerCase());
  });
  var shortcutHandlers = useMemo(function () {
    return {
      switch_to_label: function switch_to_label() {
        return changeMode("label");
      },
      switch_to_setup: function switch_to_setup() {
        return changeMode("setup");
      },
      switch_to_samples: function switch_to_samples() {
        return changeMode("samples");
      }
    };
  }, [changeMode]);

  var _useHotkeyStorage = useHotkeyStorage(),
      keyMap = _useHotkeyStorage.keyMap;

  return /*#__PURE__*/React.createElement(HotKeys, {
    allowChanges: true,
    handlers: shortcutHandlers,
    keyMap: keyMap
  }, /*#__PURE__*/React.createElement("div", {
    className: classnames(c.container, "universaldatatool")
  }, /*#__PURE__*/React.createElement(Header, {
    title: null,
    onChangeTab: onChangeTab,
    currentTab: mode,
    tabs: headerTabs
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      height: "100%",
      overflowY: "scroll"
    }
  }, mode === "setup" && /*#__PURE__*/React.createElement(SetupPage, {
    onClearLabelData: function onClearLabelData() {
      removeSamples(summary.samples.map(function (s) {
        return s._id;
      }));
    },
    onChange: function onChange(newDataset) {
      if (iface.type !== newDataset.interface.type && iface.type !== "empty" && summary.samples.some(function (s) {
        return s === null || s === void 0 ? void 0 : s.hasAnnotation;
      })) {
        addToast("Changing label types can cause label data issues. You must clear all label data first.", "error");
        return;
      }

      onChangeDataset(newDataset);
    }
  }), mode === "samples" && /*#__PURE__*/React.createElement(SamplesView, {
    openSampleLabelEditor: function openSampleLabelEditor(sampleIndex) {
      setSampleIndex(sampleIndex);
      posthog.capture("open_sample", {
        interface_type: iface === null || iface === void 0 ? void 0 : iface.type
      });
      changeMode("label");
    },
    user: user
  }), mode === "label" && /*#__PURE__*/React.createElement(LabelView, {
    selectedBrush: selectedBrush,
    sampleIndex: sampleIndex,
    onChangeSampleIndex: setSampleIndex,
    sampleTimeToComplete: sampleTimeToComplete,
    onChangeSampleTimeToComplete: changeSampleTimeToComplete,
    onChangeDataset: onChangeDataset,
    onClickSetup: function onClickSetup() {
      return changeMode("setup");
    }
  }))));
});