"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 styles_1 = require("@mui/material/styles");
const material_1 = require("@mui/material");
const react_intl_1 = require("react-intl");
const react_core_1 = require("@selfcommunity/react-core");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const system_1 = require("@mui/system");
const types_1 = require("../../types");
const SocialShare_1 = require("../../constants/SocialShare");
const messages = (0, react_intl_1.defineMessages)({
    provider: {
        id: 'ui.userSocialAssociation.provider',
        defaultMessage: 'ui.userSocialAssociation.provider'
    },
    actions: {
        id: 'ui.userSocialAssociation.actions',
        defaultMessage: 'ui.userSocialAssociation.actions'
    },
    socialAdd: {
        id: 'ui.userSocialAssociation.add',
        defaultMessage: 'ui.userSocialAssociation.add'
    },
    socialRemove: {
        id: 'ui.userSocialAssociation.remove',
        defaultMessage: 'ui.userSocialAssociation.remove'
    }
});
const PREFIX = 'SCUserSocialAssociation';
const classes = {
    root: `${PREFIX}-root`,
    field: `${PREFIX}-field`,
    providerTable: `${PREFIX}-provider-table`,
    providerIcon: `${PREFIX}-provider-icon`,
    providerName: `${PREFIX}-provider-name`,
    providerAction: `${PREFIX}-provider-action`
};
const Root = (0, styles_1.styled)(material_1.Stack, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (props, styles) => styles.root
})(({ theme }) => ({}));
const PREFERENCES = [
    react_core_1.SCPreferences.PROVIDERS_FACEBOOK_SIGNIN_ENABLED,
    react_core_1.SCPreferences.PROVIDERS_GOOGLE_SIGNIN_ENABLED,
    react_core_1.SCPreferences.PROVIDERS_TWITTER_SIGNIN_ENABLED,
    react_core_1.SCPreferences.PROVIDERS_LINKEDIN_SIGNIN_ENABLED
];
/**
 * > API documentation for the Community-JS User Social Association component. Learn about the available props and the CSS API.

 #### Import

 ```jsx
 import {UserSocialAssociation} from '@selfcommunity/react-ui';
 ```

 #### Component Name

 The name `SCUserSocialAssociation` can be used when providing style overrides in the theme.


 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCUserSocialAssociation-root|Styles applied to the root element.|
 |field|.SCUserSocialAssociation-field|Styles applied to the field element.|

 * @param inProps
 */
function UserSocialAssociation(inProps) {
    // PROPS
    const props = (0, system_1.useThemeProps)({
        props: inProps,
        name: PREFIX
    });
    const { className = null, userId = null, user = null, providers = null, onCreateAssociation = null, onDeleteAssociation = null, children = null, deletingProvider = null } = props, rest = tslib_1.__rest(props, ["className", "userId", "user", "providers", "onCreateAssociation", "onDeleteAssociation", "children", "deletingProvider"]);
    // HOOKS
    const { scUser } = (0, react_core_1.useSCFetchUser)({ id: userId, user });
    const { scUserProviders, setSCUserProviders } = (0, react_core_1.useSCFetchUserProviders)({ id: userId || scUser.id, providers });
    // INTL
    const intl = (0, react_intl_1.useIntl)();
    // Compute preferences
    const scPreferences = (0, react_core_1.useSCPreferences)();
    const preferences = (0, react_1.useMemo)(() => {
        const _preferences = {};
        PREFERENCES.map((p) => (_preferences[p] = p in scPreferences.preferences ? scPreferences.preferences[p].value : null));
        return _preferences;
    }, [scPreferences.preferences]);
    // MEMO PROVIDERS
    const _providers = (0, react_1.useMemo)(() => {
        return scUserProviders
            .map((provider) => ({ [provider.provider]: provider }))
            .reduce((prev, provider) => Object.assign(prev, provider), {});
    }, [scUserProviders]);
    const providersEnabled = Object.values(types_1.SCUserSocialAssociations).filter((p) => preferences[`providers.${p}_signin_enabled`]);
    const providersToLink = providersEnabled === null || providersEnabled === void 0 ? void 0 : providersEnabled.filter((p) => { var _a, _b; return !((_a = _providers[p]) === null || _a === void 0 ? void 0 : _a.provider) && !((_b = _providers[p]) === null || _b === void 0 ? void 0 : _b.ext_id); });
    const providersLinked = Object.values(_providers).filter((p) => providersEnabled.includes(p.provider));
    /**
     * Updates providers list onDelete association
     */
    (0, react_1.useEffect)(() => {
        if (deletingProvider) {
            const updatedProviders = scUserProviders.filter((p) => p.provider !== deletingProvider.provider);
            setSCUserProviders(updatedProviders);
        }
    }, [deletingProvider]);
    /**
     * Renders social association block
     */
    if (!providersEnabled) {
        return null;
    }
    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { direction: "column" }, { children: [providersLinked.length !== 0 || (providersToLink.length !== 0 && onCreateAssociation) ? children : null, (0, jsx_runtime_1.jsx)(material_1.TableContainer, Object.assign({ component: material_1.Paper, className: classes.providerTable }, { children: (0, jsx_runtime_1.jsxs)(material_1.Table, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ sx: { width: '60%' } }, { children: intl.formatMessage(messages.provider) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ align: "left" }, { children: intl.formatMessage(messages.actions) }))] }) }), (0, jsx_runtime_1.jsxs)(material_1.TableBody, { children: [providersToLink.length !== 0 && onCreateAssociation && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: providersToLink.map((p, index) => ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsxs)(material_1.TableCell, Object.assign({ scope: "row" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: SocialShare_1.PROVIDER_ICONS_CONTAINED[`${p}`], width: "30", height: "30", className: classes.providerIcon, alt: p }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: classes.providerName }, { children: p }))] })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ align: "left" }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", className: classes.providerAction, color: "primary", onClick: onCreateAssociation ? () => onCreateAssociation(p) : null, size: "small" }, { children: intl.formatMessage(messages.socialAdd) })) }))] }, index))) })), providersLinked.length !== 0 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: providersLinked.map((p, index) => ((0, jsx_runtime_1.jsxs)(material_1.TableRow, Object.assign({ sx: { '&:last-child td, &:last-child th': { border: 0 } } }, { children: [(0, jsx_runtime_1.jsxs)(material_1.TableCell, Object.assign({ scope: "row" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: SocialShare_1.PROVIDER_ICONS_CONTAINED[`${p.provider}`], width: "30", height: "30", className: classes.providerIcon, alt: p.provider }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: classes.providerName }, { children: p.provider }))] })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ align: "left" }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", className: classes.providerAction, onClick: () => onDeleteAssociation(p), size: "small" }, { children: intl.formatMessage(messages.socialRemove) })) }))] }), index))) }))] })] }) }))] })));
}
exports.default = UserSocialAssociation;
