import type { _ButtonArgsBase } from './button-layout';
import { Prop, toNative } from 'vue-facing-decorator';
import PowerduckState from '../../app/powerduck-state';
import TsxComponent, { Component } from '../../app/vuetsx';
import Button from './button';
import { ButtonLayout, ButtonSize, ButtonSocialType } from './button-layout';

interface SocialButtonArgs extends Omit<_ButtonArgsBase, 'size' | 'layout' | 'icon' | 'text'> {
	type: ButtonSocialType;
	clicked: (e: any) => void;
}

@Component
class SocialButtonComponent extends TsxComponent<SocialButtonArgs> implements SocialButtonArgs {
	@Prop() cssClass!: string;
	@Prop() tooltip!: string;
	@Prop() round!: boolean;
	@Prop() outlined!: boolean;
	@Prop() iconButton!: boolean;
	@Prop() iconOnRight!: boolean;
	@Prop() disabled!: boolean;
	@Prop() pulsate!: boolean;
	@Prop() type!: ButtonSocialType;
	@Prop() clicked: (e: any) => void;

	getSocialIcon(): string {
		switch (this.type) {
			case ButtonSocialType.Google:
				return 'fab fa-google';
			case ButtonSocialType.Facebook:
				return 'fab fa-facebook';
			case ButtonSocialType.Apple:
				return 'fab fa-apple';
			case ButtonSocialType.X:
				return 'fab fa-twitter';
			case ButtonSocialType.Figma:
				return 'fab fa-figma';
			case ButtonSocialType.Dribble:
				return 'fas fa-basketball-ball';
			default:
				return '';
		}
	}

	getText(): string {
		switch (this.type) {
			case ButtonSocialType.Google:
				return PowerduckState.getResourceValue('signInGoogle');
			case ButtonSocialType.Facebook:
				return PowerduckState.getResourceValue('signInFacebook');
			case ButtonSocialType.Apple:
				return PowerduckState.getResourceValue('signInApple');
			case ButtonSocialType.X:
				return PowerduckState.getResourceValue('signInX');
			case ButtonSocialType.Figma:
				return PowerduckState.getResourceValue('signInFigma');
			case ButtonSocialType.Dribble:
				return PowerduckState.getResourceValue('signInDribble');
			default:
				return '';
		}
	}

	getCssClass(): string {
		return `btn-social btn-social-${this.type}${(this.cssClass != null ? ` ${this.cssClass}` : '')}`;
	}

	render(h) {
		return (
			<Button
				clicked={(e) => {
					this.clicked(e);
				}}
				cssClass={this.getCssClass()}
				layout={ButtonLayout.Primary}
				text={!this.iconButton ? this.getText() : null}
				size={ButtonSize.Regular}
				round={this.round}
				outlined={this.outlined}
				icon={this.getSocialIcon()}
				iconButton={this.iconButton}
				iconOnRight={this.iconOnRight}
				tooltip={this.tooltip}
				disabled={this.disabled}
				pulsate={this.pulsate}
			/>
		);
	}
}

const SocialButton = toNative(SocialButtonComponent);
export default SocialButton;