import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { memo, useCallback, useReducer, useEffect } from "react";
import useEventCallback from "use-event-callback";
import { useLocalStorage } from "react-use";
import { styled } from "@material-ui/core/styles";
import range from "lodash/range";
import * as colors from "@material-ui/core/colors";
import classNames from "classnames";
import TablePagination from "@material-ui/core/TablePagination";
import Box from "@material-ui/core/Box";
import getBrushColorPalette from "../../utils/get-brush-color-palette";
var Container = styled("div")({
  flexWrap: "wrap",
  height: "100%",
  boxSizing: "border-box",
  display: "flex",
  flexDirection: "column"
});
var EmptyState = styled("div")({
  fontSize: 24,
  color: colors.grey[500],
  padding: 30,
  textAlign: "center"
});
var SampleDiv = styled("div")(function (_ref) {
  var color = _ref.color;
  return {
    color: "#fff",
    fontVariantNumeric: "tabular-nums",
    margin: 4,
    padding: 4,
    backgroundColor: color[500],
    display: "inline-flex",
    fontSize: 14,
    fontWeight: 500,
    textAlign: "center",
    justifyContent: "center",
    minWidth: "3em",
    borderRadius: 3,
    cursor: "pointer",
    userSelect: "none",
    transition: "box-shadow 200ms ease, transform 200ms ease, background-color 200ms ease",
    "&:hover": {
      backgroundColor: color[700]
    },
    // color: color.isFaded ? "#000" : "#fff",
    "&.selected": {
      backgroundColor: color[700],
      boxShadow: "0px 0px 2px 1px ".concat(color["A200"]),
      transform: "scale(1.05,1.05)"
    }
  };
});
var Sample = memo(function (_ref2) {
  var index = _ref2.index,
      _onClick = _ref2.onClick,
      completed = _ref2.completed,
      selected = _ref2.selected,
      _onMouseDown = _ref2.onMouseDown,
      _onMouseUp = _ref2.onMouseUp,
      _onMouseEnter = _ref2.onMouseEnter,
      brush = _ref2.brush;
  return /*#__PURE__*/React.createElement(SampleDiv, {
    className: classNames({
      completed: completed,
      selected: selected
    }),
    onClick: function onClick() {
      return _onClick(index);
    },
    onMouseDown: function onMouseDown() {
      return _onMouseDown(index);
    },
    onMouseUp: function onMouseUp() {
      return _onMouseUp(index);
    },
    onMouseEnter: function onMouseEnter() {
      return _onMouseEnter(index);
    },
    color: getBrushColorPalette(brush)
  }, index);
}, function (p, n) {
  return p.index === n.index && p.completed === n.completed && p.selected === n.selected && p.brush === n.brush;
});
export default (function (_ref3) {
  var samples = _ref3.samples,
      onClick = _ref3.onClick,
      _ref3$tablePagination = _ref3.tablePaginationPadding,
      tablePaginationPadding = _ref3$tablePagination === void 0 ? 0 : _ref3$tablePagination;

  var _useLocalStorage = useLocalStorage("samplesPerPage", 100),
      _useLocalStorage2 = _slicedToArray(_useLocalStorage, 2),
      samplesPerPage = _useLocalStorage2[0],
      changeSamplesPerPage = _useLocalStorage2[1];

  var _useLocalStorage3 = useLocalStorage("sampleOffset", 0),
      _useLocalStorage4 = _slicedToArray(_useLocalStorage3, 2),
      sampleOffset = _useLocalStorage4[0],
      changeSampleOffset = _useLocalStorage4[1];

  useEffect(function () {
    if (sampleOffset > samples.length) {
      changeSampleOffset(0);
    }
  }, [changeSampleOffset, sampleOffset, samples.length]);

  var _useReducer = useReducer(function (state, newValue) {
    if (newValue === null) return null;

    if (typeof newValue === "number") {
      if (!state) return null;
      return [Math.min(newValue, state[0]), Math.max(newValue + 1, state[1])];
    }

    return newValue;
  }, null),
      _useReducer2 = _slicedToArray(_useReducer, 2),
      selectRange = _useReducer2[0],
      changeSelectRange = _useReducer2[1];

  var startSelectRange = useCallback(function (index) {
    return changeSelectRange([index, index + 1]);
  }, [changeSelectRange]);
  var moveSelectRange = useCallback(function (index) {
    return changeSelectRange(index);
  }, [changeSelectRange]);
  var endSelectRange = useCallback(function () {}, []);
  var checkAndNullifySelectRange = useCallback(function (e) {
    if (e.buttons !== 1) {
      changeSelectRange(null);
    }
  }, [changeSelectRange]);
  var onClickMemo = useEventCallback(onClick);
  return /*#__PURE__*/React.createElement(Container, {
    onMouseUp: checkAndNullifySelectRange,
    onMouseEnter: checkAndNullifySelectRange
  }, samples.length === 0 && /*#__PURE__*/React.createElement(EmptyState, null, "No samples, try using \"Import Toy Dataset\" in Samples > Import"), /*#__PURE__*/React.createElement(Box, {
    flexGrow: 1
  }, range(sampleOffset, Math.min(samples.length, sampleOffset + samplesPerPage)).map(function (i) {
    var _samples$i, _samples$i2;

    return /*#__PURE__*/React.createElement(Sample, {
      onClick: onClickMemo,
      key: i,
      index: i,
      completed: (_samples$i = samples[i]) === null || _samples$i === void 0 ? void 0 : _samples$i.hasAnnotation,
      brush: ((_samples$i2 = samples[i]) === null || _samples$i2 === void 0 ? void 0 : _samples$i2.hasAnnotation) ? samples[i].brush || "complete" : "incomplete",
      selected: selectRange && i >= selectRange[0] && i < selectRange[1],
      onMouseDown: startSelectRange,
      onMouseEnter: moveSelectRange,
      onMouseUp: endSelectRange
    });
  }), sampleOffset + samplesPerPage < samples.length && /*#__PURE__*/React.createElement(React.Fragment, null, range(3).map(function (i) {
    return /*#__PURE__*/React.createElement(Sample, {
      onClick: function onClick() {
        changeSampleOffset(sampleOffset + samplesPerPage);
      },
      key: sampleOffset + samplesPerPage + i,
      selected: false,
      brush: "ellipsis".concat(i + 1),
      index: sampleOffset + samplesPerPage + i,
      completed: false,
      onMouseEnter: function onMouseEnter() {},
      onMouseDown: function onMouseDown() {},
      onMouseUp: function onMouseUp() {}
    });
  }), /*#__PURE__*/React.createElement(Box, {
    textAlign: "center",
    marginTop: "16px",
    color: colors.grey[700]
  }, "More Samples on Next Page"))), /*#__PURE__*/React.createElement(Box, {
    paddingRight: tablePaginationPadding
  }, /*#__PURE__*/React.createElement(TablePagination, {
    rowsPerPageOptions: [100, 250, 500, 1000, 2000, 10000],
    component: "div",
    count: samples.length,
    rowsPerPage: samplesPerPage,
    page: Math.floor(sampleOffset / samplesPerPage),
    labelRowsPerPage: "Samples per Page:",
    onChangePage: function onChangePage(e, newPage) {
      return changeSampleOffset(newPage * samplesPerPage);
    },
    onChangeRowsPerPage: function onChangeRowsPerPage(e) {
      changeSampleOffset(0);
      changeSamplesPerPage(+e.target.value);
    }
  })));
});