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