import type { DropdownButtonItemArgs } from './../dropdown-button/dropdown-button-item';
import type { FormItemWrapperArgs, HintType, MarginType } from './form-item-wrapper';
import { Prop, toNative } from 'vue-facing-decorator';
import TsxComponent, { Component } from '../../app/vuetsx';
import { slotUnwrapper } from '../../common/slot-unwrapper';
import FormItemWrapper from './form-item-wrapper';

export interface FormInputAction {
	icon?: string;
	text: string;
	clicked: () => void;
}

export type MultipleInputWrapperCols = 1 | 2 | 3 | 4 | 6;

interface MultipleInputWrapperArgs extends Omit<FormItemWrapperArgs, 'label'> {
	label?: string;
	actions?: FormInputAction[];
	colCount: MultipleInputWrapperCols;
}

@Component
class MultipleInputWrapperComponent extends TsxComponent<MultipleInputWrapperArgs> implements MultipleInputWrapperArgs {
	@Prop() label?: string;
	@Prop() actions!: FormInputAction[];
	@Prop() labelButtons: DropdownButtonItemArgs[];
	@Prop() mandatory: boolean;
	@Prop() flex: boolean;
	@Prop() hint: string;
	@Prop() subtitle: string;
	@Prop() hintType: HintType;
	@Prop() marginType?: MarginType;
	@Prop() maxWidth?: number;
	@Prop() appendIcon: string;
	@Prop() prependIcon: string;
	@Prop() cssClass: string;
	@Prop() appendClicked: () => void;
	@Prop() prependClicked: () => void;
	@Prop() wrap: boolean;
	@Prop() colCount: MultipleInputWrapperCols;

	getColsCssClass() {
		switch (this.colCount) {
			case 1:
				return 'col-12';
			case 2:
				return 'col-6';
			case 3:
				return 'col-4';
			case 4:
				return 'col-3';
			case 6:
				return 'col-2';
		}
	}

	renderInputs(h) {
		const cols = [];

		const unwrappedSlots = slotUnwrapper(this.$slots.default?.());
		for (let i = 0; i < unwrappedSlots?.length; i += this.colCount) {
			cols.push(unwrappedSlots?.slice(i, i + this.colCount));
		}

		return (cols.map((col, index) => (
			<div key={index} class="row">
				{col.map((item, subIndex) => (
					<div key={subIndex} class={this.getColsCssClass()}>
						{item}
					</div>
				))}
			</div>
		)));
	}

	renderActions(h) {
		return (
			<div class="row form-actions">
				<div class="col-12">
					<div class="row">
						{this.actions.map((action, index) => (
							<span key={index} class=" form-action" onClick={() => action.clicked()}>
								{action.icon && <i class={action.icon + (action.icon.includes('icon') ? '' : ' icon')}></i>}
								<span class="text">{action.text}</span>
							</span>
						))}
					</div>
				</div>
			</div>
		);
	}

	render(h) {
		if (this.label) {
			return (
				<FormItemWrapper label={this.label} cssClass={this.cssClass} mandatory={this.mandatory} wrap={this.wrap} appendIcon={this.appendIcon} prependIcon={this.prependIcon} hint={this.hint} marginType={this.marginType} appendClicked={this.appendClicked} prependClicked={this.prependClicked} maxWidth={this.maxWidth} validationState={this.validationState} labelButtons={this.labelButtons} subtitle={this.subtitle}>
					{this.$slots.default && this.renderInputs(h)}

					{this.actions && this.renderActions(h)}
				</FormItemWrapper>
			);
		} else {
			return (
				<div class={`multiple-inputs-without-label${this.cssClass ? ` ${this.cssClass}` : ''}`}>
					{this.$slots.default && this.renderInputs(h)}

					{this.actions && this.renderActions(h)}
				</div>
			);
		}
	}
}

const MultipleInputWrapper = toNative(MultipleInputWrapperComponent);
export default MultipleInputWrapper;