import type { FC } from 'react';
import React from 'react';
import { Modal } from '@theorchard/suite-components';
import { formatMessage } from '@theorchard/suite-frontend';
import { useHistory } from 'react-router-dom';
import { query } from 'src/apollo/queries/account/accountDetails';
import { usePrefetchQuery } from 'src/apollo/utils/usePrefetchQuery';
import {
    ABACUS_PROD_LINK,
    ABACUS_QA_LINK,
    ROUTE_ACCOUNT,
} from 'src/constants/route';
import {
    GO_TO_ABACUS_TERM,
    CLOSE_TERM,
} from 'src/constants/staticFormatMessages';
import { determineEnvLink } from 'src/utils/data';
import { createHref } from 'src/utils/route';

const TITLE_TERM = formatMessage('accountPage.inviteModalTitle');
const SUBTITLE_TERM = formatMessage('accountPage.inviteModalSubtitle');

export const CLASSNAME = 'AccountInvitedModal';

interface Props {
    accountId: number;
}

const InvitedModal: FC<Props> = ({ accountId }) => {
    const history = useHistory();
    usePrefetchQuery(query, { variables: { accountId }, delay: 1000 });

    const handleClose = () => {
        history.push(createHref(ROUTE_ACCOUNT, { accountId }));
    };

    const handleConfirm = () => {
        const abacusLink = determineEnvLink(ABACUS_PROD_LINK, ABACUS_QA_LINK);

        window.open(`${abacusLink}account/${accountId}`);
        handleClose();
    };

    return (
        <Modal
            testId={CLASSNAME}
            className={CLASSNAME}
            title={TITLE_TERM}
            isOpen
            onRequestClose={handleClose}
            confirmTitle={GO_TO_ABACUS_TERM}
            onConfirm={handleConfirm}
            cancelTitle={CLOSE_TERM}
        >
            {SUBTITLE_TERM}
        </Modal>
    );
};

export default InvitedModal;