<script lang="ts">

    import {onMount} from "svelte";
    import {DisplayMode} from "../common/DisplayMode";
    import ModalPopover from "../common/ModalPopover.svelte";
    import FileUploadPanel from "./FileUploadPanel.svelte";
    import FileRender from "./FileRender.svelte";
    import type AttachmentFile from "./AttachmentFile";
    import {getFileType, type RemoveConfirm} from "./AttachmentFile";
    import type UploadFile from "./UploadFile";
    import type {FileUpload} from "./FileUpload";

    export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
    export let disabled: boolean = false;
    export let readonly: boolean = false;
    export let files: Array<AttachmentFile> = [];
    export let style: string = '';
    export let displayMode: DisplayMode = DisplayMode.Edit;
    export let removeFileConfirm: RemoveConfirm = null as unknown as RemoveConfirm;
    export let uploadFile: FileUpload;
    export let compact: boolean = false;
    export let onfocus: (() => void) | null = null;
    export let onblur: (() => void) | null = null;
    export let onchange: ((files: Array<AttachmentFile>) => void) | null = null;

    export let text: string | null = null;

    export const setFocus = () => {
        setTimeout(() => {
            if (containerElement) {
                containerElement.focus();
            }
        }, 50);
    }

    let showUpload: boolean = false;
    let containerElement: HTMLDivElement;
    let oldFiles = files;
    let isUserChange: boolean = false;
    let hasFocus: boolean = false;

    onMount(() => {

    })

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

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

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

    const handleContainerBlur = (e: FocusEvent) => {
        setTimeout(() => {
            if (!showUpload && !containerElement?.contains(document.activeElement)) {
                handleBlur();
            }
        }, 50);
    }

    const showDialog = () => {
        handleFocus();
        showUpload = true;
    }

    const appendNewFile = (file: UploadFile) => {
        isUserChange = true;
        files = [...files, {
            name: file.file.name,
            uri: file.url ?? '',
            type: getFileType(file.file.name)
        }]
    }

    const removeFile = async (file: AttachmentFile) => {
        let confirmed = removeFileConfirm == null ? true : await removeFileConfirm(file);
        if (confirmed) {
            isUserChange = true;
            let pos = files.findIndex(item => item == file);
            if (pos > -1) {
                files.splice(pos, 1);
                files = [...files];
            }
        }
    }

    // 监听upload面板关闭
    $: if (!showUpload && hasFocus) {
        setTimeout(() => {
            if (document.activeElement !== containerElement) {
                handleBlur();
            }
        }, 50);
    }

    $: text = '<div>' + files.map(item => (item.name)).join("</div><div>") + '</div>'

    // 处理onchange事件
    $: if (oldFiles !== files) {
        if (isUserChange) {
            onchange?.(files);
            isUserChange = false;
        }
        oldFiles = files;
    }

</script>

{#if displayMode === DisplayMode.View}
    <div class="uniface-attachment-display uniface-display-field">
        {@html text ?? ''}
    </div>
{:else }
    <div class="uniface-attachment-field" {style}>
        <div bind:this={containerElement} class="uniface-common-editor {variant}" class:compact class:disabled 
             tabindex={disabled ? -1 : 0} on:focus={handleContainerFocus} on:blur={handleContainerBlur}>
            <div class="files-field">
                {#each files as file}
                    <FileRender {file} {readonly} onRemove={removeFile}/>
                {/each}
            </div>
            {#if !disabled && !readonly}
                <div class="editor-action-icon">
                    <i class="icon_google_file_upload" aria-hidden="true" on:click={showDialog}></i>
                </div>
            {/if}
        </div>
    </div>

    <FileUploadPanel bind:visible={showUpload} maxFiles={10} onFileUploaded={appendNewFile} {uploadFile}/>
{/if}