import { h, Host } from "@stencil/core";
export class PdsModalContent {
    constructor() {
        /**
         * The border style for the content area. When not explicitly set, automatically determined based on scroll state.
         * @default 'none'
         */
        this.border = 'none';
        this.contentMaxHeight = 'none';
        /**
         * Tracks whether the border prop was explicitly set by the user
         */
        this.userSetBorder = false;
    }
    componentWillLoad() {
        // Check if border was explicitly set via attribute or property
        const borderAttr = this.el.getAttribute('border');
        const hasBorderAttribute = borderAttr !== null;
        // If border attribute exists or border prop is not the default, user set it
        this.userSetBorder = hasBorderAttribute || this.border !== 'none';
    }
    componentDidLoad() {
        this.calculateMaxHeight();
        // Set up resize listener
        window.addEventListener('resize', this.handleResize.bind(this));
        // Only set up scroll listener for border updates if borders are managed automatically
        if (!this.userSetBorder) {
            setTimeout(() => {
                // The scroll happens on the component element itself (this.el), not the inner div
                this.el.addEventListener('scroll', this.handleScroll.bind(this));
                // Initial border update after everything is set up
                setTimeout(() => this.updateBorders(), 100);
            }, 100);
        }
    }
    disconnectedCallback() {
        window.removeEventListener('resize', this.handleResize.bind(this));
        // Clean up scroll listener only if it was set up
        if (!this.userSetBorder) {
            this.el.removeEventListener('scroll', this.handleScroll.bind(this));
        }
        if (this.mutationObserver) {
            this.mutationObserver.disconnect();
        }
    }
    /**
     * Handle scroll events
     */
    handleScroll() {
        this.updateBorders();
    }
    /**
     * Handle resize events
     */
    handleResize() {
        this.calculateMaxHeight();
        // Update borders after resize as content scrollability might change
        setTimeout(() => this.updateBorders(), 50);
    }
    /**
     * Updates border visibility based on scroll state (only if not user-defined)
     */
    updateBorders() {
        // If user explicitly set a border value, don't override it
        if (this.userSetBorder) {
            return;
        }
        // Find the modal element (parent of this component)
        const modalElement = this.el.closest('pds-modal');
        if (!modalElement)
            return;
        // Only apply border logic if modal is scrollable
        const isModalScrollable = modalElement.scrollable !== false;
        if (!isModalScrollable) {
            this.border = 'none';
            return;
        }
        // The scrollable element is the component itself (this.el), not the inner div
        const scrollableElement = this.el;
        // Check if content is actually scrollable
        const isContentScrollable = scrollableElement.scrollHeight > scrollableElement.clientHeight;
        if (!isContentScrollable) {
            this.border = 'none';
            return;
        }
        // Determine border position based on scroll position
        const { scrollTop, scrollHeight, clientHeight } = scrollableElement;
        const scrollBottom = scrollTop + clientHeight;
        // More generous tolerance for scroll detection (3px instead of 1px)
        const tolerance = 3;
        const isAtTop = scrollTop <= tolerance;
        const isAtBottom = scrollBottom >= scrollHeight - tolerance;
        if (isAtTop && isAtBottom) {
            // Content fits exactly, no borders needed
            this.border = 'none';
        }
        else if (isAtTop && !isAtBottom) {
            // At top, show bottom border only
            this.border = 'bottom';
        }
        else if (!isAtTop && isAtBottom) {
            // At bottom, show top border only
            this.border = 'top';
        }
        else {
            // In middle, show both borders
            this.border = 'both';
        }
    }
    /**
     * Calculates the max-height based on header and footer heights
     */
    calculateMaxHeight() {
        // Find the modal element (parent of this component)
        const modalElement = this.el.closest('pds-modal');
        if (!modalElement)
            return;
        // Check if the parent modal is scrollable
        const isScrollable = modalElement.scrollable !== false;
        setTimeout(() => {
            // If modal is not scrollable, don't apply max-height constraints
            if (!isScrollable) {
                this.contentMaxHeight = 'none';
                const contentElement = this.el.querySelector('.pds-modal-content');
                if (contentElement) {
                    contentElement.style.maxHeight = 'none';
                }
                return;
            }
            // Find header and footer elements
            const headerElement = modalElement.querySelector('pds-modal-header');
            const footerElement = modalElement.querySelector('pds-modal-footer');
            // Get header and footer heights
            const headerHeight = headerElement ? headerElement.offsetHeight : 0;
            const footerHeight = footerElement ? footerElement.offsetHeight : 0;
            // Set the max-height as a calculation
            if (headerHeight > 0 || footerHeight > 0) {
                // Calculate the available height by subtracting:
                // 1. Header and footer heights
                // 2. Modal padding (48px)
                // 3. Additional space for modal positioning (6vh)
                // 4. Extra adjustment for perfect fit (50px)
                const viewportAdjustment = Math.round(window.innerHeight * 0.06); // 6vh approximation
                const totalReduction = headerHeight + footerHeight + 48 + viewportAdjustment + 50;
                // Set the content max height
                this.contentMaxHeight = `calc(100vh - ${totalReduction}px)`;
                // Apply the style directly to ensure it takes effect
                const contentElement = this.el.querySelector('.pds-modal-content');
                if (contentElement) {
                    contentElement.style.maxHeight = this.contentMaxHeight;
                }
            }
            else {
                this.contentMaxHeight = 'none'; // Default fallback
            }
            // Update borders after height calculations with longer delay
            setTimeout(() => this.updateBorders(), 150);
        }, 100); // Delay to ensure DOM is fully rendered
        // Set up mutation observer if not already done
        if (!this.mutationObserver && modalElement) {
            this.mutationObserver = new MutationObserver(() => {
                this.calculateMaxHeight();
            });
            // Observe changes to the modal's children
            this.mutationObserver.observe(modalElement, {
                childList: true,
                subtree: true,
                attributes: true,
                attributeFilter: ['style', 'class']
            });
        }
    }
    render() {
        // Only apply max-height style if it's not 'none'
        const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
        return (h(Host, { key: 'fae42c1fc151e4855cd2c731802c15851473be79' }, h("div", { key: 'feb61d6a7227d8113b931df6280358cd9b4fe583', class: {
                'pds-modal-content': true,
                [`pds-modal-content--border-${this.border}`]: true
            }, style: styleObj, tabindex: "-1" }, h("slot", { key: '1c9e55ecd1ad353699e5a4590ee04c9005719f6d' }))));
    }
    static get is() { return "pds-modal-content"; }
    static get originalStyleUrls() {
        return {
            "$": ["pds-modal-content.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pds-modal-content.css"]
        };
    }
    static get properties() {
        return {
            "border": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "'none' | 'both' | 'top' | 'bottom'",
                    "resolved": "\"both\" | \"bottom\" | \"none\" | \"top\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "'none'"
                        }],
                    "text": "The border style for the content area. When not explicitly set, automatically determined based on scroll state."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "border",
                "defaultValue": "'none'"
            }
        };
    }
    static get states() {
        return {
            "contentMaxHeight": {}
        };
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=pds-modal-content.js.map
