import React from 'react';
import { Nav } from '@orchard/frontend-react-components';
import { useAppConfig } from '@theorchard/suite-frontend';
import { BRAND_AWAL, FEATURE_ZENDESK_WIDGET_V2 } from 'src/constants';
import { HEADER_CLASSNAME, HEADER_TERM } from 'src/constants/header';
import IdentityContext from 'src/context';
import { formatMessage, getCurrentLocale } from 'src/utils';
import { getHelpCenterUrl } from 'src/utils/helpcenter';
import {
    ZendeskButton as ZendeskButtonV1,
    ZendeskButtonV2,
} from '../zendesk-button';

const HEADER_CLASSNAME_HELP = `${HEADER_CLASSNAME}-help ${HEADER_CLASSNAME}-navItem`;
const HEADER_TERM_HELP = `${HEADER_TERM}.help`;

const HelpLink: React.FC = () => {
    const { identity } = React.useContext(IdentityContext);
    const config = useAppConfig();
    const lang = getCurrentLocale();

    const ZendeskButton = identity.hasFeatureFlag(FEATURE_ZENDESK_WIDGET_V2)
        ? ZendeskButtonV2
        : ZendeskButtonV1;

    if (identity?.vendor?.companyBrand?.name === BRAND_AWAL)
        return <ZendeskButton />;
    else if (!identity?.vendor?.companyBrand && config.brand === BRAND_AWAL)
        return <ZendeskButton />;

    return (
        <Nav.Link
            target="_blank"
            href={getHelpCenterUrl(identity, lang)}
            className={HEADER_CLASSNAME_HELP}
        >
            {formatMessage(HEADER_TERM_HELP)}
        </Nav.Link>
    );
};

export default HelpLink;