"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DescriptionList = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const Description_1 = require("../Description");
const GuidTypography_1 = require("../GuidTypography");
const Tag_1 = require("../Tag");
const Typography_1 = require("../Typography");
const cva_1 = require("../utils/cva");
const constants_1 = require("./constants");
const styles_1 = require("./styles");
const useLogic_1 = require("./useLogic");
const utils_1 = require("./utils");
const descriptionList = (0, cva_1.cva)(constants_1.descriptionListClassnames.root, {
    variants: {
        variant: {
            contained: constants_1.descriptionListClassnames.contained,
            default: constants_1.descriptionListClassnames.default,
        },
    },
});
const descriptionItem = (0, cva_1.cva)(constants_1.descriptionListClassnames.item, {
    variants: {
        alignNameWidth: {
            true: constants_1.descriptionListClassnames.itemAlignNameWidth,
        },
    },
});
const DescriptionList = ({ items, variant: listVariant = 'default', title, direction, alignNameWidth, leader, ...props }) => {
    const { descriptionItems, descriptionListStyles } = (0, useLogic_1.useLogic)({
        items,
        alignNameWidth,
        leader,
    });
    const render = (0, react_1.useCallback)((value, optionProps) => {
        const { renderValue, color, canCopy, copyPosition, variant, copyText } = optionProps;
        if (renderValue) {
            return renderValue(value, optionProps);
        }
        if (variant === 'tag') {
            return ((0, jsx_runtime_1.jsx)(Description_1.Description.Value, { isHidePersonalData: optionProps.isHidePersonalData, children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { label: value, color: color, variant: "light" }) }));
        }
        if (variant === 'guid') {
            const tooltipProps = (0, utils_1.getTooltipProps)(canCopy);
            return ((0, jsx_runtime_1.jsx)(styles_1.StyledDescriptionValue, { canCopy: canCopy, "$isCopy": canCopy, color: color, copyPosition: copyPosition, copyText: copyText, children: (0, jsx_runtime_1.jsx)(GuidTypography_1.GuidTypography, { tooltipProps: tooltipProps, children: value }) }));
        }
        return ((0, jsx_runtime_1.jsx)(Description_1.Description.Value, { canCopy: canCopy, color: color, copyPosition: copyPosition, isHidePersonalData: optionProps.isHidePersonalData, children: value }));
    }, []);
    const renderTitle = () => {
        if (typeof title === 'string') {
            return ((0, jsx_runtime_1.jsx)(styles_1.Title, { variant: "h6", className: constants_1.descriptionListClassnames.title, children: title }));
        }
        return ((0, jsx_runtime_1.jsx)(styles_1.Title, { component: "div", className: constants_1.descriptionListClassnames.title, children: title }));
    };
    const renderNote = (note) => {
        if (typeof note === 'string') {
            return ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "textSecondary", className: constants_1.descriptionListClassnames.note, children: note }));
        }
        return note;
    };
    const renderItem = (value, name, options) => {
        const { nameMaxWidth, note, ...restOptions } = options || {};
        return ((0, jsx_runtime_1.jsxs)(styles_1.DescriptionWrapper, { className: descriptionItem({
                alignNameWidth: Boolean(alignNameWidth),
            }), children: [(0, jsx_runtime_1.jsxs)(Description_1.Description, { direction: direction, leader: leader, ...props, component: "div", children: [(0, jsx_runtime_1.jsx)(styles_1.StyledDescriptionName, { "$nameMaxWidth": nameMaxWidth, "$direction": direction, children: name }), render(value, restOptions)] }), note && renderNote(note)] }, `${name}:${value}`));
    };
    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: descriptionList({ variant: listVariant }), style: descriptionListStyles, children: [title && renderTitle(), descriptionItems.map((group, groupIndex) => ((0, jsx_runtime_1.jsx)(styles_1.ListWrapper, { "$direction": direction, "$hasDivider": groupIndex !== 0, "$variant": listVariant, children: group.map(({ name, value, options }) => renderItem(value, name, options)) }, groupIndex)))] }));
};
exports.DescriptionList = DescriptionList;
