import { Prop, toNative } from 'vue-facing-decorator';

import PowerduckState from '../../app/powerduck-state';
import TsxComponent, { Component } from '../../app/vuetsx';
import './css/card.scss';

export enum CardRole {
	Normal = 0,
	RootCard = 1,
}

interface CardArgs {
	role?: CardRole;
	renderMode?: 'default' | 'inlined';
	hasShadow?: boolean;
	shadow?: 'none' | 'sm' | 'md' | 'lg';
	padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
	rounded?: boolean;
	cssClass?: string;
	clicked?: () => void;
}

@Component
class CardComponent extends TsxComponent<CardArgs> implements CardArgs {
	@Prop() role!: CardRole;
	@Prop() hasShadow!: boolean;
	@Prop() shadow?: 'none' | 'sm' | 'md' | 'lg';
	@Prop() padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
	@Prop({ default: false }) rounded?: boolean;
	@Prop() renderMode?: 'default' | 'inlined';
	@Prop() cssClass?: string;
	@Prop() clicked?: () => void;

	render() {
		const classes = [
			'card',
			this.role == CardRole.RootCard && 'single-card root-element',
			this.getStickyCssClass(),
			this.getBoxShadowCardCss(),
			this.getRenderModeCardCss(),
			this.getShadowClass(),
			this.getPaddingClass(),
			this.rounded && 'card--rounded',
			this.cssClass,
		].filter(Boolean).join(' ');

		return (
			<div onClick={this?.clicked} role={this.getRole()} class={classes}>
				{this.$slots.default?.()}
			</div>
		);
	}

	getStickyCssClass(): string {
		let cssClass = '';
		const stickyDeclaration = PowerduckState.stickyTabs;

		if (stickyDeclaration.HasSticky) {
			cssClass += ' has-main-nav-tabs';
		}

		if (stickyDeclaration.AllowTabChange == false) {
			cssClass += ' no-tab-switch';
		}

		return cssClass;
	}

	getBoxShadowCardCss(): string {
		if (this.renderMode == 'inlined' || this.hasShadow == true) {
			return 'with-card-shadow';
		}

		return '';
	}

	getRenderModeCardCss(): string {
		if (this.renderMode == 'inlined') {
			return 'card-render-inlined';
		}

		return '';
	}

	getShadowClass(): string {
		return `card--shadow-${this.shadow ?? 'default'}`;
	}

	getPaddingClass(): string {
		return `card--padding-${this.padding ?? 'default'}`;
	}

	getRole() {
		if (this.clicked != null) {
			return 'button';
		}

		return 'initial';
	}
}

const Card = toNative(CardComponent);
export default Card;