<script lang="ts">

    import type {OnClick} from "@ticatec/uniface-element/types";
    import type {FilterFn} from "@ticatec/uniface-element/ListBox";
    import {onMount, type Snippet} from "svelte";
    import type ListDataManager from "../../common/ListDataManager";
    import {useManagedList} from "../../common/useManagedList.svelte";
    import CardListBoard from "../CardListBoard.svelte";
    import type {CardRender} from "../CardRender";
    import FilterablePageBar from "../../common/FilterablePageBar.svelte";
    import LoadDataErrorPage from "../../common/LoadDataErrorPage.svelte";
    import i18nRes from "../../i18nRes";
    import type {PageAttrs, PageInitialize} from "@ticatec/uniface-micro-frame/common";
    import CommonPage from "@ticatec/uniface-micro-frame/CommonPage";

    interface Props {
        onCreateNewClick?: OnClick;
        initializeData?: PageInitialize | null;
        page$attrs: PageAttrs;
        gap?: number;
        list?: Array<any>;
        render: CardRender;
        dataManager: ListDataManager;
        busyIndicator?: string | null;
        queryParams?: any;
        filterFn?: FilterFn | null;
        canBeClosed?: boolean;
        round?: boolean;
        shadow?: boolean;
        placeholder?: string;
        header?: Snippet;
        onError?: (ex: any) => void;
    }

    let {
        onCreateNewClick,
        initializeData = null,
        page$attrs,
        gap = 8,
        list = $bindable([]),
        render,
        dataManager,
        busyIndicator = null,
        queryParams = null,
        filterFn = null,
        canBeClosed = false,
        round = true,
        shadow = true,
        placeholder = '',
        header,
        onError = undefined
    }: Props = $props();

    let filter: string = $state('');

    const managed = useManagedList({
        dataManager: () => dataManager,
        initializeData: () => initializeData,
        busyIndicator: () => busyIndicator,
        defaultBusyText: i18nRes.app.busyIndicator(),
        onError: () => onError,
        onLoaded: (loadedList) => {
            list = loadedList;
        }
    });

    export function loadList() {
        return managed.load(queryParams);
    }

    const onRefreshClick: OnClick = async () => {
        await loadList();
    }

    onMount(() => managed.initialize(queryParams));

</script>

{#if managed.loaded}
    <CommonPage {round} {shadow} {page$attrs} content$style="overflow: hidden;" {canBeClosed}>
        {#snippet headerExtra()}
            <FilterablePageBar bind:filter filterable={filterFn != null} {onCreateNewClick} {placeholder} {onRefreshClick}/>
        {/snippet}
        {#if managed.error}
            <LoadDataErrorPage message={managed.error} onRetry={() => managed.initialize(queryParams)}/>
        {:else }
            <CardListBoard {filterFn} filterText={filter} {list} {render} {gap} showHeader={!!header} {header}/>
        {/if}
    </CommonPage>
{/if}
