import { makeStyles, } from '@material-ui/core';
import React, { useCallback, useMemo, } from 'react';
import { useTranslation } from 'react-i18next';
import { SideSheet } from '../../../surfaces/SideSheet';
import { useAgGridApi } from '../../../../utilities/aggrid/AgTable.tsx';
import { ActionsRenderer } from '../../../templates/ui/renderers/ActionsRenderer';
import { TableHeaderRowIcon, OpenInNewTabIcon } from '@fluentui/react-icons';
import Chip from '@material-ui/core/Chip';
import { HintPanel } from '../../../dataDisplay/HintPanel';
import PropTypes from 'prop-types';
import { VisibilityTypeEnums } from '../../../../enums/unitySystemEnums';
import { AmbientGridTemplate } from '../../../templates/deprecated/AmbientGridTemplate/AmbientGridTemplate';
const useStyles = makeStyles((theme) => ({
    publicChip: {
        backgroundColor: '#96d2ff',
        color: 'black',
        width: '60%'
    },
    privateChip: {
        backgroundColor: '#fce597',
        color: 'black',
        width: '60%'
    },
}));
/** @deprecated Use the new grid. */
const GridViewsSideSheet = (props) => {
    const { onClose, open, openSaveView, rowData, setSelectedView, } = props;
    const classes = useStyles();
    const { t } = useTranslation();
    const { gridApi, onGridReady } = useAgGridApi();
    const gApi = gridApi;
    const ChipRenderer = ({ onChange, value, id }) => {
        const handleChipClick = () => {
            onChange(id);
        };
        return (React.createElement(Chip, { label: value === VisibilityTypeEnums.Public ? t('Public') : t('Private'), onClick: handleChipClick, className: value === VisibilityTypeEnums.Public
                ? classes.publicChip
                : classes.privateChip, size: "small" }));
    };
    const setView = useCallback((value) => {
        setSelectedView(value);
        onClose();
    }, [setSelectedView, onClose]);
    const actionList = useMemo(() => [
        {
            id: 1,
            title: t('Load View'),
            icon: OpenInNewTabIcon,
            onClick: setView,
            disabled: false
        },
        {
            id: 2, // Must be unique
            title: t('Workflows'),
            icon: TableHeaderRowIcon,
            // onClick: handleDelete,
            disabled: false
        }
    ], [setView, t]);
    const gridOptions = {
        headerHeight: 0,
        frameworkComponents: {
            actionsRenderer: ActionsRenderer,
            chipRenderer: ChipRenderer
        },
        columnDefs: [
            {
                headerName: t('Name'),
                field: 'name'
            },
            {
                field: 'visibility',
                cellRenderer: 'chipRenderer',
                cellRendererParams: (params) => ({
                    onChange: (id) => { },
                    value: params.data.gridViewVisibilityTypeId
                })
            },
            {
                headerName: t('Actions'),
                cellRenderer: 'actionsRenderer',
                cellRendererParams: {
                    actionList
                },
                width: '100px',
                pinned: 'right',
                suppressMenu: true,
                sortable: false
            }
        ]
    };
    return (React.createElement(SideSheet, { id: "udpRecord-GridViewsSideSheet", udprecordid: "udpRecord-GridViewsSideSheet", open: open, onClose: onClose, width: '40%', title: "Select a View", buttonLabel: 'Create View', onSubmit: openSaveView }, React.createElement("div", { style: { marginBottom: 10 } }, React.createElement(HintPanel, { hint: "Quickly access and manage your pre-configured table/grid views. These views are designed to help you focus on specific sets of data and streamline your workflow.", hideHintText: "Hide Help" })), React.createElement(AmbientGridTemplate, { gridOptions: gridOptions, title: "Saved Views", rowData: rowData || [], onGridReady: onGridReady, suppressCellSelection: true, suppressRowClickSelection: true, sideBar: false, pivotMode: false, pivotPanelShow: "never", animateRows: true, pagination: false, api: gApi, useNewHeader: true, hiddenActionButtons: [
            'saveView',
            'views',
            'insights',
            'importExport',
            'group',
            'filter',
            'columns',
            'fitGrid',
            'expandGrid',
            'clearFilters'
        ] })));
};
export default GridViewsSideSheet;
GridViewsSideSheet.propTypes = {
    onClose: PropTypes.func.isRequired, // Function called when the component is closed
    open: PropTypes.bool.isRequired, // Determines whether the component is open or closed
    selectedMethod: PropTypes.string, // Currently selected method (optional)
    catalog: PropTypes.array, // Array of catalog items (optional)
    openSaveView: PropTypes.func, // Function called when the "Save View" button is clicked (optional)
    setViewChips: PropTypes.func, // Function to set view chips (optional)
    setFilter: PropTypes.func, // Function to set filter (optional)
    rowData: PropTypes.array, // Array of row data (optional)
    setSelectedView: PropTypes.func, // Function to set selected view (optional)
    frameworkComponents: PropTypes.object, // Object containing framework components (optional)
    scrollToTopOnStateChange: PropTypes.bool, // Determines whether to scroll to the top on state change (optional)
};
//# sourceMappingURL=GridViewsSideSheet.js.map