import { useLingui } from '../../../../../../node_modules/@lingui/react/dist/index.mjs';
import classNames from '../../../../../../_virtual/index.mjs';
import React__default from 'react';
import { Chevron } from '../../../assets/chevron.mjs';
import { getTransitionDuration } from '../atoms/animation.mjs';
import Column from '../atoms/Column.mjs';
import Typography from '../atoms/Typography.mjs';
import modules_4205e810 from './IDPConsentManifest.module.css.mjs';

const Item = ({ item, as = 'li' })=>{
    if (typeof item === 'string') {
        item = {
            text: item
        };
    }
    const summary = /*#__PURE__*/ React__default.createElement(Typography, {
        variant: "helper"
    }, item.text);
    const Element = as;
    if (!item.details?.length) {
        return /*#__PURE__*/ React__default.createElement(Element, {
            className: classNames(modules_4205e810.summaryNoDetail, modules_4205e810.borderBetween)
        }, summary);
    }
    return /*#__PURE__*/ React__default.createElement(Element, {
        className: modules_4205e810.borderBetween
    }, /*#__PURE__*/ React__default.createElement("details", {
        className: modules_4205e810.details
    }, /*#__PURE__*/ React__default.createElement("summary", {
        onClick: animateToggleDetail
    }, summary, /*#__PURE__*/ React__default.createElement(Chevron, {
        className: modules_4205e810.chevron,
        role: "presentation"
    })), /*#__PURE__*/ React__default.createElement("ul", {
        className: modules_4205e810.nestedList
    }, item.details?.map((details)=>/*#__PURE__*/ React__default.createElement(Typography, {
            as: "li",
            variant: "helper",
            key: details
        }, details)))));
};
const Section = ({ section })=>/*#__PURE__*/ React__default.createElement(Column, {
        gap: 2
    }, /*#__PURE__*/ React__default.createElement(Typography, {
        weight: "medium"
    }, section.header), /*#__PURE__*/ React__default.createElement("ul", {
        className: modules_4205e810.outerList
    }, section.items.map((item, i)=>/*#__PURE__*/ React__default.createElement(Item, {
            key: i,
            item: item
        }))));
const ConsentManifest = ({ manifest, clientName })=>{
    const { i18n: $__i18n, _: $__ } = useLingui();
    const sections = typeof manifest[0] === 'object' && 'header' in manifest[0] ? manifest : [
        {
            header: $__i18n._({
                id: "idpConsent.allowClientTo",
                message: "Allow {clientName} to:",
                values: {
                    clientName: clientName
                }
            }),
            items: manifest
        }
    ];
    return /*#__PURE__*/ React__default.createElement("div", {
        className: modules_4205e810.manifest
    }, sections.map((item, i)=>/*#__PURE__*/ React__default.createElement(Section, {
            key: i,
            section: item
        })));
};
const UngrantableScopes = ({ clientName, ungrantableScopeDescriptions })=>{
    const { i18n: $__i18n, _: $__ } = useLingui();
    if (!ungrantableScopeDescriptions.length) return null;
    // Map it to a consent item so we can reuse <Item>
    const item = {
        text: $__i18n._({
            id: "idpConsent.noPermissionsToGrant",
            message: "You do not have permissions to grant {clientName} access to some of the requested scopes.",
            values: {
                clientName: clientName
            }
        }),
        details: ungrantableScopeDescriptions
    };
    return /*#__PURE__*/ React__default.createElement("div", {
        className: modules_4205e810.ungrantable
    }, /*#__PURE__*/ React__default.createElement(Item, {
        item: item,
        as: "div"
    }));
};
function animateToggleDetail(evt) {
    const parent = evt.currentTarget.parentElement;
    if (parent?.tagName !== 'DETAILS') return;
    const detail = parent;
    evt.preventDefault();
    const wasOpen = detail.open;
    const summaryHeight = evt.currentTarget.clientHeight + 'px';
    const detailStyles = getComputedStyle(detail);
    const closedHeight = `calc(${summaryHeight} + ${detailStyles.paddingTop} + ${detailStyles.paddingBottom})`;
    const animationOptions = {
        duration: getTransitionDuration(evt.currentTarget),
        easing: 'ease-in-out'
    };
    if (wasOpen) {
        const detailHeight = detail.clientHeight + 'px';
        const animation = detail.animate([
            {
                height: detailHeight
            },
            {
                height: closedHeight
            }
        ], animationOptions);
        // Need to delay open being changed, otherwise the content will disappear immediately
        // while the animation is still running
        animation.finished.then(()=>{
            detail.open = false;
        });
    } else {
        detail.open = true;
        requestAnimationFrame(()=>{
            const detailHeight = detail.clientHeight + 'px';
            detail.animate([
                {
                    height: closedHeight
                },
                {
                    height: detailHeight
                }
            ], animationOptions);
        });
    }
}

export { ConsentManifest, UngrantableScopes };
//# sourceMappingURL=IDPConsentManifest.mjs.map
