import { Prop, toNative } from 'vue-facing-decorator';
import TsxComponent, { Component } from '../../app/vuetsx';
import { ModalUtils } from '../modal/modal-utils';
import './css/index.css';

interface LongContentContainerArgs {
	maxHeight?: string;
	cssClass?: string;
	showMoreText?: string;
	showLessText?: string;
	renderShowMore?: (h) => void;
}

@Component
class LongContentContainerComponent extends TsxComponent<LongContentContainerArgs> implements LongContentContainerArgs {
	@Prop() maxHeight?: string;
	@Prop() cssClass?: string;
	@Prop() showMoreText?: string;
	@Prop() showLessText?: string;
	@Prop() renderShowMore?: (h) => void;
	expansionNeeded: boolean = null;
	isExpanded: boolean = false;

	mounted() {
		ModalUtils.handleModalMountDelay(this, () => {
			this.reMeasure();
		});
	}

	updated() {
		ModalUtils.handleModalMountDelay(this, () => {
			this.reMeasure();
		});
	}

	getRootStyle() {
		if (this.maxHeight?.length > 0) {
			return `max-height:${this.maxHeight}`;
		}

		return null;
	}

	getToggleButtonText(): string {
		if (this.isExpanded) {
			return this.showLessText;
		} else {
			return this.showMoreText;
		}
	}

	toggleIsExpanded() {
		this.isExpanded = !this.isExpanded;
	}

	reMeasure() {
		if (this.isExpanded) {
			return;
		}

		const $el = this.$refs.innerContent as HTMLElement;
		const $root = $el.parentElement;
		const scrollHeight = $el.scrollHeight;

		if (scrollHeight > $root.clientHeight) {
			if (this.expansionNeeded != true) {
				this.expansionNeeded = true;
			}

			$root.classList.add('lcc-expansion-needed');
		} else {
			if (this.expansionNeeded != false) {
				this.expansionNeeded = false;
			}

			$root.classList.remove('lcc-expansion-needed');
		}
	}

	render(h) {
		return (
			<div style={this.getRootStyle()} class={`long-content-container${this.expansionNeeded ? ' lcc-expansion-needed' : ''}${this.isExpanded ? ' lcc-expanded' : ''}${this.cssClass?.length > 0 ? ` ${this.cssClass}` : ''}`}>
				<div ref="innerContent" class="long-content-container-content">
					{this.$slots.default?.()}
				</div>
				<div class="long-content-container-show-more-wrap">
					<div class="long-content-container-show-more-inner" onClick={() => { this.toggleIsExpanded(); }}>
						{this.renderShowMore != null
							? this.renderShowMore(h)
							: (
									<div class="long-content-container-show-more-default">
										<i class="icon-arrow-down"></i>
										{this.getToggleButtonText()}
									</div>
								)}
					</div>
				</div>
			</div>
		);
	}
}

const LongContentContainer = toNative(LongContentContainerComponent);
export default LongContentContainer;