import React, { useEffect, useMemo, useState } from 'react';
import { TextButton, Box, Button, Card, Layout, } from '@wix/design-system';
import { observer } from 'mobx-react-lite';
import { useWixPatternsContainer, usePageContext } from '@wix/bex-core/react';
import { SidePanelsState } from '../../state/SidePanelsState';
import { CustomColumnsEntityPageState } from '../../state/CustomColumnsEntityPageState';
import { CustomColumnsEntityPagePanelMount } from '../CustomColumnsPanel/CustomColumnsEntityPagePanelMount';
import { useSchemaContext } from '../../providers/SchemaContext';
import { CustomColumnsDragAndDrop } from '../CustomColumns/CustomColumnsDragAndDrop';
import { SchemaCardState } from '../../state/SchemaCard/SchemaCardState';
import { Add } from '@wix/wix-ui-icons-common';
function _SchemaCard({ title, subtitle, renderField, ...rest }) {
    const container = useWixPatternsContainer();
    const { translate: t } = container;
    const { modalsContainerRef } = usePageContext();
    const schemaContext = useSchemaContext();
    const schema = schemaContext?.schema;
    const fields = useMemo(() => schema
        ? Object.keys(schema.fields)
            .filter((id) => schema.fields[id])
            .map((id) => ({ id }))
        : [], [schema?.fields]);
    const [schemaCardState] = useState(() => schema && fields.length > 0
        ? new SchemaCardState({
            fields,
            persistencyKey: schema.id,
            container,
        })
        : null);
    useEffect(() => schemaCardState?.init(), []);
    const fieldsState = schemaCardState?.fieldsState;
    const state = useMemo(() => {
        if (!fieldsState || !schema) {
            return null;
        }
        const panels = new SidePanelsState({
            container,
            panelGroupName: 'entity-page',
        });
        return new CustomColumnsEntityPageState({
            container,
            panels,
            fieldsState,
            schema,
            showFieldTypeIcons: true,
            dragAndDrop: CustomColumnsDragAndDrop,
            modalsContainerRef,
        });
    }, [fieldsState, schema]);
    return (React.createElement(Card, { ...rest },
        React.createElement(Card.Header, { title: title, subtitle: subtitle, suffix: state ? (React.createElement(Button, { size: "small", priority: "secondary", dataHook: "schema-card-manage-fields-button", onClick: () => state.panels.toggleSidePanel('customColumns') }, t('cairo.table.manage-fields.button.cta'))) : undefined }),
        React.createElement(Card.Divider, null),
        React.createElement(Card.Content, null,
            React.createElement(Layout, null, fieldsState &&
                fieldsState.orderedFields
                    .filter((f) => fieldsState.isFieldVisible(f.id))
                    .map((f) => renderField(f.id)))),
        schemaContext?.addField && (React.createElement(Box, { padding: "SP4", boxSizing: "border-box", width: "100%" },
            React.createElement(TextButton, { dataHook: "schema-card-add-field", onClick: schemaContext.addField, prefixIcon: React.createElement(Add, null) }, t('cairo.customFields.addCustomField.CTA')))),
        state && React.createElement(CustomColumnsEntityPagePanelMount, { state: state })));
}
_SchemaCard.displayName = 'SchemaCard';
export const SchemaCard = observer(_SchemaCard);
//# sourceMappingURL=SchemaCard.js.map