import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React, { useMemo } from "react";
import IconButton from "@material-ui/core/IconButton";
import DataTable from "react-data-table-component";
import { styled } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import useSample from "../../hooks/use-sample";
import useSummary from "../../hooks/use-summary";
import useRemoveSamples from "../../hooks/use-remove-samples";
import DeleteIcon from "@material-ui/icons/Delete";
import BorderColorIcon from "@material-ui/icons/BorderColor";
var ExpandedRowContainer = styled("div")({
  padding: 8,
  border: "#888 solid 1px",
  borderTop: "none",
  borderRadius: 4,
  borderTopLeftRadius: 0,
  borderTopRightRadius: 0,
  boxShadow: "inset 0 3px 3px rgba(0,0,0,0.2)"
});
var ExpandedRowTitle = styled("div")({
  fontSize: 11,
  fontWeight: "bold"
});
var ExpandedRowCode = styled("pre")({
  whiteSpace: "pre-wrap",
  fontSize: 11
});

var ExpandedRow = function ExpandedRow(_ref) {
  var data = _ref.data;

  var _useSample = useSample(data._id),
      sample = _useSample.sample;

  var _ref2 = sample || {},
      annotation = _ref2.annotation,
      input = _objectWithoutProperties(_ref2, ["annotation"]);

  return /*#__PURE__*/React.createElement(ExpandedRowContainer, null, /*#__PURE__*/React.createElement(Grid, {
    spacing: 2,
    container: true
  }, /*#__PURE__*/React.createElement(Grid, {
    item: true,
    xs: 6
  }, /*#__PURE__*/React.createElement(ExpandedRowTitle, null, "samples[", data.index, "]:"), /*#__PURE__*/React.createElement(ExpandedRowCode, null, JSON.stringify(input, null, "  "))), /*#__PURE__*/React.createElement(Grid, {
    item: true,
    xs: 6
  }, /*#__PURE__*/React.createElement(ExpandedRowTitle, null, "samples[", data.index, "].annotation:"), /*#__PURE__*/React.createElement(ExpandedRowCode, null, JSON.stringify(annotation, null, "  ")))));
};

export var SamplesTable = function SamplesTable(_ref3) {
  var onClickSample = _ref3.onClickSample;

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

  var removeSamples = useRemoveSamples();
  var data = useMemo(function () {
    if (!(summary === null || summary === void 0 ? void 0 : summary.samples)) return [];
    return summary.samples.map(function (td, i) {
      return _objectSpread(_objectSpread({}, td), {}, {
        index: i
      });
    });
  }, [summary]);
  var columns = useMemo(function () {
    if (!summary || ((summary === null || summary === void 0 ? void 0 : summary.samples) || []).length === 0) return [];
    var columns = [{
      name: "Index",
      selector: "index",
      sortable: true
    }];
    var knownKeys = new Set();

    var _iterator = _createForOfIteratorHelper(summary.samples),
        _step;

    try {
      for (_iterator.s(); !(_step = _iterator.n()).done;) {
        var td = _step.value;

        var _loop = function _loop(key) {
          if (!knownKeys.has(key)) {
            columns.push({
              name: key,
              selector: key,
              cell: function cell(row) {
                return typeof row[key] !== "object" ? row[key].toString() : JSON.stringify(row[key]).slice(0, 30) + "...";
              }
            });
            knownKeys.add(key);
          }
        };

        for (var key in td) {
          _loop(key);
        }
      } // TODO "Edit" allows editing of the sample JSON
      // columns.push({
      //   name: "Edit",
      //   button: true,
      //   cell: (row) => (
      //     <IconButton raised onClick={() => onClickSample(row.index)}>
      //       <EditIcon style={{ width: 20, height: 20 }} />
      //     </IconButton>
      //   ),
      // })

    } catch (err) {
      _iterator.e(err);
    } finally {
      _iterator.f();
    }

    columns.push({
      name: "Label",
      button: true,
      cell: function cell(row) {
        return /*#__PURE__*/React.createElement(IconButton, {
          raised: true,
          onClick: function onClick() {
            return onClickSample(row.index);
          }
        }, /*#__PURE__*/React.createElement(BorderColorIcon, {
          style: {
            width: 20,
            height: 20
          }
        }));
      }
    });
    columns.push({
      name: "Delete",
      button: true,
      cell: function cell(row) {
        return /*#__PURE__*/React.createElement(IconButton, {
          raised: true,
          primary: true,
          onClick: function onClick() {
            return removeSamples([row._id]);
          }
        }, /*#__PURE__*/React.createElement(DeleteIcon, {
          style: {
            width: 20,
            height: 20
          }
        }));
      }
    });
    return columns;
  }, [summary, onClickSample, removeSamples]);
  return /*#__PURE__*/React.createElement(DataTable, {
    title: "Samples",
    expandableRowsComponent: /*#__PURE__*/React.createElement(ExpandedRow, null),
    expandableRows: true,
    dense: true,
    columns: columns,
    data: data,
    pagination: true,
    paginationPerPage: 10,
    paginationRowsPerPageOptions: [10, 20, 25, 50, 100, 200]
  });
};
export default SamplesTable;