import type { VNode } from 'vue';
import type { DropdownButtonItemArgs } from '../dropdown-button/dropdown-button-item';
import type { FormItemWrapperArgs, HintType, MarginType } from '../form/form-item-wrapper';
import { Prop, toNative } from 'vue-facing-decorator';
import TsxComponent, { Component } from '../../app/vuetsx';
import VueUtils from './../../common/utils/vue-utils';
import RadioButtonGroup from './radio-button-group';
import './css/radio-button-enhanced-group.css';

export interface RadioButtonExtendedItem {
    id: number | string;
    text: string;
    disabled?: boolean;
    subtitle?: string;
    image?: string | VNode;
}

interface RadioButtonExtendedGroupArgs extends FormItemWrapperArgs {
    changed: (newValue: RadioButtonExtendedItem) => void;
    customRenderOption?: (h, state: RadioButtonExtendedItem) => any;
    customRenderSelectionResult?: (h, state: RadioButtonExtendedItem) => any;
    options: Array<RadioButtonExtendedItem>;
    selected: RadioButtonExtendedItem;
}

@Component
class RadioButtonEnhancedGroupComponent extends TsxComponent<RadioButtonExtendedGroupArgs> implements RadioButtonExtendedGroupArgs {
    @Prop() label!: string | VNode;
    @Prop() labelButtons!: DropdownButtonItemArgs[];
    @Prop() subtitle!: string;
    @Prop() cssClass!: string;
    @Prop() mandatory!: boolean;
    @Prop() wrap!: boolean;
    @Prop() hint: string;
    @Prop() hintType!: HintType;
    @Prop() appendIcon: string;
    @Prop() prependIcon: string;
    @Prop() appendClicked: () => void;
    @Prop() prependClicked: () => void;

    @Prop() marginType?: MarginType;
    @Prop() maxWidth?: number;

    @Prop() changed: (newValue: string | any) => void;
    @Prop() customRenderOption?: (h, state: RadioButtonExtendedItem) => any;
    @Prop() customRenderSelectionResult?: (h, state: RadioButtonExtendedItem) => any;
    @Prop() options: Array<RadioButtonExtendedItem>;
    @Prop() selected: RadioButtonExtendedItem;

    render(h) {
        return (
            <RadioButtonGroup
                label={this.label}
                mandatory={this.mandatory}
                wrap={this.wrap}
                appendIcon={this.appendIcon}
                prependIcon={this.prependIcon}
                hint={this.hint}
                hintType={this.hintType}
                appendClicked={this.appendClicked}
                prependClicked={this.prependClicked}
                marginType={this.marginType}
                maxWidth={this.maxWidth}
                validationState={this.validationState}
                labelButtons={this.labelButtons}
                subtitle={this.subtitle}
                cssClass={this.cssClass?.length > 0 ? `pd-radio-button-enhanced-group ${this.cssClass}` : 'pd-radio-button-enhanced-group'}
                options={this.options}
                selected={this.selected}
                changed={(e) => {
                    this.changed(e);
                }}
                customRenderOption={(h, state: RadioButtonExtendedItem) => {
                    if (this.customRenderOption) {
                        return this.customRenderOption(h, state);
                    }

                    const disabledCssClass = state.disabled ? ' disabled' : '';
                    const subtitle = state.subtitle;

                    return (
                        <div class={`pd-radio-item-extended${disabledCssClass}`}>
                            <div class="pd-radio-item-extended-name-wrapper">
                                <span class={`pd-radio-item-extended-name${disabledCssClass}`}>{state.text}</span>

                                {subtitle && (
                                    <div class={`pd-radio-item-extended-subtitle${disabledCssClass}`}>{subtitle}</div>
                                )}
                            </div>

                            {this.renderImage(
                                h,
                                state.image,
                                state,
                            )}
                        </div>
                    );
                }}
            />
        );
    }

    renderImage(
        h,
        image: string | VNode,
        state: RadioButtonExtendedItem,
    ) {
        if (image == null) {
            return null;
        }

        if (VueUtils.isVNode(image)) {
            return (<div class="pd-radio-item-extended-thumb">{image}</div>);
        }

        if ((image as string).includes('/')) {
            return (<div class="pd-radio-item-extended-thumb"><img src={image} alt={state.text} class="pd-radio-item-extended-image" /></div>);
        }

        return (<div class="pd-radio-item-extended-thumb"><i class={`pd-radio-item-extended-icon ${image}`} /></div>);
    }
}

const RadioButtonEnahancedGroup = toNative(RadioButtonEnhancedGroupComponent);
export default RadioButtonEnahancedGroup;