"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CONFIRM_DELETE_ACCOUNT = exports.REJECTION_VIEW = exports.ACCEPT_VIEW = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importStar(require("react"));
const system_1 = require("@mui/system");
const styles_1 = require("@mui/material/styles");
const material_1 = require("@mui/material");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
const api_services_1 = require("@selfcommunity/api-services");
const utils_1 = require("@selfcommunity/utils");
const react_core_1 = require("@selfcommunity/react-core");
const ConsentSolutionSwitch_1 = tslib_1.__importDefault(require("../../shared/ConsentSolutionSwitch"));
const Errors_1 = require("../../constants/Errors");
const Dialog_1 = tslib_1.__importDefault(require("@mui/material/Dialog"));
const DialogActions_1 = tslib_1.__importDefault(require("@mui/material/DialogActions"));
const DialogContent_1 = tslib_1.__importDefault(require("@mui/material/DialogContent"));
const DialogTitle_1 = tslib_1.__importDefault(require("@mui/material/DialogTitle"));
const Slide_1 = tslib_1.__importDefault(require("@mui/material/Slide"));
const LegalPolicies_1 = require("./../../constants/LegalPolicies");
const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
const legalPages_1 = require("../../utils/legalPages");
const react_intl_1 = require("react-intl");
const seamless_scroll_polyfill_1 = require("seamless-scroll-polyfill");
const AccountDataPortability_1 = tslib_1.__importDefault(require("../AccountDataPortability"));
const constants_1 = require("./constants");
const classes = {
    root: `${constants_1.PREFIX}-root`,
    title: `${constants_1.PREFIX}-title`,
    titleBack: `${constants_1.PREFIX}-title-back`,
    content: `${constants_1.PREFIX}-content`,
    consent: `${constants_1.PREFIX}-consent`,
    consentSwitch: `${constants_1.PREFIX}-consent-switch`,
    actions: `${constants_1.PREFIX}-actions`,
    backButton: `${constants_1.PREFIX}-back-button`,
    nextButton: `${constants_1.PREFIX}-next-button`,
    closeButton: `${constants_1.PREFIX}-close-button`,
    confirmDeleteAccountButton: `${constants_1.PREFIX}-confirm-delete-account-button`,
    logoutAccountButton: `${constants_1.PREFIX}-logout-account-button`,
    deleteAccountButton: `${constants_1.PREFIX}-delete-account-button`,
    dataPortability: `${constants_1.PREFIX}-data-portability`,
    dataPortabilityCheck: `${constants_1.PREFIX}-download-data-portability-check`,
    alertAcceptDocument: `${constants_1.PREFIX}-alert-accept-document`,
    acceptConditions: `${constants_1.PREFIX}-accept-conditions`
};
const Root = (0, styles_1.styled)(Dialog_1.default, {
    name: constants_1.PREFIX,
    slot: 'Root'
})(() => ({}));
/**
 * Translations
 */
const messages = (0, react_intl_1.defineMessages)({
    deleteAccountDpSectionInfo: {
        id: 'ui.consentSolution.deleteAccountDpSectionInfo',
        defaultMessage: 'ui.consentSolution.deleteAccountDpSectionInfo'
    },
    deleteAccountDpSectionTitle: {
        id: 'ui.consentSolution.deleteAccountDpSectionTitle',
        defaultMessage: 'ui.consentSolution.deleteAccountDpSectionTitle'
    }
});
/**
 * Dialog default transition
 */
const DialogTransition = (0, react_1.forwardRef)(function Transition(props, ref) {
    return (0, jsx_runtime_1.jsx)(Slide_1.default, Object.assign({ direction: "up", ref: ref }, props));
});
/**
 * Dialog views
 */
