import type { VNode } from 'vue';
import type { DropdownListOption } from '.';
import type { ValidationState } from '../../common/static-wrappers/interfaces/validation-interface';
import { Prop, toNative } from 'vue-facing-decorator';
import DropdownList from '.';
import PowerduckState from '../../app/powerduck-state';
import TsxComponent, { Component } from '../../app/vuetsx';
import CurrencyCodeTranslator from './../../common/enum-translation/currency-code-translator';
import { Currency } from './../../common/enums/currency';

interface CurrencyCodePickerArgs {
	cssClass?: string;
	selected: Currency;
	mandatory?: boolean;
	label?: string | VNode;
	subtitle?: string;
	placeholder?: string;
	validationState?: ValidationState;
	wrap?: boolean;
	changed: (e: Currency) => void;
}

@Component
class CurrencyCodePickerComponent extends TsxComponent<CurrencyCodePickerArgs> implements CurrencyCodePickerArgs {
	@Prop() cssClass?: string;
	@Prop() selected: Currency;
	@Prop() mandatory!: boolean;
	@Prop() label!: string | VNode;
	@Prop() subtitle?: string;
	@Prop() placeholder!: string;
	@Prop() wrap!: boolean;
	@Prop() changed: (e: Currency) => void;

	getOptionList(): DropdownListOption[] {
		return [
			{ id: Currency.EUR, text: CurrencyCodeTranslator.getString(Currency.EUR) },
			{ id: Currency.CZK, text: CurrencyCodeTranslator.getString(Currency.CZK) },
			{ id: Currency.GBP, text: CurrencyCodeTranslator.getString(Currency.GBP) },
			{ id: Currency.PLN, text: CurrencyCodeTranslator.getString(Currency.PLN) },
			{ id: Currency.USD, text: CurrencyCodeTranslator.getString(Currency.USD) },
			{ id: Currency.HUF, text: CurrencyCodeTranslator.getString(Currency.HUF) },
		];
	}

	render(h) {
		const optArr = this.getOptionList();

		return (
			<DropdownList
				cssClass={this.cssClass}
				label={this.label ? this.label : PowerduckState.getResourceValue('currencyCode')}
				subtitle={this.subtitle}
				wrap={this.wrap}
				validationState={this.validationState}
				placeholder={this.placeholder}
				options={optArr}
				mandatory={this.mandatory}
				selected={this.selected == null ? null : optArr.find(p => p.id == this.selected)}
				changed={(e: DropdownListOption) => {
					this.changed(e?.id as Currency);
				}}
			/>
		);
	}
}

const CurrencyCodePicker = toNative(CurrencyCodePickerComponent);
export default CurrencyCodePicker;