<script lang="ts">


    import type {ActionsColumn, DataColumn, IndicatorColumn} from "@ticatec/uniface-element/DataTable";
    import type {FilterFn} from "@ticatec/uniface-element/ListBox";
    import Box from "@ticatec/uniface-element/Box";
    import DataTable from "@ticatec/uniface-element/DataTable";
    import utils from "../common/utils";
    import i18nRes from "../i18nRes";
    import type {GetRowFontStyle} from "@ticatec/uniface-element/types";

    interface Props {
        indicatorColumn?: IndicatorColumn | null;
        columns: Array<DataColumn>;
        actionsColumn?: ActionsColumn | null;
        selectedRows?: Array<any>;
        list: Array<any>;
        roundTable?: boolean;
        filterFn?: FilterFn | null;
        rowHeight?: number;
        filterText?: string | null;
        emptyText?: string;
        showInfo?: boolean;
        getRowFontStyle?: GetRowFontStyle;
    }

    let {
        indicatorColumn = null,
        columns,
        actionsColumn = null,
        selectedRows = $bindable([]),
        list,
        roundTable = false,
        filterFn = null,
        rowHeight = undefined,
        filterText = null,
        emptyText = undefined,
        showInfo = true,
        getRowFontStyle = undefined
    }: Props = $props();

    let filteredList: Array<any> = $state([]);

    $effect(() => {
        filteredList = utils.filterList(list, filterText, filterFn);
    });

    let summaryInfo = $derived(i18nRes.app.datasetSummaryInfo({total: list.length, eligible: filteredList.length}));
</script>

<div class="common-page-container">
    <Box style="border: 1px solid var(--uniface-editor-border-color, #F8FAFC); width: 100%; height: 100%" round={roundTable}>
        <DataTable style="height: 100%; width: 100%" {rowHeight} {columns} {indicatorColumn} {actionsColumn} bind:selectedRows {emptyText}
                   list={filteredList} {getRowFontStyle}></DataTable>
    </Box>
    {#if showInfo}
        <div style="width: 100%; padding: 8px 12px; flex: 0 0 auto; text-align: right">
            {@html summaryInfo}
        </div>
    {/if}
</div>