exports.ACCEPT_VIEW = 'accept';
exports.REJECTION_VIEW = 'rejection';
exports.CONFIRM_DELETE_ACCOUNT = 'delete_account';
/**
 * > API documentation for the Community-JS ConsentSolution component. Learn about the available props and the CSS API.
 *
 #### Import
 ```jsx
 import {ConsentSolution} from '@selfcommunity/react-ui';
 ```

 #### Component Name
 The name `SCConsentSolution` can be used when providing style overrides in the theme.

 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCConsentSolution-root|Styles applied to the root element.|
 |title|.SCConsentSolution-title|Styles applied to the title element.|
 |titleBack|.SCConsentSolution-title-back|Styles applied to the title with the back button element.|
 |content|.SCConsentSolution-content|Styles applied to the content element section.|
 |consent|.SCConsentSolution-consent|Styles applied to the consent element section.|
 |consentSwitch|.SCConsentSolution-consent-switch|Styles applied to the switch element. |
 |alertAcceptDocument|.SCConsentSolution-alert-accept-document|Styles applied to the alert box in the consent section.|nt.|
 |actions|.SCConsentSolution-actions|Styles applied to the actions section.|
 |backButton|.SCConsentSolution-back-button|Styles applied to the back button in the title and action sections.|
 |nextButton|.SCConsentSolution-next-button|Styles applied to the next button in the actions section.|
 |closeButton|.SCConsentSolution-close-button|Styles applied to the close button in the actions section.|
 |confirmDeleteAccountButton|.SCConsentSolution-confirm-delete-account-button|Styles applied to the confirm delete account button in the rejection section.|
 |logoutAccountButton|.SCConsentSolution-logout-account-button|Styles applied to the exit account button in the rejection section.|
 |deleteAccountButton|.SCConsentSolution-delete-account-button|Styles applied to the delete account button in the rejection section.|
 |dataPortability|.SCConsentSolution-data-portability|Styles applied to the data portability component in the rejection section.|
 |dataPortabilityCheck|.SCConsentSolution-data-portability-check|Styles applied to the checkbox in the rejection section.|

 * @param inProps
 */
