import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react';
import { AmbientGridTemplate } from '../../../UI/templates/deprecated/AmbientGridTemplate/AmbientGridTemplate';
// import { executeQueryAdHoc, getBaseMethod } from '../utilities/methodUtils';
import { AddIcon, DeleteIcon, EditIcon } from '@fluentui/react-icons';
import { Typography } from '@material-ui/core';
import { useTranslation } from 'react-i18next';
import { PrimaryActionButton } from '../../../UI/inputs/buttons/PrimaryActionButton';
import { ActionsRenderer } from '../../../UI/templates/ui/renderers/ActionsRenderer';
import { apiMutate } from '../../../utilities/useAxiosMutate';
import UdpVerticalManagementSidesheet from '../UdpVerticalManagementSidesheet';
import { FluentDialog } from '../../../UI/feedback/FluentDialog';
import { useHandleAxiosSnackbar } from '../../../utilities/apiHelpers';
import { SideSheet } from '../../../UI/surfaces/SideSheet';
import UdpGridPanelManagementSidesheet from '../UdpGridPanelManagementSidesheet';
import { useAgGridApi } from '../../../utilities/aggrid/AgTable';
import { ConfigService } from '../../../configService';
const UdpGridPanelManagementPage = (props) => {
    const { params } = props;
    const { nodeObj: environment } = params;
    const { t } = useTranslation();
    const [loading, setLoading] = useState(false);
    const [gridPanels, setGridPanels] = useState([]);
    const [grids, setGrids] = useState([]);
    const [panels, setPanels] = useState([]);
    const [addSidesheetOpen, setAddSidesheetOpen] = useState(false);
    const [selectedRow, setSelectedRow] = useState();
    const [deleteDialogOpen, setDeleteDialogOpen] = useState();
    const [dataToDelete, setDataToDelete] = useState();
    const [grid, setGrid] = useState(null);
    const [panel, setPanel] = useState(null);
    const { handleErrorSnackbar, handleSuccessSnackbar } = useHandleAxiosSnackbar();
    const executeMutation = useCallback(async (endpoint, method, data) => apiMutate(ConfigService.uemV1ApiUrl, endpoint, {
        method: method || 'post'
    }, data), []);
    const getGridPanels = useCallback(async () => {
        setLoading(true);
        const requestPayload = {
            data: {
                customerId: null,
                environmentId: environment.environmentId,
                apiPath: `TenantService/api/v2/gridPanel`
            }
        };
        const response = await executeMutation('uem', 'post', requestPayload);
        if ((response === null || response === void 0 ? void 0 : response.status) === 200) {
            setGridPanels(response === null || response === void 0 ? void 0 : response.data);
        }
        setLoading(false);
    }, [environment === null || environment === void 0 ? void 0 : environment.environmentId, executeMutation]);
    const getGrids = useCallback(async () => {
        const requestPayload = {
            data: {
                customerId: null,
                environmentId: environment.environmentId,
                apiPath: `TenantService/api/v2/grid`
            }
        };
        const response = await executeMutation('uem', 'post', requestPayload);
        if ((response === null || response === void 0 ? void 0 : response.status) === 200) {
            setGrids(response === null || response === void 0 ? void 0 : response.data);
        }
    }, [environment === null || environment === void 0 ? void 0 : environment.environmentId, executeMutation]);
    const getPanels = useCallback(async () => {
        const requestPayload = {
            data: {
                customerId: null,
                environmentId: environment.environmentId,
                apiPath: `IntegrationService/api/v2/panel`
            }
        };
        const response = await executeMutation('uem', 'post', requestPayload);
        if ((response === null || response === void 0 ? void 0 : response.status) === 200) {
            setPanels(response === null || response === void 0 ? void 0 : response.data);
        }
    }, [environment === null || environment === void 0 ? void 0 : environment.environmentId, executeMutation]);
    const createGridPanel = useCallback(async () => {
        setLoading(true);
        const requestPayload = {
            data: {
                customerId: null,
                gridId: grid.gridId,
                panelId: panel.panelId,
                environmentId: environment.environmentId,
                apiPath: `api/v1/gridPanel/uemCreate`
            }
        };
        const response = await executeMutation('gridPanel/uemCreate', 'post', requestPayload);
        if ((response === null || response === void 0 ? void 0 : response.status) === 201) {
            handleSuccessSnackbar('GridPanel Created Successfully');
            getGridPanels();
            setAddSidesheetOpen(false);
        }
        else {
            handleErrorSnackbar('Something went wrong');
        }
        setLoading(false);
    }, [
        environment,
        executeMutation,
        getGridPanels,
        grid,
        handleErrorSnackbar,
        handleSuccessSnackbar,
        panel
    ]);
    const updateGridPanel = useCallback(async () => {
        setLoading(true);
        const requestPayload = {
            data: {
                gridPanelId: selectedRow.gridPanelId,
                customerId: null,
                gridId: grid.gridId,
                panelId: panel.panelId,
                environmentId: environment.environmentId
            }
        };
        const response = await executeMutation('gridPanel/uemUpdate', 'put', requestPayload);
        if ((response === null || response === void 0 ? void 0 : response.status) === 204) {
            handleSuccessSnackbar('GridPanel Updated Successfully');
            getGridPanels();
            setAddSidesheetOpen(false);
        }
        else {
            handleErrorSnackbar('Something went wrong');
        }
        setLoading(false);
    }, [
        environment,
        executeMutation,
        getGridPanels,
        grid,
        handleErrorSnackbar,
        handleSuccessSnackbar,
        panel,
        selectedRow
    ]);
    const deleteGridPanel = useCallback(async () => {
        setLoading(true);
        const requestPayload = {
            data: {
                gridPanelId: dataToDelete.gridPanelId,
                customerId: null,
                gridId: dataToDelete.gridId,
                panelId: dataToDelete.panelId,
                environmentId: environment.environmentId
            }
        };
        const response = await executeMutation('gridPanel/uemDelete', 'delete', requestPayload);
        if ((response === null || response === void 0 ? void 0 : response.status) === 204) {
            handleSuccessSnackbar('GridPanel Deleted Successfully');
            getGridPanels();
        }
        else {
            handleErrorSnackbar('Something went wrong');
        }
        setDataToDelete();
        setLoading(false);
    }, [
        environment,
        executeMutation,
        getGridPanels,
        handleErrorSnackbar,
        handleSuccessSnackbar,
        dataToDelete
    ]);
    const openDeleteDialog = (data) => {
        setDeleteDialogOpen(true);
        setDataToDelete(data);
        console.log(data);
    };
    useEffect(() => {
        getGridPanels();
        getGrids();
        getPanels();
    }, [getGridPanels, getGrids, getPanels]);
    const handleEdit = useCallback((row) => {
        setSelectedRow(row);
    }, []);
    useEffect(() => {
        if (selectedRow) {
            const selectedGrid = grids.find((grid) => grid.gridId === selectedRow.gridId);
            const selectedPanel = panels.find((panel) => panel.panelId === selectedRow.panelId);
            setGrid(selectedGrid);
            setPanel(selectedPanel);
            setAddSidesheetOpen(true);
        }
    }, [grids, panels, selectedRow]);
    const actionList = useMemo(() => [
        {
            id: 1, // Must be unique
            title: t('Edit'),
            icon: EditIcon,
            onClick: handleEdit,
            disabled: false
        },
        {
            id: 2, // Must be unique
            title: t('Delete'),
            icon: DeleteIcon,
            onClick: openDeleteDialog,
            disabled: false
        }
    ], [t, handleEdit]);
    const gridOptions = useMemo(() => ({
        frameworkComponents: {
            actionsRenderer: ActionsRenderer
        },
        columnDefs: [
            {
                headerName: t('gridPanelId'),
                field: 'gridPanelId'
            },
            {
                headerName: t('gridId'),
                field: 'gridId'
            },
            {
                headerName: t('panelId'),
                field: 'panelId'
            },
            {
                headerName: t('Actions'),
                cellRenderer: 'actionsRenderer',
                cellRendererParams: {
                    actionList
                },
                pinned: 'right',
                suppressMenu: true,
                sortable: false
            }
        ]
    }), [actionList, t]);
    const handleClose = useCallback(() => {
        setGrid();
        setPanel();
        setSelectedRow();
        setAddSidesheetOpen(false);
    }, []);
    return (React.createElement(React.Fragment, null, React.createElement(UdpGridPanelManagementSidesheet, { title: selectedRow ? 'Update GridPanel' : 'Create GridPanel', open: addSidesheetOpen, onClose: handleClose, environment: environment, grids: grids, panels: panels, grid: grid, setGrid: setGrid, panel: panel, setPanel: setPanel, onSubmit: selectedRow ? updateGridPanel : createGridPanel }), React.createElement(FluentDialog, { open: deleteDialogOpen, handleClose: () => setDeleteDialogOpen(false), title: t('Delete GridPanel'), message: t('Are you sure?'), actionOne: deleteGridPanel, labelOne: t('Delete'), actionTwo: () => setDeleteDialogOpen(false), labelTwo: t('Cancel') }), React.createElement(AmbientGridTemplate, { title: t('Grid Panel Manager'), useNewHeader: true, data: gridPanels, gridOptions: gridOptions, onPrimaryActionClick: () => setAddSidesheetOpen(true), primaryActionLabel: "Add", loading: loading })));
};
export default UdpGridPanelManagementPage;
//# sourceMappingURL=UdpGridPanelManagementPage.js.map