"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const material_1 = require("@mui/material");
const styles_1 = require("@mui/material/styles");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const Editor_1 = tslib_1.__importDefault(require("../../../Editor"));
const react_intl_1 = require("react-intl");
const Composer_1 = require("../../../../constants/Composer");
const constants_1 = require("../../constants");
const classes = {
    root: `${constants_1.PREFIX}-content-discussion-root`,
    generalError: `${constants_1.PREFIX}-general-error`,
    title: `${constants_1.PREFIX}-content-discussion-title`,
    medias: `${constants_1.PREFIX}-content-discussion-medias`,
    editor: `${constants_1.PREFIX}-content-discussion-editor`
};
const Root = (0, styles_1.styled)(material_1.Box, {
    name: constants_1.PREFIX,
    slot: 'ContentDiscussionRoot'
})(({ theme }) => ({}));
/**
 * Default post
 */
const DEFAULT_DISCUSSION = {
    title: '',
    categories: [],
    group: null,
    event: null,
    medias: [],
    html: '',
    addressing: []
};
exports.default = (props) => {
    // PROPS
    const { className = null, value = Object.assign({}, DEFAULT_DISCUSSION), error = {}, disabled = false, onChange, EditorProps = {} } = props;
    const { titleError = null, error: generalError = null } = Object.assign({}, error);
    // HOOKS
    const intl = (0, react_intl_1.useIntl)();
    // HANDLERS
    const handleChangeTitle = (0, react_1.useCallback)((event) => {
        onChange(Object.assign(Object.assign({}, value), { title: event.target.value }));
    }, [value]);
    const handleChangeHtml = (0, react_1.useCallback)((html) => {
        onChange(Object.assign(Object.assign({}, value), { html }));
    }, [value]);
    // RENDER
    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [generalError && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.generalError }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.composer.error.${generalError}`, defaultMessage: `ui.composer.error.${generalError}` }) }))), (0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.title, placeholder: intl.formatMessage({
                    id: 'ui.composer.content.discussion.title.label',
                    defaultMessage: 'ui.composer.content.discussion.title.label'
                }), autoFocus: true, fullWidth: true, variant: "outlined", value: value.title, multiline: true, onChange: handleChangeTitle, InputProps: {
                    endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: Composer_1.COMPOSER_TITLE_MAX_LENGTH - value.title.length }))
                }, error: Boolean(titleError), helperText: titleError, disabled: disabled }), (0, jsx_runtime_1.jsx)(Editor_1.default, Object.assign({}, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, defaultValue: value.html }))] })));
};
