import { __assign, __read, __rest, __spreadArray } from "tslib";
// @ts-nocheck
import './Collapse.css';
import React from 'react';
import { IconAdd } from '../../icons/IconAdd/IconAdd';
import { IconRemove } from '../../icons/IconRemove/IconRemove';
import { cn } from '../../utils/bem';
import { getSizeByMap } from '../../utils/getSizeByMap';
import { Grid, GridItem } from '../Grid/Grid';
import { Typography } from '../Typography/Typography';
import { CollapseIcon, collapseIconPropDirection, } from './CollapseIcon/CollapseIcon';
export var collapsePropSize = ['m', 'l', 's', 'xs', '2xs'];
export var collapsePropSizeDefault = collapsePropSize[0];
export var collapsePropView = ['primary', 'secondary'];
export var collapsePropViewDefault = collapsePropView[0];
export var collapsePropHorizontalSpace = [
    '3xs',
    '6xl',
    '5xl',
    '4xl',
    '3xl',
    '2xl',
    'xl',
    'l',
    'm',
    's',
    'xs',
    '2xs',
];
export var collapsePropIconPosition = ['left', 'right'];
export var collapsePropIconPositionDefault = collapsePropIconPosition[1];
export var collapsePropDirectionIcon = collapseIconPropDirection;
export var collapsePropDirectionIconDefault = collapsePropDirectionIcon[0];
export var collapsePropCloseDirectionIconDefault = collapsePropDirectionIcon[2];
export var cnCollapse = cn('Collapse');
export var sizeIconMap = {
    '2xs': 'xs',
    'xs': 'xs',
    's': 'xs',
    'm': 's',
    'l': 's'
};
export var sizeLabelMap = {
    m: 'tiny',
    l: 'lg'
};
export var sizeTitleTagMap = {
    l: 'h2',
    m: 'h3'
};
function renderSide(side) {
    var sides = side ? __spreadArray([], __read((Array.isArray(side) ? side : [side])), false) : [];
    return sides.map(function (item, index) { return (React.createElement("div", { className: cnCollapse('Side'), key: index }, item)); });
}
// eslint-disable-next-line @typescript-eslint/no-redeclare
export var Collapse = React.forwardRef(function (props, ref) {
    var label = props.label, _a = props.size, size = _a === void 0 ? collapsePropSizeDefault : _a, _b = props.view, view = _b === void 0 ? collapsePropViewDefault : _b, className = props.className, isOpen = props.isOpen, children = props.children, hoverEffect = props.hoverEffect, divider = props.divider, _c = props.icon, icon = _c === void 0 ? IconAdd : _c, _d = props.closeIcon, closeIcon = _d === void 0 ? IconRemove : _d, rightSide = props.rightSide, horizontalSpace = props.horizontalSpace, _e = props.iconPosition, iconPosition = _e === void 0 ? collapsePropIconPositionDefault : _e, _f = props.directionIcon, directionIcon = _f === void 0 ? collapsePropDirectionIconDefault : _f, _g = props.closeDirectionIcon, closeDirectionIcon = _g === void 0 ? collapsePropCloseDirectionIconDefault : _g, style = props.style, position = props.position, otherProps = __rest(props, ["label", "size", "view", "className", "isOpen", "children", "hoverEffect", "divider", "icon", "closeIcon", "rightSide", "horizontalSpace", "iconPosition", "directionIcon", "closeDirectionIcon", "style", "position"]);
    return (React.createElement("div", { ref: ref, className: cnCollapse({ size: size, view: view, horizontalSpace: horizontalSpace }, [className]), style: style },
        React.createElement("div", __assign({ className: cnCollapse('Label', {
                hoverEffect: hoverEffect,
                divider: divider,
                iconPosition: iconPosition
            }) }, otherProps),
            React.createElement(Grid, { breakpoints: { desktop: { cols: 12 } }, cols: "1" },
                React.createElement(GridItem, { breakpoints: { desktop: { colStart: position !== null && position !== void 0 ? position : 1, col: 12 } }, className: cnCollapse('Label-Inner'), col: "1" },
                    React.createElement(CollapseIcon, { className: cnCollapse('Icon', { position: iconPosition }), size: getSizeByMap(sizeIconMap, size), icon: icon, closeIcon: closeIcon, isOpen: isOpen, direction: directionIcon, closeDirection: closeDirectionIcon }),
                    React.createElement(Typography.Title, { className: cnCollapse('LabelText'), view: view, size: getSizeByMap(sizeLabelMap, size), as: getSizeByMap(sizeTitleTagMap, size) }, label),
                    iconPosition === 'left' && renderSide(rightSide)))),
        React.createElement("div", { className: cnCollapse('Body', { isOpen: isOpen }) },
            React.createElement("div", { className: cnCollapse('Content') }, children))));
});
