import { Prop, toNative } from 'vue-facing-decorator';
import { globalState } from '../../app/global-state';
import TsxComponent, { Component } from '../../app/vuetsx';
import { PortalUtils } from '../../common/utils/utils';

interface CollapseArgs {
	cssClass?: string;
}

@Component
class CollapseComponent extends TsxComponent<CollapseArgs> implements CollapseArgs {
	@Prop() cssClass?: string;
	uuid: string = null;

	mounted() {
		this.uuid = `clp-${PortalUtils.randomString(6)}`;
	}

	toggle() {
		if (!globalState.windowExists) {
			return;
		}

		this.getInnerButton()?.click();
	}

	isShown(): boolean {
		if (!globalState.windowExists) {
			return false;
		}

		return this.getInnerButton().getAttribute('aria-expanded') == 'true';
	}

	private getInnerButton() {
		return document.getElementById(`${this.uuid}-btn`);
	}

	render(h) {
		return (
			<div class="collapse" id={this.uuid}>
				<button style="display:none;" id={`${this.uuid}-btn`} type="button" data-bs-toggle="collapse" data-bs-target={`#${this.uuid}`} aria-expanded="false" aria-controls={this.uuid}></button>

				<div class={`collapse-inner${this.cssClass != null ? ` ${this.cssClass}` : ''}`}>
					{this.$slots.default}
				</div>
			</div>
		);
	}
}

const Collapse = toNative(CollapseComponent);
export default Collapse;