import type { FC } from 'react';
import React from 'react';
import {
    Breadcrumb,
    Button,
    PageHeader,
    Pill,
    Status,
} from '@theorchard/suite-components';
import { formatMessage } from '@theorchard/suite-frontend';
import { CompanyIcon, GlyphIcon } from '@theorchard/suite-icons';
import { camelCase } from 'lodash';
import { VendorStatus } from 'src/apollo/definitions/globalTypes';
import { SETTINGS_INVITE_ROUTE } from 'src/constants/route';
import { useApplicationLink } from 'src/utils/route';
import type { StatusProps } from '@theorchard/suite-components';
import type { AccountMetadata } from 'src/apollo/queries/account/selectors';

const CLASSNAME = 'AccountPageHeader';
const homeTerm = formatMessage('home');
const labelTypeTerm = formatMessage('labelType');
const serviceTierTerm = formatMessage('serviceTier');
const relationshipManagerTerm = formatMessage('relationshipManager');
const inviteTerm = formatMessage('invite');

const getStatusVariant = (status?: VendorStatus): StatusProps['variant'] => {
    switch (status?.toLowerCase()) {
        case (VendorStatus.DELETION,
        VendorStatus.INACTIVE,
        VendorStatus.PITCHED):
            return 'error';
        case (VendorStatus.WAITING_FOR_APPROVAL, VendorStatus.PENDING):
            return 'warning';
        default:
            return 'success';
    }
};

interface Props {
    account: AccountMetadata;
}

const MOCK_USERS_COUNT = '0';

const AccountPageHeader: FC<Props> = ({ account }) => {
    const settingsURL = useApplicationLink('settings');

    const handleInvite = () => {
        if (!settingsURL) return;

        const settingsLink = `${settingsURL}/${SETTINGS_INVITE_ROUTE}`;

        window.open(settingsLink, '_blank');
    };

    const statusTerm = formatMessage(`status.${camelCase(account.status)}`);
    const status = getStatusVariant(account.status);

    return (
        <PageHeader className={CLASSNAME}>
            <PageHeader.Breadcrumb>
                <Breadcrumb>
                    <Breadcrumb.Item>{homeTerm}</Breadcrumb.Item>
                    <Breadcrumb.Item active>
                        {`${account.name} · ${account.vendorId}`}
                    </Breadcrumb.Item>
                </Breadcrumb>
            </PageHeader.Breadcrumb>
            <PageHeader.Row>
                <PageHeader.Secondary>
                    <div className={`${CLASSNAME}-accountInfo`}>
                        <div>
                            <span>{labelTypeTerm}:</span>
                            <span>{account.type || '-'}</span>
                        </div>
                        <div className={`${CLASSNAME}-divider`} />
                        <div>
                            <span>{serviceTierTerm}:</span>
                            <span>{account.serviceTierName}</span>
                        </div>
                        <div className={`${CLASSNAME}-divider`} />
                        <div>
                            <span>{relationshipManagerTerm}:</span>
                            {/*{TODO: add relations ship manager}*/}
                            <span>-</span>
                        </div>
                    </div>
                </PageHeader.Secondary>
            </PageHeader.Row>
            <PageHeader.Row>
                <PageHeader.Primary>
                    <PageHeader.PrimaryTitle>
                        {account.companyName && (
                            <CompanyIcon name={account.companyName} size={24} />
                        )}
                        <h2>{`${account.name} · `}</h2>
                        <h2 className={`${CLASSNAME}-titleId`}>
                            {account.vendorId}
                        </h2>
                        {account.status && (
                            <Status variant={status} text={statusTerm} filled />
                        )}
                    </PageHeader.PrimaryTitle>
                </PageHeader.Primary>
                <PageHeader.Tertiary>
                    <Pill
                        iconName="user"
                        iconCategory="glyph"
                        text={MOCK_USERS_COUNT}
                        popoverOptions={{
                            id: 'userCountPopover',
                            content: <div />,
                        }}
                    />
                    <Button
                        variant="secondary"
                        size="lg"
                        onClick={handleInvite}
                    >
                        {inviteTerm}
                        <GlyphIcon name="user" size={12} />
                    </Button>
                </PageHeader.Tertiary>
            </PageHeader.Row>
        </PageHeader>
    );
};
export default AccountPageHeader;