/**
 * @license
 * Copyright 2023 Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
import { getShadowElement } from '@tylertech/forge-core';
import { BaseAdapter } from '../core/base/base-adapter';
import { EXPANSION_PANEL_CONSTANTS } from './expansion-panel-constants';
export class ExpansionPanelAdapter extends BaseAdapter {
    constructor(component) {
        super(component);
        this._headerElement = getShadowElement(this._component, EXPANSION_PANEL_CONSTANTS.selectors.HEADER);
        this._contentElement = getShadowElement(this._component, EXPANSION_PANEL_CONSTANTS.selectors.CONTENT);
        this._headerSlotElement = getShadowElement(this._component, EXPANSION_PANEL_CONSTANTS.selectors.HEADER_SLOT);
    }
    initialize(open, orientation = 'vertical') {
        const assignedNodes = this._headerElement.children[0].assignedNodes();
        this.setHeaderVisibility(!!assignedNodes.length);
        if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
            this._contentElement.style.height = '';
            this._contentElement.style.width = '0px';
        }
        if (open) {
            if (orientation === 'vertical') {
                this._contentElement.style.height = '';
            }
            else {
                this._contentElement.style.width = '';
            }
            this._contentElement.style.removeProperty('opacity');
            this._contentElement.style.removeProperty('visibility');
            const openIconElement = this._component.querySelector(EXPANSION_PANEL_CONSTANTS.selectors.OPEN_ICON);
            if (openIconElement) {
                openIconElement.open = true;
            }
        }
    }
    setHeaderVisibility(visible) {
        if (visible) {
            this._headerElement.style.display = '';
        }
        else {
            this._headerElement.style.display = 'none';
        }
    }
    setOpenState(opening, orientation = EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_VERTICAL, animate = true) {
        const assignedNodes = this._contentElement.children[0].assignedNodes();
        const openIconElement = this._component.querySelector(EXPANSION_PANEL_CONSTANTS.selectors.OPEN_ICON);
        if (animate && assignedNodes && assignedNodes.length && assignedNodes[0]) {
            const transitionEndListener = ({ propertyName }) => {
                // If the state has changed since it started, then ignore the transition
                if (this._component.open !== opening) {
                    this._contentElement.removeEventListener('transitionend', transitionEndListener);
                    return;
                }
                if (propertyName === 'height' || propertyName === 'width') {
                    this._contentElement.removeEventListener('transitionend', transitionEndListener);
                    this._contentElement.style.removeProperty('transition');
                    if (opening) {
                        if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
                            this._contentElement.style.width = '';
                        }
                        else {
                            this._contentElement.style.height = '';
                        }
                        this._contentElement.style.removeProperty('opacity');
                    }
                    else {
                        // We set to hidden to ensure that collapsed elements are non-interactive
                        this._contentElement.style.visibility = 'hidden';
                    }
                }
            };
            this._contentElement.addEventListener('transitionend', transitionEndListener);
            if (opening) {
                if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
                    this._contentElement.style.width = '0px';
                }
                else {
                    this._contentElement.style.height = '0px';
                }
                this._contentElement.style.opacity = '0';
                this._contentElement.style.removeProperty('visibility');
            }
            else {
                if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
                    this._contentElement.style.width = `${this._contentElement.scrollWidth}px`;
                }
                else {
                    this._contentElement.style.height = `${this._contentElement.scrollHeight}px`;
                }
                this._contentElement.style.opacity = '1';
            }
            if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
                this._contentElement.style.transition = EXPANSION_PANEL_CONSTANTS.strings.EXPANSION_HORIZONTAL_TRANSITION;
            }
            else {
                this._contentElement.style.transition = EXPANSION_PANEL_CONSTANTS.strings.EXPANSION_VERTICAL_TRANSITION;
            }
            this._activeAnimationFrame = window.requestAnimationFrame(() => {
                this._activeAnimationFrame = window.requestAnimationFrame(() => {
                    this._activeAnimationFrame = undefined;
                    if (opening) {
                        if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
                            this._contentElement.style.width = `${this._contentElement.scrollWidth}px`;
                        }
                        else {
                            this._contentElement.style.height = `${this._contentElement.scrollHeight}px`;
                        }
                        this._contentElement.style.opacity = '1';
                        if (openIconElement) {
                            openIconElement.open = true;
                        }
                    }
                    else {
                        if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
                            this._contentElement.style.width = '0px';
                        }
                        else {
                            this._contentElement.style.height = '0px';
                        }
                        this._contentElement.style.opacity = '0';
                        if (openIconElement) {
                            openIconElement.open = false;
                        }
                    }
                });
            });
        }
        else {
            if (this._activeAnimationFrame) {
                window.cancelAnimationFrame(this._activeAnimationFrame);
                this._activeAnimationFrame = undefined;
            }
            this._contentElement.style.removeProperty('transition');
            if (opening) {
                if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
                    this._contentElement.style.width = '';
                }
                else {
                    this._contentElement.style.height = '';
                }
                this._contentElement.style.removeProperty('visibility');
                this._contentElement.style.removeProperty('opacity');
                if (openIconElement) {
                    openIconElement.open = true;
                }
            }
            else {
                if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
                    this._contentElement.style.width = '0px';
                }
                else {
                    this._contentElement.style.height = '0px';
                }
                this._contentElement.style.opacity = '0';
                this._contentElement.style.visibility = 'hidden';
                if (openIconElement) {
                    openIconElement.open = false;
                }
            }
        }
    }
    registerClickListener(listener) {
        this._headerElement.addEventListener('click', listener);
    }
    deregisterClickListener(listener) {
        this._headerElement.removeEventListener('click', listener);
    }
    registerKeydownListener(listener) {
        this._headerElement.addEventListener('keydown', listener);
    }
    deregisterKeydownListener(listener) {
        this._headerElement.removeEventListener('keydown', listener);
    }
    registerHeaderSlotListener(listener) {
        this._headerSlotElement.addEventListener('slotchange', listener);
    }
    deregisterHeaderSlotListener(listener) {
        this._headerSlotElement.removeEventListener('slotchange', listener);
    }
}
