import { Divider, makeStyles } from '@material-ui/core';
import PropTypes from 'prop-types';
import React, { useMemo } from 'react';
import { useUser } from '../../utilities/auth/useUser';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { PageContainer } from '../../page/PageContainer';
import { useAxiosGet } from '../../utilities/useAxiosGet';
import { Skeleton } from '@material-ui/lab';
import { LayoutUnit } from '../../layout/LayoutUnit';
import { VirtualForm } from '../../UI/forms/VirtualForm';
import { ConfigService } from '../../configService';
const useStyles = makeStyles((theme) => ({
    root: {},
    divider: {
        marginTop: theme.spacing(2)
    }
}));
const FIELD_NUMBER = 10;
export const VirtualTableSidePanel = (props) => {
    const { tableDescription, value, crudTableEditionData, closeSideSheet, onCreate, onUpdate, pageId, setSideSheetWidth, setSideSheetButtonLabel, setSideSheetOnSubmit, setSideSheetProps } = props;
    const user = useUser();
    const classes = useStyles();
    const [{ data: page, loading: loadingPage }] = useAxiosGet(ConfigService.tenantV1ApiUrl, `page/${pageId}`, {}, !!!pageId, false);
    const skeleton = useMemo(() => {
        const skeletonArr = [];
        for (let i = 0; i < FIELD_NUMBER; i++) {
            skeletonArr.push(React.createElement(React.Fragment, null, React.createElement(Skeleton, { key: i, variant: "rect", className: classes.skeleton }), React.createElement(LayoutUnit, { unit: "xxs" })));
        }
        return skeletonArr;
    }, [classes]);
    const sideSheetContent = useMemo(() => {
        if (page) {
            return (React.createElement(DndProvider, { backend: HTML5Backend }, React.createElement(PageContainer, { user: user, key: pageId, pageData: page, widgetParams: {
                    pageId: page === null || page === void 0 ? void 0 : page.pageId,
                    nodeObj: crudTableEditionData,
                    setSideSheetWidth: setSideSheetWidth,
                    setSideSheetButtonLabel: setSideSheetButtonLabel,
                    setSideSheetOnSubmit: setSideSheetOnSubmit,
                    closeSideSheet: closeSideSheet,
                    setSideSheetProps: setSideSheetProps,
                    onCreate: onCreate,
                    onUpdate: onUpdate
                }, disableMargins: true })));
        }
        else {
            return (React.createElement(React.Fragment, null, React.createElement(VirtualForm, { tableDescription: tableDescription, rowValue: value, closeSideSheet: closeSideSheet, onCreate: onCreate, onUpdate: onUpdate }), React.createElement("div", { className: classes.divider }, React.createElement(Divider, null))));
        }
    }, [
        page,
        user,
        pageId,
        crudTableEditionData,
        setSideSheetWidth,
        setSideSheetButtonLabel,
        setSideSheetOnSubmit,
        setSideSheetProps,
        closeSideSheet,
        onCreate,
        onUpdate,
        classes,
        tableDescription,
        value
    ]);
    return (React.createElement("div", null, loadingPage ? (React.createElement(React.Fragment, null, skeleton.map((sk) => sk), React.createElement(LayoutUnit, { unit: "md" }), React.createElement(Skeleton, { variant: "rect", className: classes.skeletonButton }))) : (sideSheetContent)));
};
VirtualTableSidePanel.propTypes = {
    /**
     * Description of the table
     */
    tableDescription: PropTypes.array,
    /**
     * Entity data
     */
    crudTableEditionData: PropTypes.array,
    /**
     * onClick event for closing sidesheet
     */
    closeSideSheet: PropTypes.func,
    /**
     * onClick event for creating
     */
    onCreate: PropTypes.func,
    /**
     * onClick event for updating
     */
    onUpdate: PropTypes.func
};
//# sourceMappingURL=VirtualTableSidePanel.js.map