import React, { useEffect, useState } from 'react';
import { ChatGlyph } from '@orchard/frontend-react-components';
import { useAppConfig, Segment } from '@theorchard/suite-frontend';
import { EVENT_HELP_CLICKED, HEADER_TERM } from 'src/constants';
import IdentityContext from 'src/context';
import { services } from 'src/services/user';
import { formatMessage, getCurrentLocale } from 'src/utils';

export const NO_ZENDESK_KEY_MSG =
    'Failed to initialize the Zendesk help button. No "zendeskKey" has been defined in the app configuration';
const CLASSNAME = 'ZendeskButton';
const SCRIPT_ID = 'ze-snippet';

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

    const zendeskMessagingKey = config?.zendeskMessagingKey;

    const [isScriptLoaded, setIsScriptLoaded] = useState(false);
    const [isWidgetOpen, setIsWidgetOpen] = useState(false);

    useEffect(() => {
        const onLoad = () => {
            setIsScriptLoaded(true);
            document.getElementById(SCRIPT_ID)?.setAttribute('data-loaded', '');
        };

        const existingScript = document.getElementById(SCRIPT_ID);
        if (existingScript) {
            if (existingScript.hasAttribute('data-loaded')) {
                onLoad();
                return;
            } else {
                existingScript.addEventListener('load', onLoad);
                return () => existingScript.removeEventListener('load', onLoad);
            }
        }

        const script = document.createElement('script');
        script.id = SCRIPT_ID;
        script.setAttribute('data-testid', 'ZendeskScript');
        script.src = `https://static.zdassets.com/ekr/snippet.js?key=${zendeskMessagingKey}`;
        script.async = true;
        script.addEventListener('load', onLoad);
        document.body.appendChild(script);

        return () => script.removeEventListener('load', onLoad);
    }, [zendeskMessagingKey]);

    useEffect(() => {
        // We need to wait until zendesk widget is fully loaded
        if (!isScriptLoaded || !identity) return;

        window.zE?.('messenger:on', 'close', () => {
            window.zE?.('messenger', 'hide');
            setIsWidgetOpen(false);
        });

        window.zE?.('messenger:on', 'open', () => {
            window.zE?.('messenger', 'show');
            setIsWidgetOpen(true);
            void Segment.trackEvent(EVENT_HELP_CLICKED);
        });

        window.zE?.('messenger', 'close');
        window.zE?.('messenger:set', 'conversationTags', [
            'awal_beta_messaging',
        ]);
        window.zE?.('messenger:set', 'locale', getCurrentLocale());

        if (identity.identityId)
            void services
                .getGqlZendeskToken(identity.identityId, 'v2')
                .then(token => {
                    if (token) {
                        window.zE?.(
                            'messenger',
                            'loginUser',
                            function (callback: (token: string) => void) {
                                callback(token);
                            }
                        );
                    } else console.warn('Can not get zendesk auth token'); // eslint-disable-line no-console
                });
    }, [isScriptLoaded, identity]);

    if (!zendeskMessagingKey) {
        console.warn(NO_ZENDESK_KEY_MSG); // eslint-disable-line no-console
        return null;
    }

    return (
        <button
            type="button"
            id="zendeskButton"
            className={`${CLASSNAME} Header-navItem zE-${
                isWidgetOpen ? 'Open' : 'Closed'
            }`}
            data-testid={CLASSNAME}
            onClick={() => {
                if (isWidgetOpen) {
                    window.zE?.('messenger', 'close');
                } else {
                    window.zE?.('messenger', 'open');
                }
            }}
        >
            <ChatGlyph />
            <span>{formatMessage(`${HEADER_TERM}.help`)}</span>
        </button>
    );
};

export default ZendeskButtonV2;