import { Divider, makeStyles } from '@material-ui/core';
import PropTypes from 'prop-types';
import React, { useMemo } from 'react';
import { CrudForm } from '../../UI/forms/CrudForm';
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 { UdpEnums } from '../../enums/unitySystemEnums';
import { UDP_LOOKUP_ENTITY_ATTRIBUTES_TO_HIDE } from '../entityAttributeActions';
import { ConfigService } from '../../configService';
const useStyles = makeStyles((theme) => ({
    root: {},
    divider: {
        marginTop: theme.spacing(2)
    }
}));
const FIELD_NUMBER = 10;
export const CrudTableSidePanel = (props) => {
    const { entityAttributes, udpFieldInfos, foreignKeyData, crudTableEditionData, closeSideSheet, onCreate, onUpdate, pageId, setSideSheetWidth, setSideSheetButtonLabel, setSideSheetOnSubmit, setSideSheetProps, isNewEntry, entityData, entityName } = 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]);
    // LAA UNT-3026: Remove businessObjectKey and ignoreLoggingTransactions field from the side panel crud form
    const filteredEntityAttributes = useMemo(() => {
        if (entityName === null || entityName === void 0 ? void 0 : entityName.toLowerCase().includes(UdpEnums.Udp_Lookup.toLowerCase())) {
            return entityAttributes === null || entityAttributes === void 0 ? void 0 : entityAttributes.filter((attr) => !UDP_LOOKUP_ENTITY_ATTRIBUTES_TO_HIDE.includes(attr.name));
        }
        return entityAttributes === null || entityAttributes === void 0 ? void 0 : entityAttributes.filter((attr) => attr.name !== 'businessObjectKey' &&
            attr.name !== 'ignoreLoggingTransactions');
    }, [entityAttributes, entityName]);
    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,
                    entityAttributes: filteredEntityAttributes,
                    entityData: entityData,
                    entityName: entityName,
                    foreignKeyData: foreignKeyData,
                    isNewEntry: isNewEntry,
                    udpFieldInfos: udpFieldInfos,
                    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(CrudForm, { entityAttributes: filteredEntityAttributes, udpFieldInfos: udpFieldInfos, foreignKeyData: foreignKeyData, crudTableEditionData: crudTableEditionData, closeSideSheet: closeSideSheet, onCreate: onCreate, onUpdate: onUpdate, isNewEntry: isNewEntry, entityData: entityData, entityName: entityName }), React.createElement("div", { className: classes.divider }, React.createElement(Divider, null))));
        }
    }, [
        page,
        user,
        pageId,
        setSideSheetWidth,
        setSideSheetButtonLabel,
        setSideSheetOnSubmit,
        setSideSheetProps,
        closeSideSheet,
        onCreate,
        onUpdate,
        filteredEntityAttributes,
        foreignKeyData,
        isNewEntry,
        entityData,
        classes,
        entityName,
        udpFieldInfos,
        crudTableEditionData
    ]);
    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)));
};
CrudTableSidePanel.propTypes = {
    /**
     * Entity attributes for selected entity within catalog
     */
    entityAttributes: PropTypes.array,
    /**
     * Foreign key data for selected entity within catalog
     */
    foreignKeyData: 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=CrudTableSidePanel.js.map