import React, { useState } from 'react';
import { observer } from 'mobx-react-lite';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { Box, Card, Cell, Layout, SkeletonLine, Text, TextButton, } from '@wix/design-system';
import { CardContainer } from '../CardContainer';
import { TagsWidgetContextProvider } from '../TagsWidgetContext';
import { TagsWidgetContent } from './TagsWidgetContent';
import { useWidgetPageStatus } from '../useWidgetPageStatus';
import { Refresh } from '@wix/wix-ui-icons-common';
import { useTagsWidgetInternal } from '../../hooks/useTagsWidget';
const InlineLayoutContent = ({ dataHook, state: _state, ...contentProps }) => {
    const { translate: t } = useWixPatternsContainer();
    const state = _state;
    const { status } = useWidgetPageStatus(state.initTask.status.status);
    if (status === 'idle' || status === 'loading') {
        return (React.createElement(Layout, null,
            React.createElement(Cell, { span: 8 },
                React.createElement("div", { "data-hook": dataHook },
                    React.createElement(SkeletonLine, { marginBottom: "7px", marginTop: "7px", dataHook: "tags-widget-skeleton" })))));
    }
    if (status === 'error') {
        return (React.createElement(Box, { justifyItems: "center", gap: "tiny", dataHook: dataHook },
            React.createElement(Text, { dataHook: "tags-widget-error-text" }, t('cairo.tags.loadTags.error.body')),
            React.createElement(TextButton, { dataHook: "tags-widget-retry-button", onClick: state.retry }, t('cairo.tags.loadTags.error.CTA'))));
    }
    return (React.createElement("div", { "data-hook": dataHook },
        React.createElement(TagsWidgetContent, { ...contentProps, state: state })));
};
const _TagsWidgetBase = ({ subtitle, dataHook, theme, state: _state, ...contentProps }) => {
    const { translate: t } = useWixPatternsContainer();
    const state = _state;
    const { status } = useWidgetPageStatus(state.initTask.status.status);
    if (theme === 'inline') {
        return (React.createElement(InlineLayoutContent, { dataHook: dataHook, state: state, ...contentProps }));
    }
    return (React.createElement(CardContainer, { dataHook: dataHook, status: status, errorState: {
            dataHook: 'error-state',
            subtitle: t('cairo.tags.loadTags.error.body'),
            action: {
                text: t('cairo.tags.loadTags.error.CTA'),
                prefixIcon: React.createElement(Refresh, null),
                onClick: state.retry,
            },
        } },
        React.createElement(Card.Header, { dataHook: "tags-widget-card-header", title: t('cairo.tags.tagsWidget.title'), subtitle: subtitle || t('cairo.tags.tagsWidget.subtitle') }),
        React.createElement(Card.Divider, null),
        React.createElement(Card.Content, { dataHook: "tags-widget-card-content" },
            React.createElement(TagsWidgetContent, { state: state, ...contentProps }))));
};
export const TagsWidgetBase = observer(_TagsWidgetBase);
const _TagsWidget = (props) => {
    const { origin, fqdn, state: externalState, ...baseComponentProps } = props;
    const internalState = useTagsWidgetInternal({
        origin,
        fqdn,
    });
    const [state] = useState(() => externalState ?? internalState);
    return (React.createElement(TagsWidgetContextProvider, { value: state },
        React.createElement(TagsWidgetBase, { state: state, ...baseComponentProps })));
};
export const TagsWidget = observer(_TagsWidget);
//# sourceMappingURL=TagsWidget.js.map