import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from 'react';
import { styled } from '@mui/material/styles';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { TextField, Typography, FormGroup } from '@mui/material';
import { http, Endpoints } from '@selfcommunity/api-services';
import { Logger } from '@selfcommunity/utils';
import { useSCUser } from '@selfcommunity/react-core';
import BaseDialog from '../../../shared/BaseDialog';
import classNames from 'classnames';
import { SCOPE_SC_UI } from '../../../constants/Errors';
import { LoadingButton } from '@mui/lab';
import { PREFIX } from '../constants';
const messages = defineMessages({
    name: {
        id: 'ui.incubatorListWidget.createIncubatorDialog.formPlaceholder.name',
        defaultMessage: 'ui.incubatorListWidget.createIncubatorDialog.formPlaceholder.name'
    },
    slogan: {
        id: 'ui.incubatorListWidget.createIncubatorDialog.formPlaceholder.slogan',
        defaultMessage: 'ui.incubatorListWidget.createIncubatorDialog.formPlaceholder.slogan'
    }
});
const classes = {
    root: `${PREFIX}-create-dialog-root`,
    form: `${PREFIX}-form`,
    name: `${PREFIX}-name`,
    slogan: `${PREFIX}-slogan`,
    intro: `${PREFIX}-intro`,
    submittedMessage: `${PREFIX}-submitted-message`
};
const Root = styled(BaseDialog, {
    name: PREFIX,
    slot: 'CreateDialogRoot'
})(() => ({}));
export default function CreateIncubatorDialog(props) {
    // PROPS
    const { className, open, onClose } = props, rest = __rest(props, ["className", "open", "onClose"]);
    // CONTEXT
    const scUserContext = useSCUser();
    // INTL
    const intl = useIntl();
    // STATE
    const [name, setName] = useState('');
    const [slogan, setSlogan] = useState('');
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [submitted, setSubmitted] = useState(false);
    const [error, setError] = useState('');
    // HANDLERS
    const handleSubmit = (event) => {
        event.preventDefault();
        setIsSubmitting(true);
        http
            .request({
            url: Endpoints.CreateAnIncubator.url(),
            method: Endpoints.CreateAnIncubator.method,
            data: {
                name: name,
                slogan: slogan
            }
        })
            .then((res) => {
            setIsSubmitting(false);
            setSubmitted(true);
        })
            .catch((error) => {
            setError(error);
            setIsSubmitting(false);
            Logger.error(SCOPE_SC_UI, error);
        });
    };
    if (!scUserContext.user) {
        return null;
    }
    let dialogContent;
    if (submitted) {
        dialogContent = (_jsx(Typography, Object.assign({ variant: 'subtitle2', className: classes.submittedMessage }, { children: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.createIncubatorDialog.propose.success", defaultMessage: "ui.incubatorListWidget.createIncubatorDialog.propose.success" }) })));
    }
    else {
        dialogContent = (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ component: 'span', className: classes.intro }, { children: _jsx(FormattedMessage, { id: "ui.incubatorsListDialog.createIncubatorDialog.intro", defaultMessage: "ui.incubatorsListDialog.createIncubatorDialog.intro" }) })), _jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [_jsx(TextField, { required: true, error: Boolean(error), className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: name, onChange: (event) => setName(event.target.value) }), _jsx(TextField, { multiline: true, error: Boolean(error), className: classes.slogan, placeholder: `${intl.formatMessage(messages.slogan)}`, margin: "normal", value: slogan, onChange: (event) => setSlogan(event.target.value) })] })), _jsx(LoadingButton, Object.assign({ loading: isSubmitting, disabled: !name || Boolean(error), variant: "contained", onClick: handleSubmit }, { children: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.createIncubatorDialog.button", defaultMessage: "ui.incubatorListWidget.createIncubatorDialog.button" }) }))] }));
    }
    // RENDER
    return (_jsx(Root, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.createIncubatorDialog.title", defaultMessage: "ui.incubatorListWidget.createIncubatorDialog.title" }), open: open, onClose: onClose, className: classNames(classes.root, className) }, rest, { children: dialogContent })));
}
