import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
import * as __WEBPACK_EXTERNAL_MODULE_react_router_dom__ from "react-router-dom";
import * as __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__ from "@chakra-ui/react";
import * as __WEBPACK_EXTERNAL_MODULE__Section_Section_mjs__ from "../Section/Section.mjs";
import * as __WEBPACK_EXTERNAL_MODULE__styles_colors_mjs__ from "../../styles/colors.mjs";
import * as __WEBPACK_EXTERNAL_MODULE__Empty_Empty_mjs__ from "../Empty/Empty.mjs";
import * as __WEBPACK_EXTERNAL_MODULE_react_icons_md__ from "react-icons/md";
const ResourceListRowItem = ({ row, testId, templateColumns, columns, lastRow, alignSelf, content, isExpandable })=>{
    const borderColor = (0, __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.useColorModeValue)('gray.100', 'gray.700');
    const lastRowStyle = {
        borderRadius: '0 0 5px 5px'
    };
    const onClickStyle = {
        cursor: 'pointer'
    };
    const { isOpen, getButtonProps } = (0, __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.useDisclosure)();
    const buttonProps = getButtonProps();
    return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Box, {
        "data-testid": testId,
        py: 3.5,
        px: 6,
        borderBottom: "1px solid",
        borderColor: borderColor,
        _last: lastRow ? lastRowStyle : {},
        style: row.onClick ? onClickStyle : {},
        ...buttonProps
    }, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Grid, {
        templateColumns: templateColumns
    }, columns.map((column)=>{
        const thisRow = row;
        return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Box, {
            key: column.key,
            justifyContent: column?.align,
            alignSelf: alignSelf
        }, thisRow[column.key]);
    }), isExpandable && /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Icon, {
        as: __WEBPACK_EXTERNAL_MODULE_react_icons_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__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Collapse, {
        in: isOpen,
        animateOpacity: true
    }, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Box, {
        mt: 6,
        mb: 4,
        "data-testid": "content-wrapper"
    }, content)) : /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Box, {
        "data-testid": "content-wrapper"
    }, 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?.some(({ content })=>!!content);
    const gridTemplateColumns = isAccordionResourceList ? `${templateColumns} minmax(0, 0.1fr)` : templateColumns;
    const style = (0, __WEBPACK_EXTERNAL_MODULE__chakra_ui_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'
            }
        }
    };
    // Note: LinkBox defaultProps are not working in `./styles/components` so we must set outline color here
    const focusStyle = {
        ...selectStyle,
        outline: `${__WEBPACK_EXTERNAL_MODULE__styles_colors_mjs__.colors.focus["500"]} auto 2px !important`
    };
    return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__Section_Section_mjs__["default"], {
        p: 0,
        border: "1px solid",
        borderColor: style.sectionBorderColor
    }, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Stack, {
        spacing: "0px"
    }, showColumns && /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Box, {
        py: 2,
        px: 6,
        borderBottom: "1px solid",
        borderColor: style.sectionBorderColor,
        fontWeight: "600",
        background: style.background,
        fontSize: "sm",
        rounded: "lg",
        borderBottomRadius: "0"
    }, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Grid, {
        templateColumns: gridTemplateColumns
    }, columns.map((header)=>/*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Box, {
            "data-testid": `resource-list-column-${header.content}`,
            key: header.key,
            justifyContent: header.align,
            alignSelf: alignSelf || 'center'
        }, header.content)))), /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Stack, {
        spacing: "0px"
    }, 0 === rows.length && /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__Empty_Empty_mjs__["default"], null), rows.map(({ key, link, content, ...row }, i)=>{
        // generate key if none is passed in
        key = key || `resourceListItem--${i}`;
        if (link || row.onClick) return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.LinkBox, {
            as: __WEBPACK_EXTERNAL_MODULE_react_router_dom__.Link,
            key: key,
            to: link || '',
            "data-testid": `${key}-link`,
            _hover: selectStyle,
            _focus: focusStyle,
            onClick: (event)=>{
                if (row.onClick) {
                    event.preventDefault();
                    row.onClick(event);
                }
            }
        }, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(ResourceListRowItem, {
            testId: testId,
            templateColumns: gridTemplateColumns,
            row: row,
            columns: columns,
            lastRow: i === rows.length - 1,
            alignSelf: alignSelf || 'center'
        }));
        return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(ResourceListRowItem, {
            key: key,
            testId: testId,
            templateColumns: gridTemplateColumns,
            row: row,
            columns: columns,
            lastRow: i === rows.length - 1,
            alignSelf: alignSelf || 'center',
            isExpandable: isExpandable,
            content: content
        });
    }))));
}
/* ESM default export */ const ResourceList_rslib_entry_ = ResourceList;
export { ResourceList_rslib_entry_ as default };
