import { request } from "@/lib/request";
import type { LangParams } from "@/types/params";
import { GetFooterData } from "@/types/requests/footer";
import { GetFooter } from "@/lib/graphql/Query/Footer.graphql";
import Script from "next/script";
import Image from "next/image";
import Navigation from "./Navigation";

export default async function Footer({ lang }: LangParams) {
  const response = await request<GetFooterData>(GetFooter, {
    locale: lang,
  });

  const footerData = response.data.all_footer.items[0];

  return (
    <footer className="global-footer">
      <div className="global-footer__content">
        <h2 className="global-footer__content__heading">
          <Image
            alt={footerData.logoConnection.edges[0].node.title}
            data-js="scandiclogoimg"
            data-nosvgsrc="/Static/img/scandic-logotype-white.png" // what here?
            height="22"
            src={footerData.logoConnection.edges[0].node.url}
            unoptimized
            width="102"
          />
          <span className="hidden--accessible">Scandic</span>
        </h2>
        <ul className="l-footer-sections">
          {footerData.navigation.map((group) => {
            return (
              <li className="global-footer-section" key={group.title}>
                <div className="link-list-top-header">{group.title}</div>
              </li>
            )
          })}
        </ul>

        <div data-js-collapsible="global-footer" className="collapsible-global-footer">
          <Navigation linkGroups={footerData.navigation} />

          <div className="global-footer__content__bottom">
            <p className="newFooterTitle">
              <strong>{footerData.about.title}</strong>
            </p>
            <div className="padTop15">
              <p>{footerData.about.text}</p>
              <p style={{ textAlign: "center" }}>
                <strong>{footerData.app_downloads.title}</strong>
              </p>
              <table
                style={{
                  height: "62px",
                  width: "100%",
                  borderCollapse: "collapse",
                }}
              >
                <tbody>
                  <tr style={{ height: "62px" }}>
                    <td
                      style={{
                        width: "50%",
                        height: "62px",
                        textAlign: "right",
                      }}
                    >
                      <a
                        title="Appstore"
                        href={footerData.app_downloads.app_store.href}
                        target="_blank"
                        rel="noopener"
                      >
                        <Image
                          alt={
                            footerData.app_downloads.app_store.imageConnection.edges[0].node.title
                          }
                          height={45}
                          src={footerData.app_downloads.app_store.imageConnection.edges[0].node.url}
                          unoptimized
                          width={135}
                        />
                      </a>
                    </td>
                    <td
                      style={{
                        width: "50%",
                        height: "62px",
                        textAlign: "left",
                      }}
                    >
                      <a
                        title="Google Play"
                        href={footerData.app_downloads.google_play.href}
                        target="_blank"
                        rel="noopener"
                      >
                        <Image
                          alt={
                            footerData.app_downloads.google_play.imageConnection.edges[0].node.title
                          }
                          height={45}
                          src={
                            footerData.app_downloads.google_play.imageConnection.edges[0].node.url
                          }
                          unoptimized
                          width={135}
                        />
                      </a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <style
              dangerouslySetInnerHTML={{
                __html: `#map-destinations-list .hotel-teaser .hotel-teaser__body + .special-alerts.special-alerts--inline-block {
display: none;
}`,
              }}
            />
            <p>
              <Script
                id="inline-script"
                dangerouslySetInnerHTML={{
                  __html: `const isNetsHotel = location.href.match(/hotel=((389)|(365)|(374)|(888)|(891)|(340))/g) != null;
                    let removeSavedCardElem = function () {
                    if (!isNetsHotel) {
                        return;
                    }
                    if (document.querySelector(".credit-card-form__saved-select")) {
                        if (!document.querySelector(".credit-card-form__new")) {
                            document.querySelector(".credit-card-form").classNameList.add("hidden");
                        }
                        document.querySelector(".credit-card-form__saved-select").remove();
                        document.querySelector(".credit-card-form__select input[type=radio]").checked = "checked";
                    }
                    setTimeout( function() {
                        if (document.querySelector(".credit-card-form__select")) {
                            document.querySelector(".credit-card-form__select input[type=radio]").checked = "checked";
                            document.querySelector(".credit-card-form__select").classNameList.add("hidden");
                        }
                        if (document.querySelector(".credit-card-form__new")) {
                            document.querySelector(".credit-card-form__new").classNameList.remove("ng-hide");
                        }
                    }, 300);
                    }
                    removeSavedCardElem();
                    setTimeout(removeSavedCardElem, 500);
                    const confirmPgHotelId = document.getElementById("adm-hotelOperaId") && document.getElementById("adm-hotelOperaId").value;
                    const isNetsHotelConfnPg = ["389","365","374","888","891","340"].indexOf(confirmPgHotelId) != -1;
                    if (isNetsHotelConfnPg && document.querySelector(".save-credit-card__form")) {
                    document.querySelector(".save-credit-card__form").style.display = "none";
                    document.querySelector(".save-credit-card__form").remove();
                    }`,
                }}
              />
            </p>
          </div>
          <div className="global-footer__social-media" id="social-icons">
            <h3 className="heading-5 u-uppercase">{footerData.social_media.title}</h3>
            <a
              href={footerData.social_media.facebook.href}
              rel="noopener"
              target="_blank"
              className="social-media-icon"
              title="Scandic on Facebook"
            >
              <svg
                focusable="false"
                className="icon icon--facebook icon--white"
                viewBox="0 0 150 150"
                role="img"
                aria-labelledby="social-icons facebook-icon"
              >
                <title id="facebook-icon">{footerData.social_media.facebook.title}</title>
                <use xlinkHref="/Static/img/icons/sprites.svg#icon-facebook"></use>
              </svg>
            </a>
            <a
              href={footerData.social_media.twitter.href}
              rel="noopener"
              target="_blank"
              className="social-media-icon"
            >
              <span className="hidden--accessible">{`Model.SafeGet(m => m.FooterHeader) on Twitter`}</span>
              <svg
                focusable="false"
                className="icon icon--twitter icon--white"
                viewBox="0 0 150 150"
                role="img"
                aria-labelledby="social-icons twitter-icon"
              >
                <title id="twitter-icon">{footerData.social_media.twitter.title}</title>
                <use xlinkHref="/Static/img/icons/sprites.svg#icon-twitter"></use>
              </svg>
            </a>
            <a
              href={footerData.social_media.instagram.href}
              rel="noopener"
              target="_blank"
              className="social-media-icon"
              title="Scandic on Instagram"
            >
              <svg
                focusable="false"
                className="icon icon--instagram icon--white"
                viewBox="0 0 150 150"
                role="img"
                aria-labelledby="social-icons instagram-icon"
              >
                <title id="instagram-icon">{footerData.social_media.instagram.title}</title>
                <use xlinkHref="/Static/img/icons/sprites.svg#icon-instagram"></use>
              </svg>
            </a>
          </div>
          <div className="global-footer__trip-advisor">
            <h3 className="heading-5 u-uppercase">{footerData.trip_advisor.title}</h3>
            <Image
              alt="Trip Advisor logotype"
              height={24}
              src={footerData.trip_advisor.logoConnection.edges[0].node.url}
              unoptimized
              width={160}
            />
          </div>
        </div>
      </div>
    </footer>
  )
}