import React, { useCallback, useRef } from 'react';
import { observer } from 'mobx-react-lite';
import { CustomModalLayout, Modal, Box, TextButton, AddItem, Text, Divider, Search, } from '@wix/design-system';
import { Add } from '@wix/wix-ui-icons-common';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { TagsListItem } from './List/TagsListItem';
import { st, classes } from './ManageTagsModal.st.css.js';
import { ScrollableContent } from '../../../ScrollableContent';
import { MessageActionModal } from '../../../ActionModal';
import { Trans } from '../../../Trans';
import { NewTagItemEditable } from './NewTagItemEditable';
import { minimalRequiredWdsRuntimeCheck } from '../../../../minimalRequiredWdsRuntimeCheck';
import { ManageTagsNotification } from './ManageTagsNotification';
import { TAG_MAX_LENGTH } from '@wix/bex-core';
const ManageTagsModalComponent = ({ state }) => {
    if (process.env.NODE_ENV !== 'production') {
        minimalRequiredWdsRuntimeCheck({
            required: '^1.72.0',
            requiredBy: 'WixPatterns/ManageTagsModal',
        });
    }
    const { translate: t } = useWixPatternsContainer();
    state.ref = useRef(null);
    const closeModal = useCallback(() => {
        state.closeManageTagsModal();
    }, [state]);
    const handleCreateClick = useCallback(() => {
        state.handleCreateCtaClick();
    }, [state]);
    const handleCreateTagFromSearch = useCallback(() => {
        state.createTagFromSearch();
    }, [state]);
    const handleSearchClear = useCallback(() => {
        state.handleSearchClear();
    }, [state]);
    const handleSearchChange = useCallback((event) => {
        const newSearchValue = event.target.value;
        state.handleSearchChange(newSearchValue);
    }, [state]);
    const handleNotificationClose = useCallback((toastConfig) => {
        state.hideNotification(toastConfig);
    }, [state]);
    return (React.createElement(Modal, { isOpen: state.isOpen, onRequestClose: closeModal, shouldCloseOnOverlayClick: true, dataHook: "manage-tags-modal" },
        React.createElement(Box, { width: 510 },
            React.createElement(CustomModalLayout, { className: st(classes.root), overflowY: "visible", showFooterDivider: true, removeContentPadding: true, title: t('cairo.tags.manageTags.modal.title', {
                    EntityName: state.entityTypeName,
                }), subtitle: t('cairo.tags.manageTags.modal.subtitle'), sideActions: React.createElement(Box, null,
                    React.createElement(TextButton, { dataHook: "manage-tags-modal-create-btn", size: "small", prefixIcon: React.createElement(Add, null), onClick: handleCreateClick, disabled: state.isShowingNewTagListItem }, t('cairo.tags.manageTags.modal.add.CTA'))), primaryButtonText: t('cairo.tags.manageTags.modal.close.CTA'), primaryButtonOnClick: closeModal, onCloseButtonClick: closeModal, dataHook: "manage-tags-modal-layout" },
                React.createElement(Box, { direction: "vertical", height: "100%", flex: 1 },
                    state.toastConfig && (React.createElement(Box, { position: "absolute", top: "18px", left: "50%", transform: "translateX(-50%)", maxWidth: "388px" },
                        React.createElement(ManageTagsNotification, { toastConfig: state.toastConfig, onClose: handleNotificationClose, dataHook: "manage-tags-modal-notification" }))),
                    React.createElement(Box, { direction: "vertical", gap: "SP2" },
                        React.createElement(Box, { padding: "0 SP4" },
                            React.createElement(Search, { autoFocus: true, dataHook: "manage-tags-modal-search", onChange: handleSearchChange, value: state.searchValue, placeholder: t('cairo.tags.manageTags.modal.search.placeholder'), onEnterPressed: handleCreateTagFromSearch, onClear: handleSearchClear })),
                        React.createElement(Divider, null)),
                    React.createElement(Box, { direction: "vertical", maxHeight: 446, minHeight: 225, dataHook: "manage-tags-modal-tags-list", overflowY: "auto", paddingBottom: "SP1" },
                        React.createElement(ScrollableContent, { overflowY: true, smooth: true, ref: state.ref },
                            state.searchValue && state.shownItems.length === 0 && (React.createElement("div", null,
                                React.createElement(AddItem, { theme: "plain", size: "tiny", alignItems: "left", onClick: handleCreateTagFromSearch, dataHook: "manage-tags-modal-list-add" },
                                    React.createElement(Text, { skin: "primary" },
                                        React.createElement(Trans, { i18nKey: "cairo.tags.manageTags.modal.list.create.CTA", values: {
                                                tagName: `${state.searchValue.slice(0, TAG_MAX_LENGTH)}`,
                                            }, components: {
                                                name: React.createElement(Text, { weight: "bold", skin: "primary" }),
                                            } }))))),
                            state.shownItems.map((tag, idx) => (React.createElement(TagsListItem, { state: state, key: tag.id, tag: tag, isLastTag: !state.isShowingNewTagListItem &&
                                    idx === state.shownItems.length - 1 }))),
                            state.isShowingNewTagListItem && (React.createElement(NewTagItemEditable, { state: state }))))))),
        state.confirmModalState.value && (React.createElement(MessageActionModal, { dataHook: "manage-tags-modal-confirm-delete-modal", state: state.confirmModalState, content: React.createElement(Trans, { i18nKey: "cairo.tags.manageTags.modal.deleteModal.body", values: { name: state.tagToDelete?.name }, components: {
                    text: React.createElement(Text, null),
                    name: React.createElement(Text, { weight: "bold" }),
                } }), ...state.confirmModalState.value }))));
};
export const ManageTagsModal = observer(ManageTagsModalComponent);
//# sourceMappingURL=ManageTagsModal.js.map