import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState } from "react";
import { makeStyles } from "@material-ui/core";
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";
import ReactMarkdown from "react-markdown";
import RightIcon from "@material-ui/icons/KeyboardArrowRight";
import LeftIcon from "@material-ui/icons/KeyboardArrowLeft";
import CircleIcon from "@material-ui/icons/RadioButtonUnchecked";
import CheckCircle from "@material-ui/icons/CheckCircle";
import * as colors from "@material-ui/core/colors";
import Drawer from "@material-ui/core/Drawer";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import ListSubheader from "@material-ui/core/ListSubheader";
import LinkButton from "./LinkButton";
import range from "lodash/range";
var useStyles = makeStyles(function (theme) {
  return {
    footer: {
      backgroundColor: "#fff",
      marginTop: 40
    },
    footerContent: {
      alignItems: "center",
      padding: 20,
      display: "flex",
      justifyContent: "space-between"
    },
    footerBorder: {
      borderTop: "1px solid #ccc",
      marginLeft: 20,
      marginRight: 20
    },
    footerCount: {
      display: "inline-flex"
    },
    allSamplesButton: {
      color: "#fff",
      border: "1px solid rgba(255,255,255,0.5)",
      marginRight: 10,
      paddingLeft: 8
    },
    sampleIcon: {
      marginRight: 8
    },
    menuButton: {
      marginRight: 8,
      color: "#fff"
    },
    grow: {
      flexGrow: 1
    },
    buttons: {
      "& > *": {
        margin: 4
      }
    },
    description: {
      padding: 10,
      "& img": {
        maxWidth: "calc(100% - 16px)",
        marginLeft: 8,
        marginRight: 8,
        maxHeight: 600
      }
    },
    sectionHeader: {
      fontWeight: 700,
      fontSize: 12,
      padding: 10,
      paddingTop: 16,
      textTransform: "uppercase",
      color: colors.grey[600]
    },
    content: {
      padding: 10 // minHeight: "calc(100vh - 200px)"

    }
  };
});
export var SampleContainer = function SampleContainer(_ref) {
  var _ref$hideDescription = _ref.hideDescription,
      defaultHideDescription = _ref$hideDescription === void 0 ? window.localStorage.getItem("hideDescription") === '"true"' : _ref$hideDescription,
      lastSampleExitText = _ref.lastSampleExitText,
      onExit = _ref.onExit,
      _ref$requireCompleteT = _ref.requireCompleteToPressNext,
      requireCompleteToPressNext = _ref$requireCompleteT === void 0 ? false : _ref$requireCompleteT,
      samples = _ref.samples,
      minContentHeight = _ref.minContentHeight,
      currentSampleIndex = _ref.currentSampleIndex,
      totalSamples = _ref.totalSamples,
      onChangeSample = _ref.onChangeSample,
      _ref$taskOutput = _ref.taskOutput,
      taskOutput = _ref$taskOutput === void 0 ? [] : _ref$taskOutput,
      description = _ref.description,
      children = _ref.children;
  var c = useStyles();

  var _useState = useState(defaultHideDescription),
      _useState2 = _slicedToArray(_useState, 2),
      hideDescription = _useState2[0],
      changeHideDescriptionState = _useState2[1];

  var changeHideDescription = function changeHideDescription(hide) {
    window.localStorage.setItem("hideDescription", "\"".concat(hide ? "true" : "false", "\""));
    changeHideDescriptionState(hide);
  };

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      sampleDrawerOpen = _useState4[0],
      changeSampleDrawerOpen = _useState4[1];

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid, {
    container: true
  }, !hideDescription && /*#__PURE__*/React.createElement(Grid, {
    item: true,
    xs: 12,
    sm: 12,
    md: 6
  }, /*#__PURE__*/React.createElement("div", {
    className: c.sectionHeader
  }, "Description", /*#__PURE__*/React.createElement(LinkButton, {
    onClick: function onClick() {
      return changeHideDescription(true);
    },
    text: "hide"
  })), /*#__PURE__*/React.createElement("div", {
    className: c.description
  }, /*#__PURE__*/React.createElement(ReactMarkdown, {
    escapeHtml: false,
    source: description
  }))), /*#__PURE__*/React.createElement(Grid, {
    item: true,
    xs: 12,
    sm: 12,
    md: hideDescription ? 12 : 6
  }, /*#__PURE__*/React.createElement("div", {
    className: c.sectionHeader
  }, "Sample ", currentSampleIndex + 1, "/", totalSamples, hideDescription && /*#__PURE__*/React.createElement(LinkButton, {
    onClick: function onClick() {
      return changeHideDescription(false);
    },
    text: "show description"
  }), totalSamples > 1 && /*#__PURE__*/React.createElement(LinkButton, {
    onClick: function onClick() {
      return changeSampleDrawerOpen(true);
    },
    text: "view all"
  }), onExit && /*#__PURE__*/React.createElement(LinkButton, {
    onClick: function onClick() {
      return onExit();
    },
    text: "exit without saving"
  })), /*#__PURE__*/React.createElement("div", {
    style: {
      minHeight: minContentHeight
    },
    className: c.content
  }, children)), totalSamples > 1 && /*#__PURE__*/React.createElement(Grid, {
    item: true,
    xs: 12
  }, /*#__PURE__*/React.createElement("div", {
    className: c.footer
  }, /*#__PURE__*/React.createElement("div", {
    className: c.footerBorder
  }), /*#__PURE__*/React.createElement("div", {
    className: c.footerContent
  }, /*#__PURE__*/React.createElement(Button, {
    onClick: function onClick() {
      return onChangeSample((currentSampleIndex - 1 + totalSamples) % totalSamples);
    }
  }, /*#__PURE__*/React.createElement(LeftIcon, null), " Prev Sample"), /*#__PURE__*/React.createElement(Button, {
    onClick: function onClick() {
      return changeSampleDrawerOpen(true);
    },
    className: c.footerCount
  }, currentSampleIndex + 1, " / ", totalSamples), /*#__PURE__*/React.createElement(Button, {
    disabled: requireCompleteToPressNext && !taskOutput[currentSampleIndex],
    onClick: function onClick() {
      return onChangeSample((currentSampleIndex + 1) % totalSamples);
    }
  }, requireCompleteToPressNext && !taskOutput[currentSampleIndex] ? "Save to Continue" : "Next Sample", /*#__PURE__*/React.createElement(RightIcon, null)))))), /*#__PURE__*/React.createElement(Drawer, {
    open: sampleDrawerOpen,
    anchor: "left",
    onClose: function onClose() {
      return changeSampleDrawerOpen(false);
    }
  }, /*#__PURE__*/React.createElement(List, {
    style: {
      minWidth: 300
    }
  }, /*#__PURE__*/React.createElement(ListSubheader, null, "Samples"), range(0, totalSamples).map(function (i) {
    return /*#__PURE__*/React.createElement(ListItem, {
      style: {
        backgroundColor: i === currentSampleIndex ? colors.grey[200] : undefined
      },
      button: true,
      onClick: function onClick() {
        return onChangeSample(i);
      }
    }, /*#__PURE__*/React.createElement(ListItemIcon, {
      style: {
        color: i === currentSampleIndex ? colors.blue[500] : undefined
      }
    }, taskOutput[i] ? /*#__PURE__*/React.createElement(CheckCircle, null) : /*#__PURE__*/React.createElement(CircleIcon, null)), /*#__PURE__*/React.createElement(ListItemText, null, "Sample ", i + 1));
  }))));
};
export default SampleContainer;