import { Box, Divider, FormControlLabel, Switch, Typography, makeStyles } from '@material-ui/core';
import React, { useCallback, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { Field, Form } from '../../utilities/form';
import { FluentDialog } from '../feedback/FluentDialog.jsx';
import { AmbientTextField } from '../inputs/textField/AmbientTextField.jsx';
import { apiMutate } from '../../utilities/useAxiosMutate';
import { useHandleAxiosSnackbar } from '../../utilities/apiHelpers.jsx';
import { getGridState } from '../../utilities/aggrid/GridFunctions';
import PropTypes from 'prop-types';
import { VisibilityTypeEnums } from '../../enums/unitySystemEnums';
import { ConfigService } from '../../configService';
const useStyles = makeStyles((theme) => ({
    root: {},
    saveForm: {
        minWidth: 450,
        paddingLeft: theme.spacing(2),
        paddingRight: theme.spacing(2)
    },
    column: {
        flex: 1,
        paddingLeft: theme.spacing(2),
        paddingRight: theme.spacing(2)
    },
    divider: {
        backgroundColor: 'grey',
        color: 'grey',
        width: 2,
        height: '100%'
    },
    infoHeader: {
        color: 'grey'
    }
}));
/**
 * @param {PropTypes.InferProps<typeof SaveViewFormDialog.propTypes>} props
 */
export const SaveViewFormDialog = (props) => {
    const { handleErrorSnackbar, handleSuccessSnackbar } = useHandleAxiosSnackbar();
    const { open, handleClose, tenant, application, user, refetchViews, gApi, gcApi, gridId, domain, apiCatalogId } = props;
    const { t } = useTranslation();
    const classes = useStyles(props);
    const saveViewFormRef = useRef(null);
    const triggerSaveView = useCallback(() => {
        saveViewFormRef.current.handleSubmit();
    }, [saveViewFormRef]);
    const saveView = async (values) => {
        const data = {
            data: {
                gridView: {
                    Name: values.name,
                    GridViewVisibilityTypeId: values.private
                        ? VisibilityTypeEnums.Private
                        : VisibilityTypeEnums.Public,
                    isDefault: 0,
                    tenantId: user === null || user === void 0 ? void 0 : user.currentTenantId,
                    userId: user === null || user === void 0 ? void 0 : user.id,
                    gridId: gridId,
                    domain: domain,
                    apiCatalogId: apiCatalogId
                },
                gridConfigurations: getGridState(gApi, gcApi, gridId)
            },
            method: 'POST'
        };
        handleClose();
        await apiMutate(ConfigService.tenantV2ApiUrl, `GridView/createGridView`, data)
            .then((response) => {
            handleSuccessSnackbar(t('View Saved'));
            refetchViews();
        })
            .catch((error) => {
            console.log(error);
            handleErrorSnackbar(error, t('Failed to Save View'));
        });
    };
    return (React.createElement(FluentDialog, { title: t('Save New View'), open: open, handleClose: handleClose, labelOne: t('Save View'), labelTwo: t('Cancel'), actionOne: triggerSaveView, actionTwo: handleClose }, React.createElement(Box, { display: "flex" }, React.createElement("div", { className: classes.column }, React.createElement(Typography, { className: classes.infoHeader, align: "left" }, t('Tenant')), React.createElement(Typography, { variant: "subtitle2", align: "left" }, tenant !== null && tenant !== void 0 ? tenant : '--')), React.createElement(Divider, { flexItem: true, orientation: "vertical" }), React.createElement("div", { className: classes.column }, React.createElement(Typography, { className: classes.infoHeader, align: "left" }, t('Application')), React.createElement(Typography, { variant: "subtitle2", align: "left" }, application !== null && application !== void 0 ? application : '--')), React.createElement(Divider, { flexItem: true, orientation: "vertical" }), React.createElement("div", { className: classes.column }, React.createElement(Typography, { className: classes.infoHeader, align: "left" }, t('Entity')), React.createElement(Typography, { variant: "subtitle2", align: "left" }, domain !== null && domain !== void 0 ? domain : '--'))), React.createElement("div", { className: classes.saveForm }, React.createElement(Form, { onSubmit: saveView, ref: saveViewFormRef }, React.createElement(Field, { type: "text", component: AmbientTextField, name: "name", id: "name", label: t('Name'), fullWidth: true, required: true, style: { marginBottom: 20, marginTop: 10 } }), React.createElement(FormControlLabel, { control: React.createElement(Field, { component: Switch, name: "private", id: "private", defaultValue: false, type: "checkbox" }), label: t('Private'), labelPlacement: "end" })))));
};
SaveViewFormDialog.propTypes = {
    open: PropTypes.bool.isRequired, // Determines whether the dialog is open or closed
    handleClose: PropTypes.func.isRequired, // Function called when the dialog is closed
    tenant: PropTypes.string, // Tenant value (optional)
    application: PropTypes.string, // Application value (optional)
    entity: PropTypes.string, // Entity value (optional)
    user: PropTypes.object, // User object (optional)
    columnDefsValues: PropTypes.array, // Array of column definitions values (optional)
    refetchViews: PropTypes.func, // Function to refetch views (optional)
    gApi: PropTypes.object, // Grid API object (optional)
    gcApi: PropTypes.object, // Grid Column API object (optional)
    setSelectedView: PropTypes.func // Function to set selected view (optional)
};
//# sourceMappingURL=SaveViewFormDialog.js.map