'use strict';

const index = require('./index-8277cbb3.js');
const JSS = require('./JSS-8503a151.js');
const mixins = require('./mixins-4761d472.js');

function GenericTableView(props) {
  const { states, data, callbacks, elements } = props;
  const { columns, rows } = elements;
  const { show } = states;
  const hiddenCols = data.hiddenColumns && data.hiddenColumns.split(",").map(Number);
  const mobile = "@media (max-width: " + data.mdBreakpoint + "px)";
  const tablet = `@media (min-width: ${Boolean(rows.length < 2) ? data.mdBreakpoint : data.smBreakpoint}px) and (max-width: ${data.mdBreakpoint}px)`;
  // Due to mobile media queries being dependant on props, not feasiable to move out of render function
  const style = {
    Table: {
      borderCollapse: "collapse",
      tableLayout: "fixed",
      width: "100%",
      "& tbody tr": {
        borderBottom: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
        "&:first-child": {
          borderTop: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
        },
      },
      "& th": {
        paddingBottom: "var(--sl-spacing-small)",
        textAlign: "left",
        fontWeight: "var(--sl-font-weight-semibold)",
        overflowWrap: "anywhere",
      },
      "& td": {
        padding: "var(--sl-spacing-small)",
        paddingLeft: "0",
        overflow: "hidden",
        textOverflow: "ellipsis",
      },
      [mobile]: {
        "& thead": {
          display: "none",
        },
        "& tr": {
          display: "block",
          background: "inherit",
          border: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
          boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
          borderRadius: "var(--sl-border-radius-large)",
          padding: "var(--sl-spacing-medium)",
          fontSize: "var(--sl-font-size-small)",
          marginBottom: "var(--sl-spacing-large)",
        },
        "& td": {
          display: "grid",
          borderTop: "none",
          padding: "0",
          marginBottom: "var(--sl-spacing-medium)",
          "&:first-child": {
            textAlign: "left",
          },
          "&:before": {
            content: "attr(data-label)",
            whiteSpace: "nowrap",
          },
          "&:last-child": {
            marginBottom: "0",
          },
          "&.hidden:before": {
            content: "none",
          },
        },
      },
      [tablet]: {
        "& tbody": {
          display: "grid",
          gridTemplateColumns: "0.5fr 0.5fr",
          gap: "25px",
        },
      },
    },
    ButtonContainer: {
      display: "flex",
      "justify-content": "flex-end",
      "margin-top": "var(--sl-spacing-small)",
      ...mixins.gap({ direction: "row", size: "var(--sl-spacing-small)" }),
    },
    ButtonDisabled: {
      "&::part(base)": {
        opacity: "0.25",
      },
    },
  };
  const sheet = JSS.createStyleSheet(style);
  const styleString = sheet.toString();
  if (show === "empty")
    return elements.emptyElement;
  return (index.h("div", null,
    index.h("style", { type: "text/css" }, styleString),
    index.h("table", { class: sheet.classes.Table },
      data.textOverrides.showLabels && (index.h("thead", null,
        index.h("tr", null, columns === null || columns === void 0 ? void 0 : columns.map((column) => {
          if (typeof column === "string")
            return index.h("th", null, column);
          return index.h("th", { style: { width: "30px" } }, column);
        })))),
      index.h("tbody", null,
        show === "loading" && elements.loadingElement,
        show === "rows" && (rows === null || rows === void 0 ? void 0 : rows.map((row, i) => {
          return (index.h("tr", { style: {
              borderTop: `${!data.textOverrides.showLabels && i === 0 ? "none" : ""}`,
            }, part: "table-row" }, row.map((cell, j) => {
            return typeof columns[j] === "string" ? (index.h("td", { class: (hiddenCols === null || hiddenCols === void 0 ? void 0 : hiddenCols.includes(j)) ? "hidden" : "", "data-label": columns[j] + ":", style: {
                gridTemplateColumns: (hiddenCols === null || hiddenCols === void 0 ? void 0 : hiddenCols.includes(j)) ? "1fr"
                  : "0.5fr 0.5fr",
              } }, cell)) : (index.h("td", null, cell));
          })));
        })))),
    index.h("div", { class: sheet.classes.ButtonContainer, part: states.namespace + "-button-wrapper" },
      index.h("sl-button", { size: "small", disabled: !states.hasPrev, loading: show === "loading", onClick: callbacks.prevPage, exportparts: "base: secondarybutton-base", class: !states.hasPrev ? sheet.classes.ButtonDisabled : "" }, data.textOverrides.prevLabel),
      index.h("sl-button", { size: "small", loading: show === "loading", disabled: !states.hasNext, onClick: callbacks.nextPage, exportparts: "base: secondarybutton-base", class: !states.hasNext ? sheet.classes.ButtonDisabled : "" }, data.textOverrides.moreLabel))));
}

exports.GenericTableView = GenericTableView;
