import React, { useState } from 'react';
import { useAppConfig } from '@theorchard/suite-frontend';
import { withRouter } from 'react-router-dom';
import Banner from 'src/components/banner';
import PromoModal from 'src/components/promo-modal';
import IdentityContext from 'src/context';
import { formatMessage, getGoAppName } from 'src/utils';
import type { RouteComponentProps } from 'react-router-dom';

const DISMISSED = 'Dismissed';
const CLICKED = 'Clicked';

export const ORCHARD_GO_FEATURE_CONTROL = 'OrchardGo New Banner';
export const ORCHARD_GO_SURVEY_FEATURE_CONTROL = 'OrchardGo Survey Banner';
export const ORCHARD_GO_BANNER = 'Orchard-go-banner';
const ORCHARD_GO_CLASS_NAME = 'Orchard-go-ad';
export const ORCHARD_GO_SURVEY_BANNER = 'Orchard-go-survey-banner';

const getOrchardGoSurveyPrefilledUrl = ({
    vendorId,
    userId,
}: {
    vendorId?: number;
    userId?: number;
}) =>
    // eslint-disable-next-line max-len
    `https://docs.google.com/forms/d/e/1FAIpQLSeB4CSAh7FPJSGAUMM-QbLussZQVWHWseUJksLaChrOhMw21Q/viewform?usp=pp_url&entry.1186434305=${vendorId}&entry.524728512=${userId}`;

interface OrchardGoAdProps {
    onClick?: () => void;
}

export const OrchardGoAd: React.FC<OrchardGoAdProps> = () => {
    const config = useAppConfig();
    const [shouldOpenModal, setShouldOpenModal] = useState(false);

    const handleOnClick = () => {
        setShouldOpenModal(true);
    };

    const handleModalClose = () => {
        setShouldOpenModal(false);
    };

    return (
        <div className={ORCHARD_GO_CLASS_NAME}>
            <img
                className={`${ORCHARD_GO_CLASS_NAME}-icon`}
                src={`https://cdn.theorchard.io/assets/${config.brand}/icons/go_app.svg`}
                alt="OrchardGO_Icon"
            />
            <div className={`${ORCHARD_GO_CLASS_NAME}-title`}>
                {formatMessage('banner.orchardGo.description')}
                <div
                    className={`${ORCHARD_GO_CLASS_NAME}-url`}
                    onClick={handleOnClick}
                >
                    {formatMessage('banner.orchardGo.anchorText', {
                        goAppName: getGoAppName(config.brand),
                    })}
                </div>
            </div>

            <PromoModal
                shouldOpenModal={shouldOpenModal}
                handleModalClose={handleModalClose}
            />
        </div>
    );
};

interface OrchardGoSurveyProps {
    userId: number;
    vendorId?: number;
    brand: string;
}

export const OrchardGoSurvey: React.FC<OrchardGoSurveyProps> = ({
    vendorId,
    userId,
    brand,
}) => (
    <div className={ORCHARD_GO_CLASS_NAME}>
        <img
            className={`${ORCHARD_GO_CLASS_NAME}-icon`}
            src={`https://cdn.theorchard.io/assets/${brand}/icons/go_app.svg`}
            alt="OrchardGO_Icon"
        />
        <div className={`${ORCHARD_GO_CLASS_NAME}-title`}>
            {formatMessage('banner.orchardGoSurvey.description', {
                goAppName: getGoAppName(brand),
            })}
            <a
                className={`${ORCHARD_GO_CLASS_NAME}-url`}
                href={getOrchardGoSurveyPrefilledUrl({ vendorId, userId })}
            >
                {formatMessage('banner.orchardGoSurvey.anchorText')}
            </a>
        </div>
    </div>
);

type HeaderBannerProps = RouteComponentProps;

export const HeaderBanner: React.FC<HeaderBannerProps> = ({ location }) => {
    const config = useAppConfig();
    const { identity } = React.useContext(IdentityContext);

    const { pathname } = location;
    const [bannerDismissed, setBannerDismissed] = useState(false);

    if (!identity?.id) return null;

    const hasDismissedBanner = (bannerCookieName: string) =>
        document.cookie.includes(`${bannerCookieName}=false`);

    const shouldShowGoBanner =
        identity.hasFeatureControl(ORCHARD_GO_FEATURE_CONTROL) &&
        pathname === '/' &&
        !hasDismissedBanner(ORCHARD_GO_BANNER);

    const shouldShowGoSurveyBanner =
        identity.hasFeatureControl(ORCHARD_GO_SURVEY_FEATURE_CONTROL) &&
        pathname === '/' &&
        !hasDismissedBanner(ORCHARD_GO_SURVEY_BANNER);

    const dismissBanner = (
        cookieName: string,
        eventType: string,
        permanent = true
    ) => {
        if (permanent) document.cookie = `${cookieName}=false`;
        setBannerDismissed(true);
        window.analytics?.track(eventType, {
            category: 'Workstation Banner',
            label: cookieName,
        });
    };

    if (shouldShowGoSurveyBanner)
        return (
            <Banner
                cookieName={ORCHARD_GO_SURVEY_BANNER}
                bannerDismissed={bannerDismissed}
                dismissBanner={() =>
                    dismissBanner(ORCHARD_GO_SURVEY_BANNER, DISMISSED)
                }
            >
                <OrchardGoSurvey
                    userId={identity.id}
                    vendorId={identity.vendorId}
                    brand={config.brand}
                />
            </Banner>
        );

    if (shouldShowGoBanner)
        return (
            <Banner
                cookieName={ORCHARD_GO_BANNER}
                bannerDismissed={bannerDismissed}
                dismissBanner={() =>
                    dismissBanner(ORCHARD_GO_BANNER, DISMISSED)
                }
            >
                <OrchardGoAd
                    onClick={() =>
                        dismissBanner(ORCHARD_GO_BANNER, CLICKED, false)
                    }
                />
            </Banner>
        );

    return null;
};

export default withRouter(HeaderBanner);