import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useRef } from 'react';
import { Box, Typography } from '@mui/material';
import { styled } from '@mui/material/styles';
import classNames from 'classnames';
import Editor from '../../../Editor';
import { PREFIX } from '../../constants';
import { FormattedMessage } from 'react-intl';
const classes = {
    root: `${PREFIX}-content-post-root`,
    generalError: `${PREFIX}-general-error`,
    medias: `${PREFIX}-content-post-medias`,
    editor: `${PREFIX}-content-post-editor`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'ContentPostRoot'
})(({ theme }) => ({}));
/**
 * Default post
 */
const DEFAULT_POST = {
    categories: [],
    medias: [],
    html: '',
    addressing: [],
    event: null,
    group: null
};
export default (props) => {
    // PROPS
    const { className = null, value = Object.assign({}, DEFAULT_POST), error = {}, disabled = false, onChange, EditorProps = {} } = props;
    const { error: generalError = null } = Object.assign({}, error);
    // REF
    const editorRef = useRef();
    // EFFECTS
    useEffect(() => {
        editorRef && editorRef.current && editorRef.current.focus();
    }, [editorRef]);
    // HANDLERS
    const handleChangeHtml = useCallback((html) => {
        onChange(Object.assign(Object.assign({}, value), { html }));
    }, [value]);
    // RENDER
    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [generalError && (_jsx(Typography, Object.assign({ className: classes.generalError }, { children: _jsx(FormattedMessage, { id: `ui.composer.error.${generalError}`, defaultMessage: `ui.composer.error.${generalError}` }) }))), _jsx(Editor, Object.assign({ ref: editorRef }, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, defaultValue: value.html }))] })));
};
