import React from 'react';
import { Button, CoverArt, Modal, Tag, PageHeader } from '@theorchard/suite-components';
import {
    formatMessage,
    getCurrentLocale,
    getLocaleName,
    getDateFormat,
} from '@theorchard/suite-i18n';
import { useIdentity } from '@theorchard/suite-identity';
import { useHistory } from 'react-router-dom';
import { getIdentityFullName } from '../../../utils';
import { TextLabelField } from '../textLabelField';
import { getPrivacyPolicyUrl } from '../utils';
import { InternalUserCard } from './internalUserCard';
import { MainNavUserModalAccounts } from './mainNavUserModalAccounts';
import { MainNavUserModalFooter } from './mainNavUserModalFooter';

const CLASS_NAME = 'MainNavUserModal';
const CLASS_NAME_CONTENT = `${CLASS_NAME}-content`;

export interface Props {
    isOpen: boolean;
    onRequestClose: () => void;
}

export const MainNavUserModal: React.FC<Props> = ({ isOpen, onRequestClose }) => {
    const identity = useIdentity();
    const history = useHistory();

    const renderHeader = () => (
        <div className="d-flex flex-column w-100">
            <PageHeader.Primary>
                <CoverArt url={identity.picture} shape="round" />
                <div className="flex-column">
                    {identity.isEmployee && (
                        <Tag text={formatMessage('account_employee')} variant="category" />
                    )}

                    <h1 className="suite-bold m-0">{getIdentityFullName(identity)}</h1>

                    <a className="userEmail" href={`mailto:${identity.email}`}>
                        {identity.email}
                    </a>
                </div>
            </PageHeader.Primary>

            <MainNavUserModalAccounts />
        </div>
    );

    const renderInternalUserRow = () => (
        <InternalUserCard>
            <div className="d-flex flex-row w-100 justify-content-between">
                <div className="identityMetaWrapper">
                    <TextLabelField
                        label={formatMessage('account_profileId')}
                        value={identity.profileId}
                        withCopy
                    />
                    <TextLabelField
                        label={formatMessage('account_identityId')}
                        value={identity.id}
                        withCopy
                    />
                    <TextLabelField
                        label={formatMessage('account_profileUUID')}
                        value={identity.profileUUID}
                        withCopy
                    />
                </div>

                <div className="d-flex flex-column">
                    <Button
                        className="btn-feature-flags"
                        data-testid="BtnEmployeeFeatureFlags"
                        onClick={() => {
                            history.push('/account');
                            onRequestClose();
                        }}
                        variant="quartenary"
                    >
                        {formatMessage('account_FeatureFlags')}
                    </Button>
                </div>
            </div>
        </InternalUserCard>
    );

    const renderMainFields = () => {
        const {
            firstName,
            lastName,
            email,
            locale = getCurrentLocale(),
            numberFormat = 'us',
        } = identity;

        const formattedNumberFormat = numberFormat?.toUpperCase();
        const formattedLocale = getLocaleName(locale);

        return (
            <div className={`${CLASS_NAME}-main-fields`}>
                <TextLabelField label={formatMessage('account_firstName')} value={firstName} />
                <TextLabelField label={formatMessage('account_lastName')} value={lastName} />
                <TextLabelField label={formatMessage('account_email')} value={email} />
                <TextLabelField label={formatMessage('account_language')} value={formattedLocale} />
                <TextLabelField
                    label={formatMessage('account_numberFormat')}
                    value={formattedNumberFormat}
                />
                <TextLabelField
                    label={formatMessage('account_dateFormat')}
                    value={getDateFormat()}
                />
            </div>
        );
    };

    const renderSettingsAppLink = () => {
        const url = identity?.applications?.find((app) => app.id === 'settings')?.url;
        if (!url) return null;

        return (
            <div className={`${CLASS_NAME}-settings-app-link`}>
                <a href={`${url}/profile`} target="_blank" rel="noopener noreferrer">
                    {formatMessage('account_updateInSettingsApp')}
                </a>
            </div>
        );
    };

    const renderPrivacyPolicyLink = () => (
        <div className={`${CLASS_NAME}-privacy-policy-link`}>
            <a
                data-testid={`${CLASS_NAME}-privacyPolicyLink`}
                href={getPrivacyPolicyUrl(identity.loginCountryCode)}
                target="_blank"
                rel="noopener noreferrer"
            >
                {formatMessage('account_privacyPolicy')}
            </a>
        </div>
    );

    return (
        <Modal
            className={'MainNavUserModal'}
            isOpen={isOpen}
            onRequestClose={onRequestClose}
            title={renderHeader()}
        >
            <div className={CLASS_NAME_CONTENT} data-testid={CLASS_NAME_CONTENT}>
                {identity.isEmployee && renderInternalUserRow()}

                {renderMainFields()}

                {renderSettingsAppLink()}

                {renderPrivacyPolicyLink()}
            </div>

            <MainNavUserModalFooter />
        </Modal>
    );
};