import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _JSXStyle from "../styled-jsx.es.js";
import React, { useMemo } from 'react';
import { useTheme } from '@helpdice/theme';
import Input from '../input';
import Select from '../select';
// import Button from '../button'

var makeColgroup = function makeColgroup(width, columns) {
  var unsetWidthCount = columns.filter(function (c) {
    return !c.width;
  }).length;
  var customWidthTotal = columns.reduce(function (pre, current) {
    return current.width ? pre + current.width : pre;
  }, 0);
  var averageWidth = (width - customWidthTotal) / unsetWidthCount;
  if (averageWidth <= 0) return /*#__PURE__*/React.createElement("colgroup", null);
  return /*#__PURE__*/React.createElement("colgroup", null, columns.map(function (column, index) {
    return /*#__PURE__*/React.createElement("col", {
      key: "colgroup-".concat(index),
      width: column.width || averageWidth
    });
  }));
};
var TableHead = function TableHead(props) {
  var theme = useTheme();
  var _ref = props,
    columns = _ref.columns,
    width = _ref.width,
    onFilters = _ref.onFilters,
    showFilters = _ref.showFilters,
    stickyHeader = _ref.stickyHeader;
  var isScalableWidth = useMemo(function () {
    return columns.find(function (item) {
      return !!item.width;
    });
  }, [columns]);
  var colgroup = useMemo(function () {
    if (!isScalableWidth) return /*#__PURE__*/React.createElement("colgroup", null);
    return makeColgroup(width, columns);
  }, [isScalableWidth, width]);
  var _React$useState = React.useState(columns.reduce(function (acc, col) {
      if (col.filter) {
        acc["".concat(col.filter)] = col.filter === 'date' ? null : '';
      }
      return acc;
    }, {})),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    filters = _React$useState2[0],
    setFilters = _React$useState2[1];

  // const applyFilters = () => {
  //   if (onFilters) {
  //     onFilters(filters);
  //   }
  // }

  var handleFilterChange = function handleFilterChange(name, value) {
    setFilters(function (prevFilters) {
      var updatedFilters = _extends({}, prevFilters, _defineProperty({}, name, value));
      if (onFilters) {
        onFilters(filters);
      }
      return updatedFilters;
    });
  };
  var generateFilterInputs = function generateFilterInputs() {
    return columns.map(function (col) {
      var _String, _filters$filterName;
      var Header = col.label,
        accessor = col.filter,
        options = col.options;
      var filterName = (_String = String(col === null || col === void 0 ? void 0 : col.label)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
      // const unq_accessor = _.uniqueId(filterName);
      // if (Header === 'actions') {
      //   return (
      //     <th style={{ margin: '3px' }} data-column={Header} key={unq_accessor}>
      //       <Button onClick={applyFilters} auto px={0.6} scale={2 / 3}>Apply</Button>
      //     </th>
      //   )
      // }
      return /*#__PURE__*/React.createElement("th", {
        style: {
          padding: '3px',
          textAlign: 'left'
        },
        "data-column": Header
      }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select
      // key={unq_accessor}
      // name={filterName}
      , {
        value: (_filters$filterName = filters[filterName]) !== null && _filters$filterName !== void 0 ? _filters$filterName : 'All',
        onChange: function onChange(newValue) {
          return handleFilterChange(filterName, newValue);
        }
      }, /*#__PURE__*/React.createElement(Select.Option, {
        value: "All"
      }, "All ", Header), options ? options.map(function (option) {
        return /*#__PURE__*/React.createElement(Select.Option, {
          value: option.value
        }, option.name);
      }) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input
      // id={`filter-date-${filterName}`}
      , {
        type: "date"
        // name={filterName}
        ,
        value: filters[filterName],
        onChange: function onChange(e) {
          return handleFilterChange(filterName, e.target.value);
        }
      }), accessor === 'search' && /*#__PURE__*/React.createElement(Input
      // id={`filter-search-${filterName}`}
      , {
        type: "text",
        autoComplete: "off"
        // ref={filterRefs.current[filterName]} // Dynamically set ref}
        // name={filterName}
        ,
        style: {
          height: 30,
          minWidth: 160
        },
        value: filters[filterName],
        onChange: function onChange(e) {
          return handleFilterChange(filterName, e.target.value);
        },
        placeholder: "Search...",
        fullWidth: true
      }));
    });
  };
  return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
    className: _JSXStyle.dynamic([["4089411751", [theme.palette.background, stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
  }, /*#__PURE__*/React.createElement("tr", {
    style: {
      backgroundColor: theme.palette.background
    },
    className: _JSXStyle.dynamic([["4089411751", [theme.palette.background, stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
  }, columns.map(function (column, _index) {
    var _String2;
    var dataName = (_String2 = String(column === null || column === void 0 ? void 0 : column.label)) === null || _String2 === void 0 ? void 0 : _String2.replace(' ', '_').toLowerCase();
    return /*#__PURE__*/React.createElement("th", {
      style: _extends({
        // textAlign: `${column?.align} !important`,
        // paddingLeft: '0.3rem',
        // paddingRight: '0.3rem',
        backgroundColor: theme.type == 'dark' ? theme.palette.accents_1 : theme.palette.background,
        color: "".concat(column !== null && column !== void 0 && column.color ? column === null || column === void 0 ? void 0 : column.color : '#333'),
        whiteSpace: column !== null && column !== void 0 && column.noWrap ? 'nowrap' : 'normal'
      }, column === null || column === void 0 ? void 0 : column.style),
      "data-column": dataName,
      className: _JSXStyle.dynamic([["4089411751", [theme.palette.background, stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
    }, /*#__PURE__*/React.createElement("div", {
      className: _JSXStyle.dynamic([["4089411751", [theme.palette.background, stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
    }, column.label, /*#__PURE__*/React.createElement("br", {
      className: _JSXStyle.dynamic([["4089411751", [theme.palette.background, stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
    }), /*#__PURE__*/React.createElement("span", {
      style: {
        textAlign: 'center'
      },
      className: _JSXStyle.dynamic([["4089411751", [theme.palette.background, stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
    }, column.text)));
  })), showFilters && /*#__PURE__*/React.createElement("tr", {
    className: _JSXStyle.dynamic([["4089411751", [theme.palette.background, stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
  }, generateFilterInputs())), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "4089411751",
    dynamic: [theme.palette.background, stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
  }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;background-color:".concat(theme.palette.background, ";font-size:inherit;").concat(stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", ";}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:").concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
};
TableHead.displayName = 'TableHead';
export default TableHead;