import { StaticNotification, Button, Checkbox, FileUploaderDropContainer, FileUploaderItem, InlineLoading, RadioTile, Stack, TextArea, Tooltip, } from "@carbon/react";
import React, { useState } from "react";
import { Idea, Debug, Information, Chat } from "@carbon/react/icons";
import { submitFeedback } from "../../../api/help-center";
import { useC3UserConfiguration } from "../../c3-user-configuration/c3-user-configuration-provider";
import styled from "styled-components";
var ReportType;
(function (ReportType) {
    ReportType["Feedback"] = "feedback";
    ReportType["Idea"] = "idea";
    ReportType["Bug"] = "bug";
})(ReportType || (ReportType = {}));
var Title;
(function (Title) {
    Title["Feedback"] = "Describe your thoughts";
    Title["Idea"] = "Describe your suggestion";
    Title["Bug"] = "Describe the issue";
})(Title || (Title = {}));
var Placeholder;
(function (Placeholder) {
    Placeholder["Feedback"] = "Tell us about your experience";
    Placeholder["Idea"] = "Tell us how we can improve our product";
    Placeholder["Bug"] = "Tell us what went wrong";
})(Placeholder || (Placeholder = {}));
const StyledRadioTile = styled(RadioTile) `
	min-width: 200px;
`;
export const Feedback = (props) => {
    props.setHeader("Share your feedback");
    const { userToken } = useC3UserConfiguration();
    const [selectedType, setSelectedType] = useState(ReportType.Feedback);
    const [content, setContent] = useState({
        title: Title.Feedback,
        placeholder: Placeholder.Feedback,
    });
    const [suggestion, setSuggestion] = useState("");
    const [allowContact, setAllowContact] = useState(true);
    const [file, setFile] = useState(undefined);
    const [submitted, setSubmitted] = useState(false);
    const [isDoingAsyncWork, setisDoingAsyncWork] = useState(false);
    React.useEffect(() => {
        switch (selectedType) {
            case ReportType.Feedback:
                setContent({ title: Title.Feedback, placeholder: Placeholder.Feedback });
                break;
            case ReportType.Bug:
                setContent({ title: Title.Bug, placeholder: Placeholder.Bug });
                break;
            default:
                setContent({ title: Title.Idea, placeholder: Placeholder.Idea });
        }
    }, [selectedType]);
    function submit() {
        if (!userToken)
            return;
        setisDoingAsyncWork(true);
        props.mixpanelTrack?.("helpcenter:click", {
            to: "feedback_send",
            type: selectedType,
            from: origin,
        });
        const formData = new FormData();
        formData.append("reportType", selectedType);
        formData.append("suggestion", suggestion);
        formData.append("allowContact", "" + allowContact);
        if (props.salesPlanType) {
            formData.append("salesPlanType", props.salesPlanType);
        }
        if (file) {
            formData.append("file", file);
        }
        submitFeedback({
            token: userToken,
            audience: props.audience,
            formData,
        })
            .then(() => {
            setisDoingAsyncWork(false);
            setSubmitted(true);
        })
            .catch(() => {
            setisDoingAsyncWork(false);
        });
    }
    const orgIsEnterPriseOrPaidCC = props.salesPlanType === "enterprise" || props.salesPlanType === "paid-cc";
    if (submitted) {
        props.setHeader("");
        return (React.createElement("div", { style: {
                height: "100%",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
            } },
            React.createElement("div", { style: {
                    height: "200px",
                    width: "450px",
                } },
                React.createElement(Stack, { orientation: "horizontal", gap: 6 },
                    React.createElement("svg", { width: "62", height: "54", viewBox: "0 0 62 54", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
                        React.createElement("path", { d: "M60.7573 6.91209L56.137 2.22698C55.3173 1.39576 54.2441 0.972656 53.1711 0.972656C52.0981 0.972656 51.0248 1.39576 50.2051 2.22698L20.635 32.2572L11.7819 23.2496C10.9622 22.4184 9.88904 21.9953 8.81588 21.9953C7.74272 21.9953 6.66971 22.4032 5.85001 23.2496L1.22972 27.9347C-0.409906 29.5972 -0.409906 32.3025 1.22972 33.9649L20.65 53.6726L60.7723 12.9425C62.4117 11.2798 62.4117 8.57471 60.7573 6.91209Z", fill: "#FC5D0D" })),
                    React.createElement(Stack, { gap: 3 },
                        React.createElement("h2", null, "Feedback submitted successfully"),
                        React.createElement(Stack, { gap: 6 },
                            React.createElement("p", { style: { maxWidth: "400px" } }, orgIsEnterPriseOrPaidCC ? (React.createElement(React.Fragment, null, "Your feedback will be forwarded to your Customer Success Manager who will ensure that your inputs are addressed promptly.")) : (React.createElement(React.Fragment, null,
                                "Thanks for sharing your feedback. ",
                                React.createElement("br", null),
                                "We use suggestions like yours to improve our service."))),
                            React.createElement(Stack, { gap: 3 },
                                React.createElement(Button, { id: "additional-feedback-button", size: "md", onClick: () => {
                                        setSuggestion("");
                                        setFile(undefined);
                                        setSelectedType(ReportType.Feedback);
                                        setAllowContact(false);
                                        setSubmitted(false);
                                    } }, "Share additional feedback"))))))));
    }
    return (React.createElement("div", null,
        React.createElement(Stack, { gap: 6 },
            React.createElement("p", null, "We actively use this information to fix problems and improve your experience with our products."),
            !orgIsEnterPriseOrPaidCC && (React.createElement("div", null,
                React.createElement("h5", { style: { marginBottom: "12px" } }, "What type of feedback would you like to share?"),
                React.createElement("div", { style: {
                        display: "flex",
                        justifyContent: "space-between",
                        columnGap: "12px",
                    } },
                    React.createElement("div", { style: { flexGrow: "1" } },
                        React.createElement(StyledRadioTile, { checked: selectedType === ReportType.Feedback, onChange: (value) => setSelectedType(value), value: ReportType.Feedback },
                            React.createElement(Stack, null,
                                React.createElement(Chat, { size: "40" }),
                                React.createElement("p", null, "General feedback")))),
                    React.createElement("div", { style: { flexGrow: "1" } },
                        React.createElement(StyledRadioTile, { checked: selectedType === ReportType.Idea, onChange: (value) => setSelectedType(value), value: ReportType.Idea },
                            React.createElement(Stack, null,
                                React.createElement(Idea, { size: "40" }),
                                React.createElement("p", null, "Suggest an idea")))),
                    React.createElement("div", { style: { flexGrow: "1" } },
                        React.createElement(StyledRadioTile, { checked: selectedType === ReportType.Bug, onChange: (value) => setSelectedType(value), value: ReportType.Bug },
                            React.createElement(Stack, null,
                                React.createElement(Debug, { size: "40" }),
                                React.createElement("p", null, "Report a bug"))))))),
            React.createElement("div", null,
                React.createElement(Stack, null,
                    !orgIsEnterPriseOrPaidCC && (React.createElement("h5", { style: { marginBottom: "-16px" } }, content.title)),
                    orgIsEnterPriseOrPaidCC && (React.createElement(StaticNotification, { lowContrast: true, kind: "info", title: "If you are looking to get technical support, please use our Jira support system.", style: { maxWidth: "100%" }, actionButtonLabel: "Open a ticket", onActionButtonClick: () => window.open("https://jira.camunda.com/projects/SUPPORT/queues", "_blank"), "aria-describedby": "help-center-feedback-notification", titleId: "help-center-feedback-notification" })),
                    React.createElement(TextArea, { labelText: "", id: "feedback-text", placeholder: content.placeholder, rows: 4, onChange: (event) => {
                            setSuggestion(event.target.value);
                        }, value: suggestion }),
                    !orgIsEnterPriseOrPaidCC && (React.createElement(React.Fragment, null,
                        React.createElement("h5", null,
                            "Upload file (optional)",
                            React.createElement(Tooltip, { label: "Please be sure to redact any confidential information, such as intellectual property, addresses or account numbers before uploading files.", 
                                // eslint-disable-next-line
                                // @ts-ignore
                                align: "bottom" },
                                React.createElement(Button, { kind: "ghost", "aria-label": "Information", renderIcon: Information, iconDescription: "Information", style: {
                                        marginTop: "-10px",
                                        backgroundColor: props.theme === "light" ? "#FFFFFF" : "#161616",
                                        color: props.theme === "light" ? "#161616" : "#F4F4F4",
                                        paddingLeft: "0px",
                                    } }))),
                        React.createElement("p", { className: "cds--label-description", style: { marginTop: "-24px" } }, "Max. file size is 5MB. Supported file types are .jpg and .png."))),
                    !orgIsEnterPriseOrPaidCC &&
                        (() => {
                            if (file !== undefined) {
                                return (React.createElement(FileUploaderItem, { name: file.name, iconDescription: "Delete file", invalid: (() => {
                                        return file.size > 5000000;
                                    })(), status: "edit", errorSubject: "File exceeds size limit.", size: "lg", style: { marginTop: "-32px", maxWidth: "100%" }, onDelete: () => {
                                        setFile(undefined);
                                    } }));
                            }
                            else {
                                return (React.createElement(FileUploaderDropContainer, { labelText: "Drag and drop file here or click to upload", multiple: false, accept: ["image/jpeg", "image/jpg", "image/png"], onAddFiles: (_evt, { addedFiles }) => {
                                        setFile(addedFiles[0]);
                                    }, style: { marginTop: "-32px", maxWidth: "100%" } }));
                            }
                        })(),
                    !orgIsEnterPriseOrPaidCC && (React.createElement("div", null,
                        React.createElement(Checkbox, { id: "allow-contact", labelText: "Camunda may contact me about my feedback", checked: allowContact, onChange: () => {
                                setAllowContact(!allowContact);
                            } }))),
                    React.createElement("div", null,
                        React.createElement("div", null, isDoingAsyncWork ? (React.createElement(InlineLoading, { description: "Submitting feedback...", status: "active", style: { marginLeft: "1rem" } })) : (React.createElement(Button, { kind: "primary", disabled: suggestion.trim().length == 0, onClick: submit }, "Submit feedback")))))))));
};
