import type { VNode } from 'vue';
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 PowerduckState from '../../app/powerduck-state';
import TsxComponent, { Component } from '../../app/vuetsx';
import { isNullOrEmpty } from '../../common/utils/is-null-or-empty';
import FormItemWrapper from '../form/form-item-wrapper';
import { FileManagerDialog, FileManagerModalFileType } from '../modal/ts/file-manager-dialog';
import './css/image-upload.css';

interface ImageUploadBoxArgs extends FormItemWrapperArgs {
	value: string;
	changed: (newValue: string) => void;
	maxImgWidth?: number;
}

@Component
class ImageUploadBoxComponent extends TsxComponent<ImageUploadBoxArgs> implements ImageUploadBoxArgs {
	@Prop() clicked: (e: any) => void;
	@Prop() label!: string | VNode;
	@Prop() labelButtons!: DropdownButtonItemArgs[];
	@Prop() subtitle!: string;
	@Prop() value!: string;
	@Prop() mandatory!: boolean;
	@Prop() marginType?: MarginType;
	@Prop() maxWidth?: number;
	@Prop() maxImgWidth?: number;
	@Prop() wrap!: boolean;
	@Prop() showClearValueButton!: boolean;
	@Prop() hint: string;
	@Prop() changed: (newValue: string) => void;

	getCssClass(): string {
		let ret = 'image-box-wrap';
		if (isNullOrEmpty(this.value)) {
			ret += ' image-box-wrap-empty';
		}

		return ret;
	}

	uploadImg() {
		FileManagerDialog.show({
			fileType: FileManagerModalFileType.Image,
			callback: (data) => {
				this.changed(data.url);
			},
			maxWidth: this.maxImgWidth,
		});
	}

	render(h) {
		return (
			<FormItemWrapper
				label={this.label}
				mandatory={this.mandatory}
				wrap={this.wrap}
				marginType={this.marginType}
				hint={this.hint}
				maxWidth={this.maxWidth}
				labelButtons={this.labelButtons}
				subtitle={this.subtitle}
				showClearValueButton={this.showClearValueButton}
			>
				{isNullOrEmpty(this.value) && (
					<div
						class={this.getCssClass()}
						onClick={() => {
							this.uploadImg();
						}}
					>
						<span class="image-box-span">
							<i class="fa fa-download image-box" aria-hidden="true"></i>
							<br />
							{PowerduckState.getResourceValue('add')}
&nbsp;
							{PowerduckState.getResourceValue('image')}
						</span>
					</div>
				)}

				{!isNullOrEmpty(this.value) && (
					<div class={this.getCssClass()}>
						<img
							class="image-box"
							src={this.value}
							onClick={() => {
								this.uploadImg();
							}}
						>
						</img>
						<span
							class="image-box-edit-overlay"
							onClick={() => {
								this.uploadImg();
							}}
						>
							<i class="fas fa-pencil-alt image-box-edit-icon"></i>
						</span>
						<span
							class="image-box-delete-overlay"
							onClick={() => {
								this.changed(null);
							}}
						>
							<i class="fas fa-trash-alt image-box-delete-icon"></i>
						</span>
						<input type="hidden" value={this.value} />
					</div>
				)}
			</FormItemWrapper>
		);
	}
}

const ImageUploadBox = toNative(ImageUploadBoxComponent);
export default ImageUploadBox;