<script lang="ts">

    import {DisplayMode} from "../../common/DisplayMode";
    import RadioButton from "../../radio-button";
    import type {OnChangeHandler} from "../../common/OnChangeHandler";

    export let disabled: boolean = false;
    export let readonly: boolean = false;
    export let style: string = "";
    export let value: any;
    export let options: Array<any>;
    export let keyField: string = "code";
    export let textField: string = "text";
    export let displayMode: DisplayMode = DisplayMode.Edit;
    export let item$style: string = '';
    export let disabledOptions: Array<string> = [];
    export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
    export let compact: boolean = false;
    export let onchange: OnChangeHandler<any> = null as unknown as OnChangeHandler<any>;
    export let onfocus: (() => void) | null = null;
    export let onblur: (() => void) | null = null;

    export const setFocus = () => {
        const firstRadio = groupContainer?.querySelector('input[type="radio"]:not(:disabled)') as HTMLInputElement;
        if (firstRadio) {
            firstRadio.focus();
        }
    }

    let textValue: string;
    let oldValue = value;
    let isUserChange: boolean = false;
    let hasFocus: boolean = false;
    let groupContainer: HTMLDivElement;

    $: if (oldValue != value) {
        if (isUserChange) {
            onchange?.(value);
            isUserChange = false;
        }
        oldValue = value;
    }

    $: {
        let item = options.find(el=>el[keyField]==value);
        textValue = item == null ? '' : item[textField];
    }

    // 处理focus/blur事件
    const handleFocus = () => {
        if (!hasFocus) {
            hasFocus = true;
            onfocus?.();
        }
    }

    const handleBlur = () => {
        if (hasFocus) {
            hasFocus = false;
            onblur?.();
        }
    }

    const handleContainerClick = (e: MouseEvent) => {
        if (!disabled && !readonly && e.target === groupContainer) {
            handleFocus();
            setFocus();
        }
    }

    const handleContainerBlur = (e: FocusEvent) => {
        // 检查焦点是否移到了组件外部
        setTimeout(() => {
            const activeElement = document.activeElement;
            if (!groupContainer?.contains(activeElement)) {
                handleBlur();
            }
        }, 0);
    }

    const handleRadioFocus = (e: FocusEvent) => {
        handleFocus();
    }

    const handleRadioClick = (e: MouseEvent) => {
        handleFocus();
    }

    const handleRadioChange = (e: Event) => {
        isUserChange = true;
        handleFocus();
    }

</script>

{#if displayMode === DisplayMode.View}
    <div class="uniface-display-field">
        <span>{textValue}</span>
    </div>
{:else}
    <div bind:this={groupContainer} {style} class="uniface-group-box {variant}" class:compact class:disabled on:click={handleContainerClick} on:focusout={handleContainerBlur}>
        {#each options as op}
            <RadioButton {readonly} {compact} disabled={disabled || disabledOptions.indexOf(op[keyField]) > -1}
                         bind:group={value} label={op[textField]} style={item$style} value={op[keyField]}
                         onclick={handleRadioClick}
                         onchange={handleRadioChange}
                         onfocus={handleRadioFocus}
                         onblur={handleContainerBlur}/>
        {/each}
    </div>
{/if}

