const IndigoFooter = () => {
  const intl = useIntl();
  const config = getConfig();

  const indigoFooterNavLinks = config.INDIGO_FOOTER_NAV_LINKS || [];

  const messages = {
    "footer.poweredby.text": {
      id: "footer.poweredby.text",
      defaultMessage: "Powered by",
      description: "text for the footer",
    },
    "footer.tutorlogo.altText": {
      id: "footer.tutorlogo.altText",
      defaultMessage: "Runs on Tutor",
      description: "alt text for the footer tutor logo",
    },
    "footer.logo.altText": {
      id: "footer.logo.altText",
      defaultMessage: "Powered by Open edX",
      description: "alt text for the footer logo.",
    },
    "footer.copyright.text": {
      id: "footer.copyright.text",
      defaultMessage: `Copyrights ©${new Date().getFullYear()}. All Rights Reserved.`,
      description: "copyright text for the footer",
    },
  };

  return (
    <div className="wrapper wrapper-footer">
      <footer id="footer" className="tutor-container">
        <div className="footer-top">
          <div className="powered-area">
            <ul className="logo-list">
              <li>{intl.formatMessage(messages["footer.poweredby.text"])}</li>
              <li>
                <a
                  href="https://edly.io/tutor/"
                  rel="noreferrer"
                  target="_blank"
                >
                  <img
                    src={`${config.LMS_BASE_URL}/theming/asset/images/tutor-logo.png`}
                    alt={intl.formatMessage(
                      messages["footer.tutorlogo.altText"]
                    )}
                    width="57"
                  />
                </a>
              </li>
              <li>
                <a href="https://open.edx.org" rel="noreferrer" target="_blank">
                  <img
                    src={`${config.LMS_BASE_URL}/theming/asset/images/openedx-logo.png`}
                    alt={intl.formatMessage(messages["footer.logo.altText"])}
                    width="79"
                  />
                </a>
              </li>
            </ul>
          </div>
          <nav className="nav-colophon">
            <ol>
              {indigoFooterNavLinks.map((link) => (
                <li key={link.url}>
                  <a href={`${config.LMS_BASE_URL}${link.url}`}>{link.title}</a>
                </li>
              ))}
            </ol>
          </nav>
        </div>
        <span className="copyright-site">
          {intl.formatMessage(messages["footer.copyright.text"])}
        </span>
      </footer>
    </div>
  );
};

const ToggleThemeButton = () => {
  const intl = useIntl();
  const [isDarkThemeEnabled, setIsDarkThemeEnabled] = useState(false);

  const themeCookie = "indigo-toggle-dark";
  const themeCookieExpiry = 90; // days
  const isThemeToggleEnabled = getConfig().INDIGO_ENABLE_DARK_TOGGLE;

  const getCookie = (name) => {
    return document.cookie
      .split("; ")
      .find((row) => row.startsWith(name + "="))
      ?.split("=")[1];
  };

  const setCookie = (name, value, { domain, path, expires }) => {
    document.cookie = `${name}=${value}; domain=${domain}; path=${path}; expires=${expires.toUTCString()}; SameSite=Lax`;
  };

  const getCookieExpiry = () => {
    const today = new Date();
    return new Date(
      today.getFullYear(),
      today.getMonth(),
      today.getDate() + themeCookieExpiry
    );
  };

  const getCookieOptions = (serverURL) => ({
    domain: serverURL.hostname,
    path: "/",
    expires: getCookieExpiry(),
  });

  const addDarkThemeToIframes = () => {
    const iframes = document.getElementsByTagName("iframe");
    const iframesLength = iframes.length;
    if (iframesLength > 0) {
      Array.from({ length: iframesLength }).forEach((_, ind) => {
        const style = document.createElement("style");
        style.textContent = `
          body{
            background-color: #0D0D0E;
            color: #ccc;
          }
          a {color: #ccc;}
          a:hover{color: #d3d3d3;}
          `;
        if (iframes[ind].contentDocument) {
          iframes[ind].contentDocument.head.appendChild(style);
        }
      });
    }
  };

  const removeDarkThemeFromiframes = () => {
    const iframes = document.getElementsByTagName("iframe");
    const iframesLength = iframes.length;

    Array.from({ length: iframesLength }).forEach((_, ind) => {
      if (iframes[ind].contentDocument) {
        const iframeHead = iframes[ind].contentDocument.head;
        const styleTag = Array.from(iframeHead.querySelectorAll("style")).find(
          (style) =>
            style.textContent.includes("background-color: #0D0D0E;") &&
            style.textContent.includes("color: #ccc;")
        );
        if (styleTag) {
          styleTag.remove();
        }
      }
    });
  };

  const onToggleTheme = () => {
    const serverURL = new URL(getConfig().LMS_BASE_URL);
    let theme = "";

    if (getCookie(themeCookie) === "dark") {
      document.body.classList.remove("indigo-dark-theme");
      removeDarkThemeFromiframes();
      setIsDarkThemeEnabled(false);
      theme = "light";
    } else {
      document.body.classList.add("indigo-dark-theme");
      addDarkThemeToIframes();
      setIsDarkThemeEnabled(true);
      theme = "dark";
    }
    setCookie(themeCookie, theme, getCookieOptions(serverURL));

    const learningMFEUnitIframe = document.getElementById("unit-iframe");
    if (learningMFEUnitIframe) {
      learningMFEUnitIframe.contentWindow.postMessage(
        { "indigo-toggle-dark": theme },
        serverURL.origin
      );
    }
  };

  const hanldeKeyUp = (event) => {
    if (event.key === "Enter") {
      onToggleTheme();
    }
  };

  if (!isThemeToggleEnabled) {
    return <div />;
  }

  const messages = {
    "header.user.theme": {
      id: "header.user.theme",
      defaultMessage: "Toggle Theme",
      description: "Toggle between light and dark theme",
    },
  };

  return (
    <div className="theme-toggle-button mr-3">
      <div className="light-theme-icon">
        <Icon src={WbSunny} />
      </div>
      <div className="toggle-switch">
        <label htmlFor="theme-toggle-checkbox" className="switch">
          <input
            id="theme-toggle-checkbox"
            defaultChecked={getCookie(themeCookie) === "dark"}
            onChange={onToggleTheme}
            onKeyUp={hanldeKeyUp}
            type="checkbox"
            title={intl.formatMessage(messages["header.user.theme"])}
          />
          <span className="slider round" />
          <span id="theme-label" className="sr-only">{`Switch to ${
            isDarkThemeEnabled ? "Light" : "Dark"
          } Mode`}</span>
        </label>
      </div>
      <div className="dark-theme-icon">
        <Icon src={Nightlight} />
      </div>
    </div>
  );
};

const MobileViewHeader = () => {
  const config = getConfig();
  const intl = useIntl();
  const messages = {
    "mobile.view.header.logo.altText": {
      id: "mobile.view.header.logo.altText",
      defaultMessage: "My Open edX",
      description: "Mobile view header logo altText",
    },
  };
  return (
    <div className="container-xl py-2 d-flex align-items-center justify-content-between">
      <a
        className="logo"
        href={`${config.LMS_BASE_URL}/dashboard`}
        style={Object.assign({}, { display: "flex", alignItems: "center" })}
      >
        <img
          className="d-block"
          src={`${config.LMS_BASE_URL}/theming/asset/images/logo.png`}
          alt={intl.formatMessage(messages["mobile.view.header.logo.altText"])}
          height={21}
        />
      </a>
      <ToggleThemeButton />
    </div>
  );
};
