import type { ComponentCustomOptions, MethodOptions } from 'vue';
import type { ComponentSetupFunction, Cons } from 'vue-facing-decorator/dist/component';
import type { ValidationRuleset, ValidationState } from '../common/static-wrappers/interfaces/validation-interface';
import { Component as OriginalComponent, Prop, Vue } from 'vue-facing-decorator';
import { slotUnwrapper } from '../common/slot-unwrapper';

@Component
export default class TsxComponent<P> extends Vue {
	private vueTsxProps: Readonly<{ ref?: string; key?: string | number }> & Readonly<P>;
	model: never;

	@Prop() validationState!: ValidationState;

	protected get hasValidationError(): boolean {
		return this.validationState != null && this.validationState.valid == false;
	}

	protected get validationCssClass(): string {
		return this.hasValidationError ? 'has-danger' : '';
	}

	protected get validationErrorMessage(): string {
		return this.hasValidationError ? this.validationState.errorMessage : null;
	}

	protected populateValidationDeclaration(): void {
		if (this.validationState != null) {
			// @ts-expect-error it is readonly
			this.validationState.validationDeclaration._changed = true;
			// @ts-expect-error it is readonly
			this.validationState.validationDeclaration._label = this.label;
		}
	}

	protected getSlotProperties<T>(type: string): Array<T> {
		const slots = slotUnwrapper(this.$slots.default?.());
		const retVal: Array<T> = [] = slots?.filter(node => (node as any)?.type?.__vfdConstructor?.$fwName == type).map(node => node.props as any);
		return retVal;

		// var retVal: Array<T> = [];
		// for (const node of (this.$slots.default?.() || [])) {
		//     const fwId = (node as any).type?.__vfdConstructor?.$fwName;
		//     if (fwId == type) {
		//         retVal.push(node.props as any)
		//     }
		// }

		// return retVal;
	}
}

@Component
export class TsxComponentLite<P> extends Vue {
	model: never;
	private vueTsxProps: Readonly<{ ref?: string }> & Readonly<P>;
}

interface ComponentOption {
	name?: string;
	emits?: string[];
	provide?: Record<string, any> | Function;
	components?: Record<string, any>;
	directives?: Record<string, any>;
	inheritAttrs?: boolean;
	expose?: string[];
	render?: Function;
	modifier?: (raw: any) => any;
	options?: ComponentCustomOptions & Record<string, any>;
	template?: string;
	mixins?: any[];
	setup?: ComponentSetupFunction;
	methods?: MethodOptions;
}

type ComponentConsOption = Cons | ComponentOption;

type ComponentOptions = {
	validations?: ValidationRuleset<any>;
} & ComponentConsOption;

export function Component(options: ComponentOptions, ctx?: any) {
	return OriginalComponent(options as any, ctx);
}

declare global {
	namespace JSX {
		interface ElementAttributesProperty {
			vueTsxProps: {};
		}
	}

	interface PublicMethodSet<T> {
		methods: T;
	}
}