'use strict';

var jsxRuntime = require('react/jsx-runtime');
var reactRouterDom = require('react-router-dom');
var react = require('@chakra-ui/react');
var Section = require('../Section/Section.cjs');
var colors = require('../../styles/colors.cjs');
var Empty = require('../Empty/Empty.cjs');
var md = require('react-icons/md');

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 ResourceListRowItem = ({
  row,
  testId,
  templateColumns,
  columns,
  lastRow,
  alignSelf,
  content,
  isExpandable
}) => {
  const borderColor = react.useColorModeValue("gray.100", "gray.700");
  const lastRowStyle = { borderRadius: "0 0 5px 5px" };
  const onClickStyle = { cursor: "pointer" };
  const { isOpen, getButtonProps } = react.useDisclosure();
  const buttonProps = getButtonProps();
  return /* @__PURE__ */ jsxRuntime.jsxs(
    react.Box,
    __spreadProps(__spreadValues({
      "data-testid": testId,
      py: 3.5,
      px: 6,
      borderBottom: "1px solid",
      borderColor,
      _last: lastRow ? lastRowStyle : {},
      style: row.onClick ? onClickStyle : {}
    }, buttonProps), {
      children: [
        /* @__PURE__ */ jsxRuntime.jsxs(react.Grid, { templateColumns, children: [
          columns.map((column) => {
            const thisRow = row;
            return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { justifyContent: column == null ? void 0 : column.align, alignSelf, children: thisRow[column.key] }, column.key);
          }),
          isExpandable && /* @__PURE__ */ jsxRuntime.jsx(
            react.Icon,
            {
              as: md.MdKeyboardArrowUp,
              boxSize: 6,
              "data-testid": "content-chevron-icon",
              __css: {
                // Mirror the Accordion behavior
                transform: isOpen ? void 0 : "rotate(-180deg)",
                transition: "transform 0.2s",
                transformOrigin: "center"
              }
            }
          )
        ] }),
        isExpandable ? /* @__PURE__ */ jsxRuntime.jsx(react.Collapse, { in: isOpen, animateOpacity: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.Box, { mt: 6, mb: 4, "data-testid": "content-wrapper", children: content }) }) : /* @__PURE__ */ jsxRuntime.jsx(react.Box, { "data-testid": "content-wrapper", children: content })
      ]
    })
  );
};
function ResourceList({
  testId,
  columns,
  rows,
  alignSelf,
  showColumns = true,
  isExpandable = false
}) {
  const templateColumns = columns.map((item) => `minmax(0, ${item.width || "1fr"})`).join(" ");
  const isAccordionResourceList = rows == null ? void 0 : rows.some(({ content }) => !!content);
  const gridTemplateColumns = isAccordionResourceList ? `${templateColumns} minmax(0, 0.1fr)` : templateColumns;
  const style = react.useColorModeValue(
    {
      sectionBorderColor: "gray.200",
      borderColor: "gray.100",
      background: "gray.50",
      boxShadow: "0px 0px 1px 1px var(--chakra-colors-blackAlpha-200)"
    },
    {
      sectionBorderColor: "gray.700",
      borderColor: "gray.700",
      background: "gray.800",
      boxShadow: "0px 0px 1px 1px var(--chakra-colors-whiteAlpha-200)"
    }
  );
  const selectStyle = {
    "> div": {
      position: "relative",
      zIndex: 2,
      bg: "gray.50",
      _dark: {
        bg: "gray.800"
      }
    }
  };
  const focusStyle = __spreadProps(__spreadValues({}, selectStyle), {
    outline: `${colors.colors.focus["500"]} auto 2px !important`
  });
  return /* @__PURE__ */ jsxRuntime.jsx(Section["default"], { p: 0, border: "1px solid", borderColor: style.sectionBorderColor, children: /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { spacing: "0px", children: [
    showColumns && /* @__PURE__ */ jsxRuntime.jsx(
      react.Box,
      {
        py: 2,
        px: 6,
        borderBottom: "1px solid",
        borderColor: style.sectionBorderColor,
        fontWeight: "600",
        background: style.background,
        fontSize: "sm",
        rounded: "lg",
        borderBottomRadius: "0",
        children: /* @__PURE__ */ jsxRuntime.jsx(react.Grid, { templateColumns: gridTemplateColumns, children: columns.map((header) => /* @__PURE__ */ jsxRuntime.jsx(
          react.Box,
          {
            "data-testid": `resource-list-column-${header.content}`,
            justifyContent: header.align,
            alignSelf: alignSelf || "center",
            children: header.content
          },
          header.key
        )) })
      }
    ),
    /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { spacing: "0px", children: [
      rows.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(Empty, {}),
      rows.map((_a, i) => {
        var _b = _a, { key, link, content } = _b, row = __objRest(_b, ["key", "link", "content"]);
        key = key || `resourceListItem--${i}`;
        if (link || row.onClick) {
          return /* @__PURE__ */ jsxRuntime.jsx(
            react.LinkBox,
            {
              as: reactRouterDom.Link,
              to: link || "",
              "data-testid": `${key}-link`,
              _hover: selectStyle,
              _focus: focusStyle,
              onClick: (event) => {
                if (row.onClick) {
                  event.preventDefault();
                  row.onClick(event);
                }
              },
              children: /* @__PURE__ */ jsxRuntime.jsx(
                ResourceListRowItem,
                {
                  testId,
                  templateColumns: gridTemplateColumns,
                  row,
                  columns,
                  lastRow: i === rows.length - 1,
                  alignSelf: alignSelf || "center"
                }
              )
            },
            key
          );
        }
        return /* @__PURE__ */ jsxRuntime.jsx(
          ResourceListRowItem,
          {
            testId,
            templateColumns: gridTemplateColumns,
            row,
            columns,
            lastRow: i === rows.length - 1,
            alignSelf: alignSelf || "center",
            isExpandable,
            content
          },
          key
        );
      })
    ] })
  ] }) });
}

module.exports = ResourceList;
//# sourceMappingURL=ResourceList.cjs.map
