import React, { memo, useState, useRef } from 'react';
import { Button, Card, CardBody, CardHeader, CardTitle, Flex, FlexItem, Panel, PanelFooter, PanelHeader, PanelMain, PanelMainBody, Content, ContentVariants } from '@patternfly/react-core';
import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
import { ExternalLinkAltIcon } from '@patternfly/react-icons';
import feedbackImage from '../images/pf_feedback.svg';
import { FeedbackForm } from './FeedbackForm';
import FeedbackSuccess from './FeedbackSuccess';
import FeedbackError from './FeedbackError';
import { LocaleContext } from '../context/LocaleContext';
export const FeedbackModalInternal = memo(({ email, isOpen, onShareFeedback, onJoinMailingList, onReportABug, onOpenSupportCase, onClose, feedbackImg }) => {
    const intl = React.useContext(LocaleContext);
    const emailRef = useRef(email ? email : '');
    const [modalPage, setModalPage] = useState('feedbackHome');
    const handleCloseModal = () => {
        if (onClose) {
            onClose();
        }
        setModalPage('feedbackHome');
    };
    const updateEmail = (email) => {
        if (emailRef.current !== email && email !== '') {
            emailRef.current = email;
        }
    };
    const onSubmit = (feedbackPage, results) => {
        if (results instanceof Promise) {
            results.then((results) => {
                results === false ? setModalPage('feedbackError') : setModalPage(feedbackPage);
            });
        }
        else {
            results === false ? setModalPage('feedbackError') : setModalPage(feedbackPage);
        }
    };
    const ModalDescription = ({ modalPage }) => {
        switch (modalPage) {
            case 'feedbackHome':
                return (React.createElement(Panel, { isScrollable: true, className: "chr-c-feedback-content" },
                    React.createElement(PanelHeader, { className: "chr-c-feedback-heading" },
                        React.createElement(FlexItem, null,
                            React.createElement(Content, { component: ContentVariants.h1 }, intl.tellAboutExperience)),
                        React.createElement(FlexItem, null,
                            React.createElement(Content, { component: "p" }, intl.helpUsImproveHCC))),
                    React.createElement(PanelMain, { tabIndex: 0, className: "chr-c-feedback-content-main" },
                        React.createElement(PanelMainBody, { className: "chr-c-feedback-cards" },
                            React.createElement(Card, { isCompact: true, isClickable: true, variant: "secondary" },
                                React.createElement(CardHeader, { selectableActions: {
                                        // eslint-disable-next-line no-console
                                        onClickAction: () => {
                                            typeof onShareFeedback === 'string'
                                                ? window.open(onShareFeedback, '_blank')
                                                : setModalPage('feedbackOne');
                                        },
                                        selectableActionId: 'feedback-card-1',
                                        selectableActionAriaLabelledby: 'feedback-card-1',
                                        name: 'feedback-card'
                                    } }),
                                React.createElement(CardTitle, null,
                                    intl.shareFeedback,
                                    " ",
                                    typeof onShareFeedback === 'string' ? React.createElement(ExternalLinkAltIcon, null) : null),
                                React.createElement(CardBody, null,
                                    intl.howIsConsoleExperience,
                                    " ")),
                            onReportABug && (React.createElement(Card, { isCompact: true, isClickable: true, variant: "secondary" },
                                React.createElement(CardHeader, { selectableActions: {
                                        // eslint-disable-next-line no-console
                                        onClickAction: () => {
                                            typeof onReportABug === 'string'
                                                ? window.open(onReportABug, '_blank')
                                                : setModalPage('reportBugOne');
                                        },
                                        selectableActionId: 'report-bug-card-1',
                                        selectableActionAriaLabelledby: 'report-bug-card-1',
                                        name: 'report-bug-card'
                                    } }),
                                React.createElement(CardTitle, null,
                                    intl.reportABug,
                                    " ",
                                    typeof onReportABug === 'string' ? React.createElement(ExternalLinkAltIcon, null) : null,
                                    ' '),
                                React.createElement(CardBody, null, intl.describeBugUrgentCases))),
                            onOpenSupportCase && (React.createElement(Card, { isCompact: true, isClickable: true, variant: "secondary" },
                                React.createElement(CardHeader, { selectableActions: {
                                        // eslint-disable-next-line no-console
                                        onClickAction: () => {
                                            window.open(onOpenSupportCase, '_blank');
                                        },
                                        selectableActionId: 'open-support-case-card-1',
                                        selectableActionAriaLabelledby: 'open-support-case-card-1',
                                        name: 'open-support-case-card'
                                    } }),
                                React.createElement(CardTitle, null,
                                    React.createElement(Content, { component: "p" },
                                        intl.openSupportCase,
                                        " ",
                                        React.createElement(ExternalLinkAltIcon, null))),
                                React.createElement(CardBody, null, intl.getSupport))),
                            onJoinMailingList && (React.createElement(Card, { isCompact: true, isClickable: true, variant: "secondary" },
                                React.createElement(CardHeader, { selectableActions: {
                                        // eslint-disable-next-line no-console
                                        onClickAction: () => {
                                            typeof onJoinMailingList === 'string'
                                                ? window.open(onJoinMailingList, '_blank')
                                                : setModalPage('informDirection');
                                        },
                                        selectableActionId: 'join-mailing-list-card-1',
                                        selectableActionAriaLabelledby: 'join-mailing-list-card-1',
                                        name: 'join-mailing-list-card'
                                    } }),
                                React.createElement(CardTitle, null,
                                    React.createElement(Content, { component: "p" },
                                        intl.informDirection,
                                        ' ',
                                        typeof onJoinMailingList === 'string' ? React.createElement(ExternalLinkAltIcon, null) : null)),
                                React.createElement(CardBody, null, intl.learnAboutResearchOpportunities))))),
                    React.createElement(PanelFooter, { className: "chr-c-feedback-footer" },
                        React.createElement(Button, { ouiaId: "cancel-feedback", key: "cancel", variant: "link", onClick: handleCloseModal }, intl.cancel))));
            case 'feedbackOne':
                return (React.createElement(FeedbackForm, { email: emailRef.current, onCloseModal: handleCloseModal, onSubmit: (email, textAreaValue) => {
                        let results = true;
                        if (onShareFeedback && typeof onShareFeedback === 'function') {
                            results = onShareFeedback(email, textAreaValue);
                            updateEmail(email);
                        }
                        onSubmit('feedbackSuccess', results);
                    }, onClickBack: () => setModalPage('feedbackHome'), handleFeedbackError: () => setModalPage('feedbackError'), modalTitle: intl.shareYourFeedback, textareaLabel: intl.enterFeedback, feedbackType: "Feedback", checkboxDescription: intl.learnAboutResearchOpportunities, submitTitle: intl.submitFeedback }));
            case 'reportBugOne':
                return (React.createElement(FeedbackForm, { email: emailRef.current, onCloseModal: handleCloseModal, onSubmit: (email, textAreaValue) => {
                        let results = true;
                        if (onReportABug && typeof onReportABug === 'function') {
                            results = onReportABug(email, textAreaValue);
                            updateEmail(email);
                        }
                        onSubmit('bugReportSuccess', results);
                    }, onClickBack: () => setModalPage('feedbackHome'), handleFeedbackError: () => setModalPage('feedbackError'), modalTitle: intl.reportABug, modalDescription: React.createElement(Content, { component: "p" },
                        intl.describeReportBug,
                        ' ',
                        React.createElement(Content, { component: "a", href: "https://access.redhat.com/support/cases/#/case/new/open-case?caseCreate=true", target: "_blank" },
                            intl.openSupportCase,
                            " ",
                            React.createElement(ExternalLinkAltIcon, null))), feedbackType: "Bug", checkboxDescription: `${intl.learnAboutResearchOpportunities} ${intl.weNeverSharePersonalInformation}`, submitTitle: intl.submitFeedback }));
            case 'informDirection':
                return (React.createElement(FeedbackForm, { email: emailRef.current, onCloseModal: handleCloseModal, onSubmit: (email, _textAreaValue) => {
                        let results = true;
                        if (onJoinMailingList && typeof onJoinMailingList === 'function') {
                            results = onJoinMailingList(email);
                            updateEmail(email);
                        }
                        onSubmit('informDirectionSuccess', results);
                    }, onClickBack: () => setModalPage('feedbackHome'), handleFeedbackError: () => setModalPage('feedbackError'), modalTitle: intl.informDirection, modalDescription: React.createElement(Content, { component: "p" },
                        intl.informDirectionDescription,
                        React.createElement(Content, { component: "a", href: "https://www.redhat.com/en/about/user-research", target: "_blank" }, intl.userResearchTeam),
                        intl.directInfluence), feedbackType: "[Research Opportunities]", textAreaHidden: true, checkboxDescription: intl.weNeverSharePersonalInformation, submitTitle: intl.joinMailingList }));
            case 'feedbackSuccess':
                return (React.createElement(FeedbackSuccess, { successTitle: intl.feedbackSent, successDescription: intl.thankYouForFeedback, onCloseModal: handleCloseModal }));
            case 'bugReportSuccess':
                return (React.createElement(FeedbackSuccess, { successTitle: intl.bugReported, successDescription: intl.teamWillReviewBug, onCloseModal: handleCloseModal }));
            case 'informDirectionSuccess':
                return (React.createElement(FeedbackSuccess, { successTitle: intl.responseSent, successDescription: intl.thankYouForInterest, onCloseModal: handleCloseModal }));
            case 'feedbackError':
                return React.createElement(FeedbackError, { onCloseModal: handleCloseModal });
        }
    };
    return (React.createElement(React.Fragment, null,
        React.createElement(Modal, { "aria-label": "Feedback modal", isOpen: isOpen, className: "chr-c-feedback-modal", variant: ModalVariant.large, onClose: handleCloseModal, hasNoBodyWrapper: true },
            React.createElement(Flex, { className: "chr-c-feedback-flex", direction: { default: 'row' }, alignItems: { default: 'alignItemsStretch' } },
                React.createElement(FlexItem, { className: "chr-c-feedback-description", flex: { default: 'flex_2' } },
                    React.createElement(ModalDescription, { modalPage: modalPage })),
                React.createElement(FlexItem, { className: "chr-c-feedback-image", flex: { default: 'flex_1' } },
                    React.createElement("img", { alt: "feedback illustration", src: feedbackImg ? feedbackImg : feedbackImage }))))));
});
FeedbackModalInternal.displayName = 'FeedbackModal';
export default FeedbackModalInternal;
