import React, { useEffect } from "react";

import { useRouter as usePagesRouter } from "next/router";
import { useRouter as useAppRouter } from "next/router";

import { isBrowser } from "../../utils/environment";

interface Props {
  surveyId: string;
}

//Surveys require the external brandmetrics CDN script to be loaded
const BrandMetricsSurvey = ({ surveyId }: Props) => {
  const pagesRouter = usePagesRouter();
  const appRouter = useAppRouter();


  useEffect(() => {
    if (isBrowser) {
      window._brandmetrics = window._brandmetrics || [];
      setTimeout(function () {
        window._brandmetrics.push({
          cmd: "_forcesurvey",
          val: {
            mid: surveyId,
            style: "ft_flyin_default",
          },
        });
      }, 10000);
    }
  }, [pagesRouter, appRouter, surveyId]);

  return (
    <>
      <div
        dangerouslySetInnerHTML={{
          __html: `<div id="brandmetrics-survey" class="brandmetrics-survey"></div>
                    <style>.brandmetrics-survey { display: none; position: fixed; right: 0%; bottom: 50px; z-index: 1000; margin-right: -10px; max-width: 300px;}
                      @media (min-width: 740px) {.brandmetrics-survey {display: block;}}
                    </style>`,
        }}
      ></div>
    </>
  );
};

export default BrandMetricsSurvey;