import { SidePanel } from '@wix/design-system';
import React, { useMemo, useEffect, useState, useCallback, } from 'react';
import { observer } from 'mobx-react-lite';
import { ScrollableContent } from '../ScrollableContent';
import { ArchivedItemsList } from './ArchivedItemsList';
import { useWixPatternsContainer } from '@wix/bex-core/react';
function _ArchivedItemsPanel({ items, onBackButtonClick, onCloseButtonClick, dataExtension, dataHook = 'custom-columns', }) {
    const { translate: t } = useWixPatternsContainer();
    const [isVisible, setIsVisible] = useState(false);
    useEffect(() => {
        setTimeout(() => setIsVisible(true), 10);
    }, []);
    const closeIfEmpty = () => {
        const remainingItems = dataExtension.archivedItems;
        if (remainingItems.length === 0) {
            handleBack();
        }
    };
    const handleRestore = async (item) => {
        await dataExtension.restoreField({
            id: item.id,
            origin: 'Archived items panel',
            reportBi: dataExtension.container.createBILogger({
                componentType: 'ArchivedItemsPanel',
            }),
        });
        closeIfEmpty();
    };
    const handleDelete = useCallback((item) => {
        dataExtension.deleteFieldModal?.modal.open({
            id: item.id,
            origin: 'Archived items panel',
        });
    }, [dataExtension]);
    const slideStyle = useMemo(() => ({
        position: 'absolute',
        top: 0,
        right: isVisible ? 0 : '-600px',
        bottom: 0,
        width: '100%',
        maxWidth: '600px',
        backgroundColor: 'white',
        transition: 'right 0.3s ease-out',
        display: 'flex',
        flexDirection: 'column',
        zIndex: 1,
    }), [isVisible]);
    const handleBack = useCallback(() => {
        // Trigger slide-out animation
        setIsVisible(false);
        // Wait for animation to complete before calling onBackButtonClick
        setTimeout(() => {
            onBackButtonClick();
        }, 300); // Match the transition duration
    }, [onBackButtonClick]);
    const handleClose = useCallback(() => {
        // Trigger slide-out animation
        setIsVisible(false);
        // Close both panels immediately so they animate together
        onCloseButtonClick();
    }, [onCloseButtonClick]);
    const tooltipKey = useMemo(() => {
        return dataHook === 'custom-columns'
            ? 'cairo.archivedFields.back.custom-columns.tooltip'
            : 'cairo.archivedFields.back.manage-custom-fields.tooltip';
    }, [dataHook]);
    return (React.createElement("div", { "data-hook": `${dataHook}-archived-items-panel-container`, style: slideStyle, onClick: (e) => e.stopPropagation() },
        React.createElement(SidePanel // PatternsSidePanel is overriding the back button to close the panel
        , { dataHook: `${dataHook}-archived-items-panel`, width: "100%", closeButtonProps: { onClick: handleClose }, onBackButtonClick: handleBack, backButtonProps: {
                description: t(tooltipKey),
                tooltipProps: {
                    moveArrowTo: 80,
                },
            } },
            React.createElement(SidePanel.Header, { title: t('cairo.archivedFields.title'), subtitle: t('cairo.archivedFields.subtitle') }),
            React.createElement(ScrollableContent, { overflowY: true, dataHook: `${dataHook}-archived-items-panel-scroll-container` },
                React.createElement(ArchivedItemsList, { items: items, onRestore: handleRestore, onDelete: handleDelete, dataHook: dataHook })))));
}
export const ArchivedItemsPanel = observer(_ArchivedItemsPanel);
//# sourceMappingURL=ArchivedItemsPanel.js.map