import type { VNode } from 'vue';
import type { DropdownListButton, DropdownListTagAddedArgs } from '.';
import type { DropdownButtonItemArgs } from '../dropdown-button/dropdown-button-item';
import type { FormItemWrapperArgs, MarginType } from '../form/form-item-wrapper';
import { Prop, toNative } from 'vue-facing-decorator';
import DropdownList, { MultiselectMode } from '.';
import TsxComponent, { Component } from '../../app/vuetsx';
import './css/image-dropdown.css';

interface ImageDropdownArgs extends FormItemWrapperArgs {
	options: ImageDropdownDataItem[];
	selected: ImageDropdownDataItem[];
	tagsAdded?: (e: DropdownListTagAddedArgs) => void;
	placeholder?: string;
	buttons?: DropdownListButton[];
	changed: (newValue: ImageDropdownDataItem[]) => void;
}

export interface ImageDropdownButtonClickedArgs {
	item: any;
}

export interface ImageDropdownDataItem {
	id: string | number;
	text: string;
	subtitle?: string;
	imageUrl: string;
	dataRow?: any;
}

@Component
class ImageDropdownComponent extends TsxComponent<ImageDropdownArgs> implements ImageDropdownArgs {
	@Prop() label!: string | VNode;
	@Prop() labelButtons!: DropdownButtonItemArgs[];
	@Prop() placeholder!: string;
	@Prop() mandatory!: boolean;
	@Prop() marginType?: MarginType;
	@Prop() wrap!: boolean;
	@Prop() hint: string;
	@Prop() subtitle!: string;
	@Prop() appendIcon: string;
	@Prop() prependIcon: string;
	@Prop() tagsAdded?: (e: DropdownListTagAddedArgs) => void;
	@Prop() appendClicked: () => void;
	@Prop() prependClicked: () => void;
	@Prop() buttons: DropdownListButton[];
	@Prop() options: ImageDropdownDataItem[];
	@Prop() selected: ImageDropdownDataItem[];
	@Prop() changed: (newValue: ImageDropdownDataItem[]) => void;

	raiseChangeEvent(e: ImageDropdownDataItem[]) {
		this.populateValidationDeclaration();
		this.changed(e);
	}

	private renderSelectionTemplate(_h: any, state: any): VNode {
		if (!state) {
			return null as any;
		}

		const dataItem = this.options.find(p => p.id.toString() === String(state.id));
		if (dataItem == null) {
			return <span>{state.text || ''}</span>;
		}

		return (
			<div class="imgddl-dropdown-wrap">
				<div class="imgddl-image" style={`background-image:url('${dataItem.imageUrl}')`}></div>
				<div class="imgddl-text">{dataItem.text}</div>
				<div class="imgddl-subtitle">{dataItem.subtitle}</div>
			</div>
		);
	}

	private renderResultItemTemplate(_h: any, state: any): VNode {
		if (!state) {
			return null as any;
		}

		const dataItem = this.options.find(p => p.id.toString() === String(state.id));
		if (dataItem == null) {
			return <span>{state.text || ''}</span>;
		}

		return (
			<div class="imgddl-dropdown-resultroot">
				<div class="imgddl-dropdown-resultwrap">
					<div class="imgddl-result-image" style={{ backgroundImage: `url('${dataItem.imageUrl}')` }}></div>
					<div class="imgddl-result-text">{dataItem.text}</div>
				</div>
			</div>
		);
	}

	render(_h: any) {
		return (
			<DropdownList
				ref="ddList"
				options={this.options}
				customRenderSelectionResult={(h, item) => this.renderSelectionTemplate(h, item)}
				customRenderOption={(h, item) => this.renderResultItemTemplate(h, item)}
				multiselect={true}
				multiselectMode={MultiselectMode.Tags}
				tags={true}
				tagsShouldPrependContent={true}
				tagsButtons={() => this.buttons ?? []}
				tagsAdded={this.tagsAdded}
				tagsNewPlaceLast={true}
				wrap={this.wrap}
				mandatory={this.mandatory}
				label={this.label}
				labelButtons={this.labelButtons}
				subtitle={this.subtitle}
				selected={this.selected}
				hint={this.hint}
				appendIcon={this.appendIcon}
				prependIcon={this.prependIcon}
				appendClicked={this.appendClicked}
				prependClicked={this.prependClicked}
				marginType={this.marginType}
				changed={e => this.raiseChangeEvent(e)}
			/>
		);
	}
}

const ImageDropdown = toNative(ImageDropdownComponent);
export default ImageDropdown;