import { Prop, toNative } from 'vue-facing-decorator';
import PowerduckState from '../../app/powerduck-state';
import TsxComponent, { Component } from '../../app/vuetsx';
import { ModalSectionMode } from '../../common/enums/modal';
import { SlotNameIdentifier } from '../../common/slot-name-identifier';
import Fieldset from '../form/fieldset';

interface TabPageArgs {
	navCaption: string;
	navCaptionShort?: string;
	tabCaption?: string;
	escapeCaption?: boolean;
	collapsedByDefault?: boolean;
	icon: string;
	uuid?: string;
}

@Component
class ModalSectionComponent extends TsxComponent<TabPageArgs> implements TabPageArgs {
	@Prop() navCaption!: string;
	@Prop() navCaptionShort!: string;
	@Prop() tabCaption!: string;
	@Prop() escapeCaption?: boolean;
	@Prop() icon!: string;
	@Prop() uuid!: string;
	@Prop() collapsedByDefault: boolean;
	active: boolean = false;

	render(h) {
		if (PowerduckState.getModalSectionMode() == ModalSectionMode.fieldSet) {
			return (
				<Fieldset isCollapsedByDefault={this.collapsedByDefault} caption={this.navCaption}>
					{this.$slots.default?.()}
				</Fieldset>
			);
		}

		return <div class="tab-page-wrap">{this.$slots.default?.()}</div>;
	}
}

SlotNameIdentifier(ModalSectionComponent, 'TabPage');
const ModalSection = toNative(ModalSectionComponent);
export default ModalSection;