import { ErrorMessage, LoadingIndicator } from '@theorchard/suite-components';
import { formatMessage } from '@theorchard/suite-frontend';
import { BrandIcon } from '@theorchard/suite-icons';
import React from 'react';
import { useGetVendorByVendorIdQuery } from 'src/data/queries/__generated__/getVendorById';
import useLabelInfoConfig from '../config';

export const getCompanyBrandIcon = (brand?: string) => {
    let brandInner;

    if (brand === 'theorchard' || brand === 'hrs') {
        brandInner = 'orchard';
    } else if (brand?.match('sme')) {
        brandInner = 'sme';
    } else {
        brandInner = brand;
    }

    if (!brandInner) {
        return null;
    }

    return <BrandIcon brand={brandInner} size={'16'} />;
};

export const HomePage = () => {
    const { vendorId } = useLabelInfoConfig();
    const { data, loading, error } = useGetVendorByVendorIdQuery({
        variables: { vendorId: Number(vendorId) },
    });

    return (
        <div className="HomePage">
            {loading ? (
                <LoadingIndicator title={false} />
            ) : error ? (
                <ErrorMessage />
            ) : (
                <>
                    <span>
                        <span className="brand">
                            {formatMessage(
                                `serviceTierView.pages.brand`
                            ).toUpperCase()}
                            :&nbsp;
                            {getCompanyBrandIcon(
                                data?.vendor?.companyBrand?.name
                            )}
                            &nbsp;
                            {data?.vendor?.companyBrand?.displayName}
                        </span>
                        &nbsp; | &nbsp;
                        <span className="created-on">
                            {formatMessage(
                                `serviceTierView.pages.created_on`
                            ).toUpperCase()}
                            :&nbsp;
                            {data?.vendor?.dateCreated &&
                                new Date(
                                    data?.vendor?.dateCreated
                                ).toDateString()}
                        </span>{' '}
                        &nbsp; &nbsp;
                        <span className="lats-updated">
                            {formatMessage(
                                `serviceTierView.pages.last_updated`
                            ).toUpperCase()}
                            :&nbsp;
                            {data?.vendor?.lastUpdate &&
                                new Date(
                                    data?.vendor?.lastUpdate
                                ).toDateString()}
                        </span>
                    </span>
                    <div
                        style={{
                            display: 'flex',
                            flexDirection: 'row',
                            justifyContent: 'space-between',
                            marginTop: '10px',
                        }}
                    >
                        <div className="right-content">
                            <h1
                                style={{
                                    padding: 0,
                                    margin: 0,
                                    fontWeight: 400,
                                }}
                            >
                                {data?.vendor?.name}
                            </h1>
                            <span>{data?.vendor?.labelIdentifier}</span>
                        </div>
                        <div className="left-content">
                            <div className="title">
                                {formatMessage(
                                    `serviceTierView.pages.accountServiceTier`
                                )}
                            </div>
                            <div
                                className="displayName"
                                style={{ textAlign: 'end' }}
                            >
                                {!loading &&
                                    data?.vendor?.serviceTier?.displayName}
                            </div>
                        </div>
                    </div>
                </>
            )}
        </div>
    );
};