import type { FC } from 'react';
import React from 'react';
import { Button, Section } from '@theorchard/suite-components';
import { formatMessage } from '@theorchard/suite-frontend';
import {
    ABACUS_QA_LINK,
    OA_PROD_LINK,
    OA_QA_LINK,
    ABACUS_PROD_LINK,
} from 'src/constants/route';
import { determineEnvLink } from 'src/utils/data';
import type { AccountMetadata } from 'src/apollo/queries/account/selectors';

export const CLASSNAME = 'AccountBasicsTab';

export interface Props {
    data: AccountMetadata;
}

const sections = (id: number) => [
    {
        link: `${determineEnvLink(
            OA_PROD_LINK,
            OA_QA_LINK
        )}cont_mgmt/view_vendor.php?vendor_id=${id}`,
        title: formatMessage('accountPage.accountInfo'),
        subTitle: formatMessage('accountPage.availableInOA'),
        subText: formatMessage('accountPage.accountInfoSubtext'),
        buttonTitle: formatMessage('accountPage.manageInOA'),
    },
    {
        link: `${determineEnvLink(
            ABACUS_PROD_LINK,
            ABACUS_QA_LINK
        )}account/${id}`,
        title: formatMessage('accountPage.paymentAndTaxInfo'),
        subTitle: formatMessage('accountPage.availableInAbacus'),
        subText: formatMessage('accountPage.paymentAndTaxInfoSubtext'),
        buttonTitle: formatMessage('accountPage.manageInAbacus'),
    },
    {
        link: `${determineEnvLink(
            ABACUS_PROD_LINK,
            ABACUS_QA_LINK
        )}account/${id}`,
        title: formatMessage('accountPage.contractInfo'),
        subTitle: formatMessage('accountPage.availableInAbacus'),
        subText: formatMessage('accountPage.contractInfoSubtext'),
        buttonTitle: formatMessage('accountPage.manageInAbacus'),
    },
];
const BasicsTab: FC<Props> = ({ data }) => (
    <div className={CLASSNAME} data-testId={CLASSNAME}>
        {sections(data.vendorId).map(item => (
            <Section level="sub" key={item.title}>
                <Section.Header title={item.title}>
                    <Button
                        variant="tertiary"
                        onClick={() => window.open(item.link)}
                    >
                        {item.buttonTitle}
                    </Button>
                </Section.Header>
                <Section.Body>
                    <h4>{item.subTitle}</h4>
                    <p>{item.subText}</p>
                </Section.Body>
            </Section>
        ))}
    </div>
);

export default BasicsTab;