import React from 'react';
import type { FC } from 'react';
import { getCountryByCode } from '@theorchard/countries';
import { Card } from '@theorchard/suite-components';
import { BrandIcon, GlyphIcon, CountryFlag } from '@theorchard/suite-icons';
import type { MergedProduct } from 'src/product/product';

interface Props {
    product: MergedProduct;
    brand: string;
}

export const CLASS_NAME = 'BasicAccountInfo';
const CARD_CLASS_NAME = `${CLASS_NAME}-card`;

export const INTL_PREFIX = 'contentReview.basicAccountInfo';

const BasicAccountInfo: FC<Props> = ({ product, brand }) => {
    const { label } = product;

    return (
        <div className={CLASS_NAME} data-testid={CLASS_NAME}>
            <div className={`${CLASS_NAME}-aligned`}>
                <BrandIcon brand={brand} size="16" />
                <span className={`${CLASS_NAME}-headerText`}>
                    <span>{`${label.name.get()} · `}</span>
                    <span className={`${CLASS_NAME}-secondary`}>
                        {label.name.currentValue}
                    </span>
                </span>
            </div>
            <div>{$t(`${INTL_PREFIX}.account`)}</div>

            <Card suite className={CARD_CLASS_NAME}>
                <Card.Title className={`${CARD_CLASS_NAME}-header`}>
                    <GlyphIcon name="user" size={16} />
                    <span className={`${CARD_CLASS_NAME}-headerText`}>
                        {$t(`${INTL_PREFIX}.infoLabel`)}
                    </span>
                </Card.Title>

                <Card.Body className={`${CARD_CLASS_NAME}-body`}>
                    <div>
                        <div className={`${CARD_CLASS_NAME}-label`}>
                            {$t(`${INTL_PREFIX}.parentCompany`)}
                        </div>
                        <div className={`${CLASS_NAME}-aligned`}>
                            <span>{'The Orchard'}</span>
                            <BrandIcon
                                brand={brand}
                                size="16"
                                className={`${CARD_CLASS_NAME}-brand`}
                            />
                        </div>
                    </div>

                    <div>
                        <div className={`${CARD_CLASS_NAME}-label`}>
                            {$t('common.fieldNames.service_tier')}
                        </div>
                        <div>{label.serviceTier.get()}</div>
                    </div>

                    {label.accountCountryCode.get() && (
                        <div>
                            <div className={`${CARD_CLASS_NAME}-label`}>
                                {$t('common.fieldNames.account_country')}
                            </div>
                            <div className={`${CLASS_NAME}-aligned`}>
                                <CountryFlag
                                    countryCode={
                                        label.accountCountryCode.get() as string
                                    }
                                    className={`${CARD_CLASS_NAME}-flag`}
                                />
                                <span>
                                    {
                                        getCountryByCode(
                                            label.accountCountryCode.get() as string
                                        )?.name
                                    }
                                </span>
                            </div>
                        </div>
                    )}
                </Card.Body>
            </Card>
        </div>
    );
};

export default BasicAccountInfo;