import React from 'react';


import CollectionTable, {
    CollectionTableProps,
} from '../CollectionTable/CollectionTable';
import { SystemWindowDialog } from '@/components/ui/system-window-dialog';
import {
    Grid,
    GridCol,
} from '../ui/grid';
import {
    MobilePage,
    MobilePopup,
} from '../ui/mobile';
import useAppConfigStore, { useAppConfig } from '@/stores/appConfig';

const CollectionTableView = (props: CollectionTableProps) => {

    const { isMobile } = useAppConfigStore();
    const { closeDialog } = useAppConfig();


    const onClose = () => {
        closeDialog(props.modalKey);
    }

    if (isMobile) {
        return <MobilePopup opened={true} onBackdropClick={() => { onClose() }}>
            <MobilePage>
                <CollectionTable {...props}
                    dialog={true}
                />
            </MobilePage>
        </MobilePopup>
    }


    return (
        <SystemWindowDialog
            open={true}
            onOpenChange={() => { onClose() }}
            width="80vw"
            height="80vh"
            allowFullscreen
            bodyClassName="p-0 overflow-hidden"
        >
            <Grid className='h-full w-full'>
                <GridCol>
                    <CollectionTable {...props}
                        dialog={true}
                    />
                </GridCol>
            </Grid>
        </SystemWindowDialog>
    );
};

export default CollectionTableView;
