import { jsx, jsxs } from 'react/jsx-runtime';
import { Link } from 'react-router-dom';
import { useColorModeValue, Stack, Box, Grid, LinkBox } from '@chakra-ui/react';
import Section from '../Section/Section.js';
import { colors } from '../../styles/colors.js';
import Empty from '../Empty/Empty.js';

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
  var target = {};
  for (var prop in source)
    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
      target[prop] = source[prop];
  if (source != null && __getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(source)) {
      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
        target[prop] = source[prop];
    }
  return target;
};
const px = 6;
const RowItem = ({ row, testId, templateColumns, columns, lastRow, alignSelf }) => {
  const borderColor = useColorModeValue("gray.100", "gray.700");
  const lastRowStyle = { borderRadius: "0 0 5px 5px" };
  const onClickStyle = { cursor: "pointer" };
  return /* @__PURE__ */ jsx(
    Box,
    {
      "data-testid": testId,
      py: 3.5,
      px,
      borderBottom: "1px solid",
      borderColor,
      _last: lastRow ? lastRowStyle : {},
      style: row.onClick ? onClickStyle : {},
      children: /* @__PURE__ */ jsx(Grid, { templateColumns, children: columns.map((column) => {
        const thisRow = row;
        return /* @__PURE__ */ jsx(Box, { justifyContent: column == null ? void 0 : column.align, alignSelf, children: thisRow[column.key] }, column.key);
      }) })
    }
  );
};
function ResourceList({ testId, columns, rows, alignSelf }) {
  const templateColumns = columns.map((item) => `minmax(0, ${item.width || "1fr"})`).join(" ");
  const style = useColorModeValue(
    {
      sectionBorderColor: "gray.200",
      borderColor: "gray.100",
      background: "gray.50",
      boxShadow: " 0px 0px 1px 1px rgba(0,0,0,0.2)"
    },
    {
      sectionBorderColor: "gray.700",
      borderColor: "gray.700",
      background: "gray.800",
      boxShadow: " 0px 0px 1px 1px rgba(255,255,255,0.2)"
    }
  );
  const selectStyle = {
    "> div": {
      position: "relative",
      zIndex: 2,
      bg: "gray.50",
      _dark: {
        bg: "gray.800"
      }
    }
  };
  const focusStyle = __spreadProps(__spreadValues({}, selectStyle), {
    outline: `${colors.focus["500"]} auto 2px !important`
  });
  return /* @__PURE__ */ jsx(Section, { p: 0, border: "1px solid", borderColor: style.sectionBorderColor, children: /* @__PURE__ */ jsxs(Stack, { spacing: "0px", children: [
    /* @__PURE__ */ jsx(
      Box,
      {
        py: 2,
        px,
        borderBottom: "1px solid",
        borderColor: style.sectionBorderColor,
        fontWeight: "600",
        background: style.background,
        fontSize: "sm",
        rounded: "lg",
        borderBottomRadius: "0",
        children: /* @__PURE__ */ jsx(Grid, { templateColumns, children: columns.map((header) => /* @__PURE__ */ jsx(
          Box,
          {
            "data-testid": `resource-list-column-${header.content}`,
            justifyContent: header.align,
            alignSelf: alignSelf || "center",
            children: header.content
          },
          header.key
        )) })
      }
    ),
    /* @__PURE__ */ jsxs(Stack, { spacing: "0px", children: [
      rows.length === 0 && /* @__PURE__ */ jsx(Empty, {}),
      rows.map(
        (_a, i) => {
          var _b = _a, { key, link } = _b, row = __objRest(_b, ["key", "link"]);
          return link || row.onClick ? /* @__PURE__ */ jsx(
            LinkBox,
            {
              as: Link,
              to: link || "",
              "data-testid": `${key}-link`,
              _hover: selectStyle,
              _focus: focusStyle,
              onClick: (event) => {
                if (row.onClick) {
                  event.preventDefault();
                  row.onClick(event);
                }
              },
              children: /* @__PURE__ */ jsx(
                RowItem,
                {
                  testId,
                  templateColumns,
                  row,
                  columns,
                  lastRow: i === rows.length - 1,
                  alignSelf: alignSelf || "center"
                }
              )
            },
            key
          ) : /* @__PURE__ */ jsx(
            RowItem,
            {
              testId,
              templateColumns,
              row,
              columns,
              lastRow: i === rows.length - 1,
              alignSelf: alignSelf || "center"
            },
            key
          );
        }
      )
    ] })
  ] }) });
}

export { ResourceList as default };
//# sourceMappingURL=ResourceList.js.map
