import type { FC } from 'react';
import React, { useEffect, useState } from 'react';
import { useAppConfig } from '@theorchard/suite-config';
import { formatMessage, getCurrentLocale } from '@theorchard/suite-i18n';
import { NavIcon } from '@theorchard/suite-icons';
import { SuiteLogger } from '@theorchard/suite-utils';
import cx from 'classnames';
import { EVENT_HELP_CLICKED } from '../../constants/events';
import { useZendeskTokenQuery } from '../../queries/zendeskToken';
import Segment from '../../segment';
import type { ZendeskLoginError } from '../../queries/zendeskToken';

const CLASSNAME = 'ZendeskButton';
const TERM_HELP = 'navigation_help';
const SCRIPT_ID = 'ze-snippet';

export const ZendeskButtonV2: FC = () => {
    const { zendeskMessagingKey, appName } = useAppConfig();
    const { data: zendeskToken } = useZendeskTokenQuery('v2');
    const [isWidgetLoaded, setIsWidgetLoaded] = useState(false);
    const [isWidgetOpened, setIsWidgetOpened] = useState(false);

    useEffect(() => {
        if (!zendeskMessagingKey) {
            SuiteLogger.debug(
                'Zendesk',
                'No "zendeskMessagingKey" has been defined in the app configuration.'
            );
            return;
        }

        const onLoad = () => {
            SuiteLogger.info('Zendesk', 'Messaging widget loaded');
            setIsWidgetLoaded(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 (!isWidgetLoaded) return;

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

        window.zE?.('messenger:on', 'open', () => {
            // set data on open to be sure that the widget is fully loaded
            // otherwise some data might be missing
            window.zE?.('messenger:set', 'conversationTags', [
                'awal_beta_messaging',
                appName.replace('frontend-', ''),
            ]);
            window.zE?.('messenger:set', 'locale', getCurrentLocale());

            window.zE?.('messenger', 'show');
            setIsWidgetOpened(true);
            void Segment.trackEvent(EVENT_HELP_CLICKED);
        });

        window.zE?.('messenger', 'close');
        window.zE?.('messenger', 'hide');
    }, [isWidgetLoaded, appName]);

    useEffect(() => {
        if (!isWidgetLoaded || !zendeskToken || !zendeskToken.value) return;

        window.zE?.(
            'messenger',
            'loginUser',
            function (callback: (token: string) => void) {
                callback(zendeskToken.value);
            },
            function (error: ZendeskLoginError) {
                if (error) {
                    const { reason } = error;
                    SuiteLogger.error('Zendesk', `User is not authorized. Reason: ${reason}`);
                } else SuiteLogger.info('Zendesk', 'User is authorized.');
            }
        );
    }, [isWidgetLoaded, zendeskToken]);

    return (
        <button
            type="button"
            id="zendeskButtonV2"
            className={cx(CLASSNAME, { NavLink: true })}
            data-testid={CLASSNAME}
            onClick={() => {
                if (isWidgetOpened) {
                    window.zE?.('messenger', 'close');
                } else {
                    window.zE?.('messenger', 'open');
                }
            }}
        >
            <div className="NavLink-icon">
                <NavIcon name="HelpNavIcon" />
            </div>
            <span className="NavLink-title">{formatMessage(TERM_HELP)}</span>
        </button>
    );
};