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 { ConfigService } from '../../../configService';
const UdpVerticalManagementPage = (props) => {
    const { params } = props;
    const { nodeObj: environment, inquiryNodeProperties } = params;
    const { t } = useTranslation();
    const [sideSheetOpen, setSideSheetOpen] = useState(false);
    const [sideSheetEdit, setSideSheetEdit] = useState(false);
    const [loading, setLoading] = useState(false);
    const [selectedVertical, setSelectedVertical] = useState(null);
    const [verticals, setVerticals] = useState([]);
    const [productVertical, setProductVertical] = useState([]);
    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
    const selectedVerticalRef = useRef();
    selectedVerticalRef.current = selectedVertical ? selectedVertical : null;
    const { handleErrorSnackbar, handleSuccessSnackbar } = useHandleAxiosSnackbar();
    const openSheetAsEdit = useCallback((isEdit) => {
        setSideSheetOpen(true);
        setSideSheetEdit(isEdit);
    }, []);
    const closeDeleteDialog = useCallback(() => {
        setDeleteDialogOpen(false);
    }, [setDeleteDialogOpen]);
    const executeMutation = useCallback(async (endpoint, method, data) => apiMutate(ConfigService.uemV1ApiUrl, endpoint, {
        method: method || 'post'
    }, data), []);
    const getVerticals = useCallback(async (data, isFirstLoad = false) => {
        if (isFirstLoad) {
            setLoading(true);
        }
        const response = await executeMutation('uem', 'post', data);
        if ((response === null || response === void 0 ? void 0 : response.status) === 200) {
            setVerticals(response === null || response === void 0 ? void 0 : response.data);
        }
        if (isFirstLoad) {
            setLoading(false);
        }
    }, [executeMutation]);
    const deleteVertical = useCallback(async () => {
        const data = {
            data: {
                environmentId: environment.environmentId,
                apiPath: `TenantService/api/v2/Vertical/${selectedVerticalRef.current.verticalId}/uemDelete`
            }
        };
        const response = await executeMutation(`vertical/${selectedVerticalRef.current.verticalId}/uemDelete`, 'delete', data);
        if ((response === null || response === void 0 ? void 0 : response.status) === 204) {
            console.log('success');
            handleSuccessSnackbar('Vertical Deleted Successfully');
        }
        const getVerticalsData = {
            data: {
                customerId: null,
                environmentId: environment.environmentId,
                apiPath: `TenantService/api/v2/Vertical`
            }
        };
        getVerticals(getVerticalsData, true);
        closeDeleteDialog();
    }, [executeMutation, selectedVertical, closeDeleteDialog]);
    const getProductVerticals = useCallback(async (data) => {
        const response = await executeMutation('productVertical', 'get', data);
        if ((response === null || response === void 0 ? void 0 : response.status) === 200) {
            setProductVertical(response === null || response === void 0 ? void 0 : response.data);
        }
    }, [executeMutation]);
    useEffect(() => {
        if (environment && getVerticals) {
            if (environment.environmentId) {
                const productVerticalData = {
                    data: {
                        apiPath: `api/v2/ProductVertical`
                    }
                };
                getProductVerticals(productVerticalData);
                const data = {
                    data: {
                        customerId: null,
                        environmentId: environment.environmentId,
                        apiPath: `TenantService/api/v2/Vertical`
                    }
                };
                getVerticals(data, true);
            }
        }
    }, [environment, getVerticals, getProductVerticals, deleteVertical]);
    const closeSheet = useCallback(() => {
        setSideSheetOpen(false);
        const data = {
            data: {
                customerId: null,
                environmentId: environment.environmentId,
                apiPath: `TenantService/api/v2/Vertical`
            }
        };
        getVerticals(data);
    }, [getVerticals, environment]);
    const handleEditPage = useCallback((value) => {
        setSelectedVertical(value);
        console.log('Edit page, value: ', value);
        openSheetAsEdit(true);
    }, [t]);
    const handleCreateVertical = useCallback((value) => {
        openSheetAsEdit(false);
    }, [t]);
    const handleDelete = useCallback((value) => {
        setSelectedVertical(value);
        console.log('Delete page, value: ', value);
        setDeleteDialogOpen(true);
    }, [t]);
    const actionList = useMemo(() => [
        {
            id: 1, // Must be unique
            title: t('Edit'),
            icon: EditIcon,
            onClick: handleEditPage,
            disabled: false
        },
        {
            id: 2, // Must be unique
            title: t('Delete'),
            icon: DeleteIcon,
            onClick: handleDelete,
            disabled: false
        }
    ], [t, handleEditPage, handleDelete]);
    const gridOptions = useMemo(() => ({
        frameworkComponents: {
            actionsRenderer: ActionsRenderer
        },
        columnDefs: [
            {
                headerName: t('Name'),
                field: 'name',
                minWidth: 300
            },
            {
                headerName: t('Icon'),
                field: 'icon'
            },
            {
                headerName: t('Actions'),
                cellRenderer: 'actionsRenderer',
                cellRendererParams: {
                    actionList
                },
                pinned: 'right',
                suppressMenu: true,
                sortable: false
            }
        ]
    }), [t, actionList, productVertical]);
    const pab = (React.createElement(PrimaryActionButton, { onClick: handleCreateVertical }, React.createElement(Typography, { style: { marginRight: 5 } }, "Add"), React.createElement(AddIcon, null)));
    return (React.createElement(React.Fragment, null, React.createElement(UdpVerticalManagementSidesheet, { open: sideSheetOpen, closeSidesheet: closeSheet, selectedVertical: selectedVertical, environment: environment, title: t(sideSheetEdit ? 'Edit Vertical' : 'Create Vertical'), associatedProducts: productVertical, isEdit: sideSheetEdit }), React.createElement(AmbientGridTemplate, { title: t('Vertical Manager'), primaryActionButton: pab, data: verticals, 
        // hideGroupTab
        // hideColumnTab
        loading: loading, gridOptions: gridOptions, groupingData: [] }), React.createElement(FluentDialog, { open: deleteDialogOpen, handleClose: closeDeleteDialog, title: t('Delete Vertical'), message: t('Are you sure you want to Delete') + ` "${selectedVertical === null || selectedVertical === void 0 ? void 0 : selectedVertical.name}"?`, actionOne: deleteVertical, labelOne: t('Delete'), actionTwo: closeDeleteDialog, labelTwo: t('Cancel') })));
};
export default UdpVerticalManagementPage;
//# sourceMappingURL=UdpVerticalManagementPage.js.map