function ConsentSolution(inProps) {
    // PROPS
    const props = (0, system_1.useThemeProps)({
        props: inProps,
        name: constants_1.PREFIX
    });
    const { className, open = true, onClose, legalPolicies = LegalPolicies_1.LEGAL_POLICIES, onLogout, onDeleteAccount } = props, rest = tslib_1.__rest(props, ["className", "open", "onClose", "legalPolicies", "onLogout", "onDeleteAccount"]);
    // CONTEXT
    const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
    // PREFERENCES
    const scPreferences = (0, react_core_1.useSCPreferences)();
    const communityName = (0, react_1.useMemo)(() => {
        return scPreferences.preferences && react_core_1.SCPreferences.TEXT_APPLICATION_NAME in scPreferences.preferences
            ? scPreferences.preferences[react_core_1.SCPreferences.TEXT_APPLICATION_NAME].value
            : null;
    }, [scPreferences.preferences]);
    // STATE
    const [ready, setReady] = react_1.default.useState(false);
    const [_view, setView] = (0, react_1.useState)(exports.ACCEPT_VIEW);
    const [documents, setDocuments] = (0, react_1.useState)([]);
    const [currentDocument, setCurrentDocument] = (0, react_1.useState)(null);
    const [loading, setLoading] = (0, react_1.useState)(true);
    const [loadingAck, setLoadingAck] = (0, react_1.useState)(false);
    const [rejected, setRejected] = (0, react_1.useState)(false);
    const [dataPortability, setDataPortability] = (0, react_1.useState)(null);
    const [dataPortabilityChecked, setDataPortabilityChecked] = (0, react_1.useState)(false);
    const [loadingDeleteAccount, setLoadingDeleteAccount] = (0, react_1.useState)(false);
    // CONST
    const authUserId = scUserContext.user ? scUserContext.user.id : null;
    const doc = documents[currentDocument];
    // REFS
    const contentDialog = (0, react_1.useRef)(null);
    // INTL
    const intl = (0, react_intl_1.useIntl)();
    /**
     * Handle close dialog
     */
    const handleClose = (e, s) => {
        if (doc.ack && doc.ack.accepted_at) {
            setReady(false);
            // Call dialog callback if exist
            onClose && onClose(e, s);
        }
    };
    /**
     * Handle close dialog
     */
    const handleNext = () => {
        if (doc.ack && doc.ack.accepted_at) {
            contentDialog.current && (0, seamless_scroll_polyfill_1.elementScrollTo)(contentDialog.current, { top: 0, behavior: 'smooth' });
            setCurrentDocument((prev) => prev + 1);
        }
        else {
            setRejected(true);
        }
    };
    /**
     * Handle accept (ack a policy document)
     */
    const handleChangeConsent = (accept) => {
        setLoadingAck(true);
        let legalPages = [...documents];
        api_services_1.LegalPageService.ackLegalPage(legalPages[currentDocument].id, Number(accept).toString())
            .then((ack) => {
            if (accept) {
                legalPages[currentDocument].ack = ack;
                setRejected(false);
            }
            else {
                legalPages[currentDocument].ack.accepted_at = null;
                setRejected(true);
            }
            setLoadingAck(false);
            setDocuments(legalPages);
        })
            .catch((_error) => {
            setLoadingAck(false);
            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, _error);
        });
    };
    /**
     * Handle confirm delete account
     */
    const handleConfirmDeleteAccount = () => {
        setLoadingDeleteAccount(true);
        api_services_1.UserService.userDelete(scUserContext.user.id, 0)
            .then(() => {
            setLoadingDeleteAccount(false);
            onDeleteAccount && onDeleteAccount(scUserContext.user);
            handleLogout();
        })
            .catch((_error) => {
            setLoadingDeleteAccount(false);
            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, _error);
        });
    };
    /**
     * Handle logout
     */
    const handleLogout = () => {
        scUserContext.logout();
        onLogout && onLogout();
    };
    /**
     * Fetch tec and privacy document status
     */
    const fetchLegalPages = () => {
        setLoading(true);
        return api_services_1.LegalPageService.getAllLastRevisionsOfLegalPages()
            .then((documents) => {
            // filter documents (show only privacy and tec)
            let docs = documents.filter((lp) => legalPolicies.filter((p) => lp.slug.startsWith(p)).length > 0);
            // if initial legalPolicies !== LEGAL_POLICIES
            if ((0, utils_1.arraysEqual)(legalPolicies, LegalPolicies_1.LEGAL_POLICIES)) {
                docs = docs.filter((d) => !(0, legalPages_1.isEmptyDocumentBody)(d) && !(0, legalPages_1.isDocumentApproved)(d));
            }
            setDocuments(docs);
            setLoading(false);
            if (docs.length > 0) {
                setCurrentDocument(0);
                setReady(true);
            }
            Promise.resolve(docs);
        })
            .catch((_error) => {
            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, _error);
        });
    };
    /**
     * On mount, fetches legal and custom documents
     */
    (0, react_1.useEffect)(() => {
        if (!authUserId) {
            return;
        }
        fetchLegalPages();
    }, [authUserId]);
    /**
     * Render main view
     */
    const renderMainView = () => {
        if (!doc) {
            return null;
        }
        const isAccept = Boolean(doc.ack && doc.ack.accepted_at);
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DialogTitle_1.default, Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.acceptDocumentTitle", defaultMessage: "ui.consentSolution.acceptDocumentTitle", values: { label: doc.title } }) })), (0, jsx_runtime_1.jsx)(DialogContent_1.default, Object.assign({ className: classes.content, dividers: true, ref: contentDialog }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { component: "div", gutterBottom: true, dangerouslySetInnerHTML: {
                            __html: (0, legalPages_1.getDocumentBody)(doc)
                        } }) })), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, Object.assign({ className: classes.consent, dividers: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { className: classes.consentSwitch, control: (0, jsx_runtime_1.jsx)(ConsentSolutionSwitch_1.default, { loading: loadingAck, disabled: loadingAck, checked: isAccept, onChange: () => handleChangeConsent(!isAccept), name: "consent" }), label: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.consentSwitchLabel", defaultMessage: "ui.consentSolution.consentSwitchLabel" }) }) }), rejected ? ((0, jsx_runtime_1.jsxs)(material_1.Alert, Object.assign({ severity: "error", className: classes.alertAcceptDocument }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccountAlert", defaultMessage: "ui.consentSolution.deleteAccountAlert" }), (0, jsx_runtime_1.jsx)("a", Object.assign({ onClick: () => setView(exports.REJECTION_VIEW), className: classes.deleteAccountButton }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccount", defaultMessage: "ui.consentSolution.deleteAccount" }) }) }))] }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.acceptConditions }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.consentSwitchDetail", defaultMessage: "ui.consentSolution.consentSwitchDetail" }) })) }))] })), (0, jsx_runtime_1.jsxs)(DialogActions_1.default, Object.assign({ className: classes.actions }, { children: [currentDocument > 0 && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", onClick: () => setCurrentDocument((prev) => prev - 1), className: classes.backButton }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) }))), currentDocument < documents.length - 1 ? ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'outlined', disabled: !isAccept, onClick: handleNext, className: classes.nextButton }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.nextButton", defaultMessage: "ui.consentSolution.nextButton" }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'outlined', disabled: !isAccept, onClick: (e) => handleClose(e, null), className: classes.closeButton }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.closeButton", defaultMessage: "ui.consentSolution.closeButton" }) })))] }))] }));
    };
    /**
     * Render document detail view
     */
    const renderRejectionView = () => {
        const doc = documents[currentDocument];
        if (!doc) {
            return null;
        }
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DialogTitle_1.default, Object.assign({ className: (0, classnames_1.default)(classes.title, classes.titleBack) }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'outlined', onClick: () => setView(exports.ACCEPT_VIEW), className: classes.backButton, startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "arrow_back" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) })) })), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, Object.assign({ className: classes.content, dividers: true }, { children: [(0, jsx_runtime_1.jsx)(AccountDataPortability_1.default, { className: classes.dataPortability }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccountDpSectionTitle", defaultMessage: "ui.consentSolution.deleteAccountDpSectionTitle", values: { username: (0, utils_1.capitalize)(scUserContext.user.username) } }) })), (0, jsx_runtime_1.jsx)("ul", { children: intl.formatMessage(messages.deleteAccountDpSectionInfo, { communityName, li: (chunks) => (0, jsx_runtime_1.jsx)("li", { children: chunks }) }) }), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { className: classes.dataPortabilityCheck, checked: dataPortabilityChecked, onChange: () => setDataPortabilityChecked((p) => !p) }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccountDpSectionCheckboxLabel", defaultMessage: "ui.consentSolution.deleteAccountDpSectionCheckboxLabel" }) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "delete_outlined" }), disabled: !dataPortabilityChecked, variant: 'contained', className: classes.confirmDeleteAccountButton, onClick: () => setView(exports.CONFIRM_DELETE_ACCOUNT) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.confirmDeleteAccountButton", defaultMessage: "ui.consentSolution.confirmDeleteAccountButton" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'outlined', className: classes.logoutAccountButton, startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "upload" }), onClick: handleLogout }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.logoutImmediatelyButton", defaultMessage: "ui.consentSolution.logoutImmediatelyButton" }) }))] }))] }));
    };
    /**
     * Render delete account view
     */
    const renderDeleteAccountView = () => {
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DialogTitle_1.default, Object.assign({ className: (0, classnames_1.default)(classes.title, classes.titleBack) }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: () => setView(exports.REJECTION_VIEW), className: classes.backButton, startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "arrow_back" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) })) })), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, Object.assign({ className: classes.content, dividers: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountTitle", defaultMessage: "ui.consentSolution.removeAccountTitle" }) })), (0, jsx_runtime_1.jsx)("ul", { children: intl.formatMessage(messages.deleteAccountDpSectionInfo, { communityName, li: (chunks) => (0, jsx_runtime_1.jsx)("li", { children: chunks }) }) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountConfirm", defaultMessage: "ui.consentSolution.removeAccountConfirm" }) }) }))] })), (0, jsx_runtime_1.jsxs)(DialogActions_1.default, Object.assign({ className: classes.actions }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: () => setView(exports.REJECTION_VIEW) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountCancelButton", defaultMessage: "ui.consentSolution.removeAccountCancelButton" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: handleConfirmDeleteAccount }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountConfirmButton", defaultMessage: "ui.consentSolution.removeAccountConfirmButton" }) }))] }))] }));
    };
    /**
     * If there's no authUserId, component is hidden.
     */
    if (!authUserId) {
        return null;
    }
    /**
     * Set content dialog component
     */
    let content = () => null;
    if (ready && doc && !loading) {
        switch (_view) {
            case exports.ACCEPT_VIEW:
                content = renderMainView;
                break;
            case exports.REJECTION_VIEW:
                content = renderRejectionView;
                break;
            case exports.CONFIRM_DELETE_ACCOUNT:
                content = renderDeleteAccountView;
                break;
            default:
                content = renderMainView;
                break;
        }
    }
    else {
        content = () => (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
    }
    /**
     * Renders root object
     */
    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: open && ((0, jsx_runtime_1.jsx)(Root, Object.assign({ "aria-describedby": "consent--solution-dialog", className: (0, classnames_1.default)(classes.root, className), TransitionComponent: DialogTransition, maxWidth: 'md', fullWidth: true, open: ready, disableEscapeKeyDown: true, onClose: handleClose, scroll: 'paper' }, rest, { children: content() }))) }));
}
exports.default = ConsentSolution;
