import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { memo, useEffect, useState } from 'react';
// import { useDebounce } from 'use-debounce';
import { ArrowLeft, Columns, Delete, Edit, Filters, Refresh } from '@helpdice/icons';
// import InfiniteScroll from 'react-infinite-scroll-component';
import _ from 'lodash';
// import Text from '../text';
import Container from '../grid/grid-container';
import Grid from '../grid';
import Button from '../button';
import Tooltip from '../tooltip';
import Table from './table';
import Popover from '../popover';
function DataTable(_ref) {
  var _ref$cols = _ref.cols,
    cols = _ref$cols === void 0 ? [] : _ref$cols,
    _ref$rows = _ref.rows,
    rows = _ref$rows === void 0 ? [] : _ref$rows,
    _ref$readOnly = _ref.readOnly,
    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
    _ref$heading = _ref.heading,
    heading = _ref$heading === void 0 ? [] : _ref$heading,
    _ref$filter = _ref.filter,
    filter = _ref$filter === void 0 ? true : _ref$filter,
    menu = _ref.menu,
    _ref$sideMenu = _ref.sideMenu,
    sideMenu = _ref$sideMenu === void 0 ? false : _ref$sideMenu,
    _ref$style = _ref.style,
    style = _ref$style === void 0 ? {} : _ref$style,
    children = _ref.children,
    _ref$onBack = _ref.onBack,
    onBack = _ref$onBack === void 0 ? function () {
      window.history.back();
    } : _ref$onBack,
    onRefresh = _ref.onRefresh,
    onFilters = _ref.onFilters,
    onSelectedDelete = _ref.onSelectedDelete,
    onSelectedEdit = _ref.onSelectedEdit,
    onSelected = _ref.onSelected,
    _ref$disableViewColum = _ref.disableViewColumn,
    disableViewColumn = _ref$disableViewColum === void 0 ? false : _ref$disableViewColum,
    _ref$rowDraggable = _ref.rowDraggable,
    rowDraggable = _ref$rowDraggable === void 0 ? false : _ref$rowDraggable,
    onDragOver = _ref.onDragOver,
    onDragEnter = _ref.onDragEnter,
    onDragLeave = _ref.onDragLeave,
    onDrop = _ref.onDrop,
    onRowClick = _ref.onRowClick,
    dataLength = _ref.dataLength,
    viewLength = _ref.viewLength,
    _onPageChange = _ref.onPageChange,
    _ref$disableMenu = _ref.disableMenu,
    disableMenu = _ref$disableMenu === void 0 ? false : _ref$disableMenu;
  var TABLE_ID = _.uniqueId('tbl');
  // const [anchorEl, setAnchorEl] = useState(null);
  var _useState = useState([]),
    _useState2 = _slicedToArray(_useState, 2),
    selected = _useState2[0],
    setSelected = _useState2[1];
  // const [table_filters] = useDebounce(filters, 500);
  // const open = Boolean(anchorEl);
  // const handleMenuOpen = (event: any) => {
  //     setAnchorEl(event.currentTarget);
  // };
  var _useState3 = useState([]),
    _useState4 = _slicedToArray(_useState3, 2),
    hideColumn = _useState4[0],
    setHideColumn = _useState4[1];
  // const handleMenuClose = () => {
  //     setAnchorEl(null);
  // };

  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    openFilter = _useState6[0],
    setOpenFilter = _useState6[1];
  var handleShowFilter = function handleShowFilter() {
    return setOpenFilter(!openFilter);
  };
  useEffect(function () {
    if (selected.length > 0 && onSelected) {
      onSelected(selected);
    }
  }, [selected]);
  useEffect(function () {
    cols.forEach(function (col) {
      if (hideColumn.includes(col.name)) {
        document.querySelectorAll("[data-column=\"".concat(String(col.name).toLowerCase(), "\"]")).forEach(function (el) {
          el.style.display = 'none !important';
        });
      } else {
        document.querySelectorAll("[data-column=\"".concat(String(col.name).toLowerCase(), "\"]")).forEach(function (el) {
          el.style.display = '';
        });
      }
    });
  }, [hideColumn, cols, rows]);
  var handleHideColumnClick = function handleHideColumnClick(_event, id) {
    var selectedIndex = hideColumn.indexOf(id);
    var newSelected = [];
    if (selectedIndex === -1) {
      newSelected = newSelected.concat(hideColumn, id);
    } else if (selectedIndex === 0) {
      newSelected = newSelected.concat(hideColumn.slice(1));
    } else if (selectedIndex === hideColumn.length - 1) {
      newSelected = newSelected.concat(hideColumn.slice(0, -1));
    } else if (selectedIndex > 0) {
      newSelected = newSelected.concat(hideColumn.slice(0, selectedIndex), hideColumn.slice(selectedIndex + 1));
    }
    setHideColumn(newSelected);
  };

  // Children change reset selected
  useEffect(function () {
    setSelected([]);
  }, [children]);

  // const tableHeadStyle = {
  //     position: 'sticky',
  //     // backgroundColor: '#fafafb',
  //     // boxShadow: '0 2px 2px -1px rgba(0, 0, 0, 0.4)',
  //     top: 0,
  //     zIndex: 9,
  //     '& .MuiTableCell-root': {
  //         fontSize: '14px !important',
  //         py: 0.2
  //     }
  //     // ...borderStyle
  // };

  // const borderStyle = {
  //     '& .MuiTableCell-root': {
  //         py: 0.2,
  //         px: 1
  //         // borderLeft: '1px solid #ccc !important',
  //         // borderRight: '1px solid #ccc !important'
  //     },
  //     '& td:first-of-type': {
  //         borderLeft: 'none !important'
  //     },
  //     '& td:last-child': {
  //         borderRight: 'none !important'
  //     }
  //     // '& tr': { borderBottom: '1px solid #ccc !important' }
  // };

  var COLUMNS = cols.filter(function (col) {
    return !hideColumn.includes(String(col.name).toLowerCase());
  });
  var content = function content() {
    return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, index) {
      var colunqid = _.uniqueId("".concat(option.name, "-").concat(index));
      var isSelected = !hideColumn.includes(option.name);
      return /*#__PURE__*/React.createElement(Popover.Item, {
        selected: isSelected,
        key: colunqid,
        onClick: function onClick(e) {
          return handleHideColumnClick(e, option.name);
        }
      }, /*#__PURE__*/React.createElement("span", null, option.name));
    }));
  };
  return /*#__PURE__*/React.createElement(Container, {
    className: "helpdice-ui-data-table-container",
    direction: "column"
  }, /*#__PURE__*/React.createElement(Grid.Container, {
    style: {
      marginBottom: '0.5rem',
      marginTop: '0.5rem'
    }
  }, heading && /*#__PURE__*/React.createElement(Grid, {
    sm: disableMenu ? 24 : 12,
    xs: 24
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: '1rem'
    }
  }, children && /*#__PURE__*/React.createElement(Button, {
    auto: true,
    scale: 2 / 3,
    px: 0.6,
    iconRight: /*#__PURE__*/React.createElement(ArrowLeft, null),
    onClick: onBack
  }), heading)), !disableMenu && /*#__PURE__*/React.createElement(Grid, {
    sm: 12,
    xs: 24
  }, /*#__PURE__*/React.createElement(Container, {
    width: "100%",
    style: {
      margin: 0,
      gap: '0.6rem'
    },
    justify: "flex-end",
    alignContent: "center"
  }, menu, !children && !readOnly ? /*#__PURE__*/React.createElement(React.Fragment, null, onSelectedEdit && selected.length === 1 ? /*#__PURE__*/React.createElement(Tooltip, {
    text: "Edit Selected",
    placement: "bottom",
    font: 0.8,
    px: 0.6,
    py: 0.4,
    type: "dark"
  }, /*#__PURE__*/React.createElement(Button, {
    onClick: function onClick() {
      return onSelectedEdit(selected[0]);
    },
    iconRight: /*#__PURE__*/React.createElement(Edit, null),
    auto: true,
    scale: 2 / 3,
    px: 0.6
  })) : null, onSelectedDelete && selected.length > 1 ? /*#__PURE__*/React.createElement(Tooltip, {
    text: "Delete Selected",
    placement: "bottom",
    font: 0.8,
    px: 0.6,
    py: 0.4,
    type: "dark"
  }, /*#__PURE__*/React.createElement(Button, {
    onClick: function onClick() {
      return onSelectedDelete(selected);
    },
    auto: true,
    scale: 2 / 3,
    px: 0.6,
    iconRight: /*#__PURE__*/React.createElement(Delete, null)
  })) : null, onRefresh ? /*#__PURE__*/React.createElement(Tooltip, {
    text: "Refresh",
    placement: "bottom",
    font: 0.8,
    px: 0.6,
    py: 0.4,
    type: "dark"
  }, /*#__PURE__*/React.createElement(Button, {
    onClick: function onClick() {
      return onRefresh();
    },
    auto: true,
    scale: 2 / 3,
    px: 0.6,
    iconRight: /*#__PURE__*/React.createElement(Refresh, null)
  })) : null, onFilters && filter ? /*#__PURE__*/React.createElement(Tooltip, {
    text: "Filters",
    placement: "bottomEnd",
    font: 0.8,
    px: 0.6,
    py: 0.4,
    type: "dark"
  }, /*#__PURE__*/React.createElement(Button, {
    onClick: handleShowFilter,
    auto: true,
    scale: 2 / 3,
    px: 0.6,
    iconRight: /*#__PURE__*/React.createElement(Filters, null)
  })) : null, !disableViewColumn && /*#__PURE__*/React.createElement(Tooltip, {
    text: "Columns",
    placement: "bottomEnd",
    font: 0.8,
    px: 0.6,
    py: 0.4,
    type: "dark"
  }, /*#__PURE__*/React.createElement(Popover, {
    disableItemsAutoClose: true,
    placement: "bottomEnd",
    child: content
  }, /*#__PURE__*/React.createElement(Button, {
    onClick: function onClick() {},
    auto: true,
    scale: 2 / 3,
    px: 0.6,
    iconRight: /*#__PURE__*/React.createElement(Columns, null)
  })))) : null))), children ? /*#__PURE__*/React.createElement("div", {
    style: {
      padding: '1rem'
    }
  }, children) : /*#__PURE__*/React.createElement("div", {
    style: {
      gap: 5,
      display: 'flex',
      flexDirection: sideMenu ? 'row' : 'column'
    }
  }, sideMenu && /*#__PURE__*/React.createElement(Container, {
    direction: "column",
    style: {
      width: '15rem',
      padding: '0.5rem 0.7rem',
      border: '1px solid #cfcfcf',
      borderRadius: '5px'
    }
  }, sideMenu), /*#__PURE__*/React.createElement("div", {
    onDragOver: onDragOver,
    onDragEnter: onDragEnter,
    onDragLeave: onDragLeave,
    onDrop: onDrop,
    id: TABLE_ID,
    className: "helpdice-ui-table-container",
    style: _extends({
      position: 'relative',
      overflowY: 'auto',
      maxWidth: 'calc(100vw - 1rem)',
      width: sideMenu ? 'calc(100vw - 17.2rem)' : 'inherit !important'
    }, style)
  }, /*#__PURE__*/React.createElement(Table, {
    stickyHeader: true,
    dataLength: dataLength,
    viewLength: viewLength,
    onPageChange: function onPageChange(page, start, end) {
      if (_onPageChange) {
        _onPageChange(page, start, end);
      }
    },
    onRow: onRowClick,
    rowDraggable: rowDraggable,
    showFilters: openFilter,
    onSelected: function onSelected(selected) {
      return setSelected(selected);
    },
    onFilters: onFilters,
    data: rows,
    style: {
      borderCollapse: 'collapse',
      overflow: 'auto'
    }
  }, COLUMNS.map(function (column, index) {
    return /*#__PURE__*/React.createElement(Table.Column, {
      options: column === null || column === void 0 ? void 0 : column.options,
      fontSize: column === null || column === void 0 ? void 0 : column.fontSize,
      key: "".concat(column.id, "-").concat(index),
      prop: column.id,
      label: column.name,
      filter: column === null || column === void 0 ? void 0 : column.filter,
      noWrap: column === null || column === void 0 ? void 0 : column.noWrap,
      align: column === null || column === void 0 ? void 0 : column.align
    });
  })))));
}
export default /*#__PURE__*/memo(DataTable);