import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState } from "react";
import { styled } from "@material-ui/core/styles";
import SampleGrid from "../SampleGrid";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import AppsIcon from "@material-ui/icons/Apps";
import SlideshowIcon from "@material-ui/icons/Slideshow";
import TableChartIcon from "@material-ui/icons/TableChart";
import Box from "@material-ui/core/Box";
import ImportIcon from "@material-ui/icons/Publish";
import ImportPage from "../ImportPage";
import TransformPage from "../TransformPage";
import useIsDesktop from "../../hooks/use-is-desktop";
import useSummary from "../../hooks/use-summary";
import * as colors from "@material-ui/core/colors";
import SamplesTable from "../SamplesTable";
var Container = styled("div")({
  padding: 16,
  height: "100%",
  display: "flex",
  flexDirection: "column",
  boxSizing: "border-box"
});
var SampleCounter = styled("div")({
  fontSize: 14,
  color: colors.grey[600],
  display: "flex",
  justifyContent: "flex-end",
  alignItems: "center",
  flexGrow: 1
});
export var SamplesView = function SamplesView(_ref) {
  var openSampleInputEditor = _ref.openSampleInputEditor,
      openSampleLabelEditor = _ref.openSampleLabelEditor,
      user = _ref.user;
  var isDesktop = useIsDesktop();

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

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

  var changeTab = function changeTab(tab) {
    changeTabState(tab);
    window.localStorage.lastSampleTab = tab;
  };

  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Box, {
    display: "flex"
  }, /*#__PURE__*/React.createElement(Tabs, {
    value: currentTab,
    onChange: function onChange(e, newTab) {
      return changeTab(newTab);
    }
  }, /*#__PURE__*/React.createElement(Tab, {
    icon: /*#__PURE__*/React.createElement(ImportIcon, null),
    label: "Import",
    value: "import"
  }), /*#__PURE__*/React.createElement(Tab, {
    icon: /*#__PURE__*/React.createElement(SlideshowIcon, null),
    label: "Transform",
    value: "transform"
  }), /*#__PURE__*/React.createElement(Tab, {
    icon: /*#__PURE__*/React.createElement(AppsIcon, null),
    label: "Grid",
    value: "grid"
  }), /*#__PURE__*/React.createElement(Tab, {
    icon: /*#__PURE__*/React.createElement(TableChartIcon, null),
    label: "Table",
    value: "table"
  })), /*#__PURE__*/React.createElement(SampleCounter, null, (summary.samples || []).length, " Samples", /*#__PURE__*/React.createElement("br", null), (summary.samples || []).filter(function (s) {
    return s === null || s === void 0 ? void 0 : s.hasAnnotation;
  }).length, " ", "Labels")), /*#__PURE__*/React.createElement(Box, {
    paddingTop: 2
  }), /*#__PURE__*/React.createElement(Box, {
    flexGrow: 1
  }, currentTab === "import" && /*#__PURE__*/React.createElement(ImportPage, {
    isDesktop: isDesktop,
    onImportPageShouldExit: function onImportPageShouldExit() {
      return changeTab("grid");
    },
    user: user
  }), currentTab === "transform" && /*#__PURE__*/React.createElement(TransformPage, null), currentTab === "grid" && /*#__PURE__*/React.createElement(SampleGrid, {
    tablePaginationPadding: 6,
    samples: summary.samples || [],
    onClick: function onClick(sampleIndex) {
      openSampleLabelEditor(sampleIndex);
    }
  }), currentTab === "table" && /*#__PURE__*/React.createElement(SamplesTable, {
    onClickSample: function onClickSample(sampleIndex) {
      openSampleLabelEditor(sampleIndex);
    }
  })));
};
export default SamplesView;