import { Prop, toNative } from 'vue-facing-decorator';
import PowerduckState from '../../app/powerduck-state';
import TsxComponent, { Component } from '../../app/vuetsx';
import { isNullOrEmpty } from '../../common/utils/is-null-or-empty';
import Button from '../button/button';
import { ButtonLayout } from '../button/button-layout';
import FlexContainer from '../form/flex-container';
import FlexFormItem from '../form/form-item-flex';
import Modal, { ModalSize } from '../modal/modal';
import ModalBody from '../modal/modal-body';
import ModalFooter from '../modal/modal-footer';
import './css/mobile-optimized-hero-filter.css';

interface MobileOptimizedHeroFilterArgs {
	caption: string;
	isLoading?: boolean;
	cssClass?: string;
	placeholder?: string;
	useIntersectionObserver?: boolean;
	clearFilterText?: string;
	submitText?: string;
	clickedClear?: () => void;
	clickedSubmit?: () => void;
	modalBackdropCssClass?: string;
	mobileSearchIcon?: string;
	mobileModalCssClass?: string;
	mobileShowClearFilters?: boolean;
	mobileModalSize?: ModalSize;
	mobileFirstLineText: string;
	mobileSecondLineText: string;

}

@Component
class MobileOptimizedHeroFilterComponent extends TsxComponent<MobileOptimizedHeroFilterArgs> implements MobileOptimizedHeroFilterArgs {
	@Prop() caption: string;
	@Prop() isLoading: boolean;
	@Prop() cssClass?: string;
	@Prop() placeholder?: string;
	@Prop() useIntersectionObserver?: boolean;
	@Prop() clearFilterText?: string;
	@Prop() clickedClear?: () => void;
	@Prop() clickedSubmit?: () => void;
	@Prop() modalBackdropCssClass: string;
	@Prop() mobileSearchIcon: string;
	@Prop() mobileModalCssClass?: string;
	@Prop() mobileShowClearFilters?: boolean;
	@Prop() mobileFirstLineText: string;
	@Prop() mobileSecondLineText: string;
	@Prop() mobileModalSize?: ModalSize;

	mounted() {
		if (this.useIntersectionObserver) {
			this.$nextTick(() => {
				const observer = new IntersectionObserver(([e]) => {
					e.target.toggleAttribute('data-stuck', e.intersectionRatio < 1);
				}, { threshold: [1] });

				observer.observe(this.$el);
				(this as any)._observer = observer;
			});
		}
	}

	beforeUnmount(): void {
		if ((this as any)._observer != null) {
			((this as any)._observer as IntersectionObserver).disconnect();
			(this as any)._observer = null;
		}
	}

	showFilterModal() {
		this.getModal().show();
	}

	hideFilterModal() {
		this.getModal().hide();
	}

	private getModal(): typeof Modal.prototype {
		return this.$refs.mobileModal as typeof Modal.prototype;
	}

	render(h) {
		let firstLine = this.mobileFirstLineText;
		let isPlaceholder = false;

		if (isNullOrEmpty(firstLine)) {
			firstLine = this.placeholder ?? `${PowerduckState.getResourceValue('search')}...`;
			isPlaceholder = true;
		}

		return (
			<div class={`mohf-root${this.cssClass ? ` ${this.cssClass}` : ''}`}>
				<div class="mohf-mobile-root">
					<div class="mohf-upper-spacer"></div>
					<div class={`mohf-input${isPlaceholder ? ' mohf-placeholder' : ''}`}>
						<div class="mohf-input-outer" onClick={() => { this.showFilterModal(); }}>
							<div class="mohf-input-inner">
								<FlexContainer cssClass="mohf-input-flexwrap" fullWidthOnMobile={false}>
									<FlexFormItem cssClass="mohf-input-searchicon-wrap" width={50} flexFill={false}>
										<i class={`${this.mobileSearchIcon ?? 'icon icon-magnifier'} mohf-input-searchicon`}></i>
									</FlexFormItem>

									<FlexFormItem cssClass="mohf-input-main-wrap" flexFill={true}>
										<div class="mohf-input-main-inner">
											<div class="mohf-input-first-line-text">{firstLine}</div>

											{this.mobileSecondLineText?.length > 0
											&& <div class="mohf-input-second-line-text">{this.mobileSecondLineText}</div>}

										</div>
									</FlexFormItem>

									<FlexFormItem cssClass="mohf-input-filtercon-wrap" width={50} flexFill={false}>
										<i class="icon icon-options mohf-input-filtericon"></i>
									</FlexFormItem>
								</FlexContainer>
							</div>
						</div>
					</div>
				</div>
				<div class="mohf-desktop-root">
					{this.$slots.default?.()}
				</div>

				<Modal title={this.caption} ref="mobileModal" backdropCssClass={this.modalBackdropCssClass} size={this.mobileModalSize ?? ModalSize.Normal} blocked={this.isLoading} cssClass={this.mobileModalCssClass}>
					<ModalBody>
						<div class="mohf-modal-body-wrap">
							{this.$slots.default?.()}
						</div>
					</ModalBody>
					<ModalFooter>
						{this.mobileShowClearFilters
						&& (
							<Button
								layout={ButtonLayout.Secondary}
								text={this.clearFilterText}
								fullWidth={true}
								clicked={() => {
									this.clickedClear();
								}}
							/>
						)}
						<Button
							layout={ButtonLayout.Primary}
							text={PowerduckState.getResourceValue('search')}
							fullWidth={true}
							cssClass="submit text-center"
							clicked={() => {
								this.clickedSubmit();
								this.hideFilterModal();
							}}
						/>
					</ModalFooter>
				</Modal>
			</div>
		);
	}
}

const MobileOptimizedHeroFilter = toNative(MobileOptimizedHeroFilterComponent);
export default MobileOptimizedHeroFilter;