/* empty css                */import { r as reactExports, R as React } from "./chunk-f9493079.js";
import { n as navigate } from "./chunk-fbd48758.js";
import { S as SvgLogo } from "./chunk-67b48d32.js";
import { u as useLocale, T as TranslationsContextProvider, L as LocaleText, a as usePageContext } from "./chunk-3c83df3d.js";
import { l as localeDefault } from "./chunk-d7b68932.js";
import { a as useUserId, u as useAuth } from "./chunk-0446f39b.js";
import { L as Link } from "./chunk-7d9499dd.js";
import { b as baseUrl, l as linkUrl, r as request } from "./chunk-a9b1670a.js";
import "./chunk-ff14d436.js";
import { u as useAuthVisible, h as handleClickOutside, c as currencyMap } from "./chunk-c30a49d4.js";
import { S as SvgSearch$1, h as headerTranslations } from "./chunk-7f7eaf74.js";
import { u as useBonuses, a as useFreespin } from "./chunk-d81ef1ee.js";
import { b as calculateTimer } from "./chunk-5a528a9a.js";
import { u as useMobile } from "./chunk-21922e9f.js";
import { b as bodyScrollHandler } from "./chunk-1c73ba62.js";
/* empty css                */import { u as useGlobalData } from "./chunk-51a25e5a.js";
import { u as useGender } from "./chunk-927b5762.js";
const de = "/assets/static/de.2f381ae9.svg";
const chDE = "/assets/static/ch-de.55a08687.svg";
const chFR = "/assets/static/ch-de.55a08687.svg";
const chIT = "/assets/static/ch-de.55a08687.svg";
const en = "/assets/static/en.a2af7dd4.svg";
const enAU = "/assets/static/en-AU.7ef60053.svg";
const enCA = "/assets/static/en-CA.3b815792.svg";
const enNZ = "/assets/static/en-NZ.af775be2.svg";
const esCL = "/assets/static/es-CL.24425ac8.svg";
const esMX = "/assets/static/es-MX.0f93d0a0.svg";
const frCA = "/assets/static/fr-CA.c0ddaca5.svg";
const it = "/assets/static/it.c7fb8fc6.svg";
const no = "/assets/static/no.870d1c56.svg";
const ptBR = "/assets/static/pt-BR.34ca3c0d.svg";
const flags = [
  {
    LocaleSvg: en,
    name: "en",
    title: "English",
    dir: "ltr"
  },
  {
    LocaleSvg: enAU,
    name: "en-AU",
    title: "English - Australia",
    dir: "ltr"
  },
  {
    LocaleSvg: enNZ,
    name: "en-NZ",
    title: "English - New Zealand",
    dir: "ltr"
  },
  {
    LocaleSvg: enCA,
    name: "en-CA",
    title: "English - Canada",
    dir: "ltr"
  },
  {
    LocaleSvg: de,
    name: "de",
    title: "Deutsch",
    dir: "ltr"
  },
  // {
  //   LocaleSvg: deAT,
  //   name: "de-AT",
  //   title: "Deutsch - Austria",
  // },
  {
    LocaleSvg: frCA,
    name: "fr-CA",
    title: "Français - Canada",
    dir: "ltr"
  },
  {
    LocaleSvg: esCL,
    name: "es-CL",
    title: "Spanish - Chilian",
    dir: "ltr"
  },
  {
    LocaleSvg: esMX,
    name: "es-MX",
    title: "Spanish - Mexican",
    dir: "ltr"
  },
  {
    LocaleSvg: ptBR,
    name: "pt-BR",
    title: "Portuguese - Brazil",
    dir: "ltr"
  },
  {
    LocaleSvg: it,
    name: "it",
    title: "Italiano",
    dir: "ltr"
  },
  {
    LocaleSvg: no,
    name: "no",
    title: "Norwegian",
    dir: "ltr"
  },
  {
    LocaleSvg: chDE,
    name: "de-CH",
    title: "Deutsch - Switzerland",
    dir: "ltr"
  },
  {
    LocaleSvg: chFR,
    name: "fr-CH",
    title: "Français - Switzerland",
    dir: "ltr"
  },
  {
    LocaleSvg: chIT,
    name: "it-CH",
    title: "Italiano - Switzerland",
    dir: "ltr"
  }
  // {
  //   LocaleSvg: es,
  //   name: "es",
  //   title: "Spanish",
  //   dir: "ltr",
  // },
  // {
  //   LocaleSvg: ar,
  //   name: "ar",
  //   title: "عربي",
  //   dir: "rtl"
  //
  // },
  // {
  //   LocaleSvg: arEN,
  //   name: "ar-EN",
  //   title: "Arabic - English",
  // },
];
const SvgSearch = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 24, height: 25, viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.4313 11.1357C17.4313 12.6855 16.9124 14.1142 16.0389 15.2575L20.16 19.3785L18.8786 20.6599L14.7575 16.5389C13.6142 17.4124 12.1855 17.9313 10.6357 17.9313C6.88257 17.9313 3.84009 14.8888 3.84009 11.1357C3.84009 7.38257 6.88257 4.34009 10.6357 4.34009C14.3888 4.34009 17.4313 7.38257 17.4313 11.1357ZM15.6189 11.1357C15.6189 13.888 13.3878 16.1192 10.6355 16.1192C7.88322 16.1192 5.65206 13.888 5.65206 11.1357C5.65206 8.38348 7.88322 6.15232 10.6355 6.15232C13.3878 6.15232 15.6189 8.38348 15.6189 11.1357Z", fill: "white" }));
const SvgBar = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M2.5 5H17.5M2.5 10H17.5M2.5 15H17.5", stroke: "white", strokeWidth: 2.08333, strokeLinecap: "round", strokeLinejoin: "round" }));
const SvgNotific = (props) => /* @__PURE__ */ reactExports.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", viewBox: "0 0 16 19.5", style: {
  enableBackground: "new 0 0 16 19.5"
}, xmlSpace: "preserve", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M12,8.5C12,6,10.5,4,8,4S4,6,4,8.5v6h8V8.5z M16,15.5v1H0v-1l2-2v-5c0-3.1,1.6-5.6,4.5-6.3V1.5 C6.5,0.7,7.2,0,8,0s1.5,0.7,1.5,1.5v0.7C12.4,2.9,14,5.4,14,8.5v5L16,15.5z M6,17.5h4c0,1.1-0.9,2-2,2S6,18.6,6,17.5z" }));
const SvgUser = (props) => /* @__PURE__ */ reactExports.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", viewBox: "0 0 16 16", style: {
  enableBackground: "new 0 0 16 16"
}, xmlSpace: "preserve", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M8,10c-2.7,0-8,1.3-8,4v2h16v-2C16,11.3,10.7,10,8,10z M8,8c2.2,0,4-1.8,4-4s-1.8-4-4-4S4,1.8,4,4S5.8,8,8,8z" }));
const SvgClose$1 = (props) => /* @__PURE__ */ reactExports.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", viewBox: "0 0 34.2 34.2", style: {
  enableBackground: "new 0 0 34.2 34.2"
}, xmlSpace: "preserve", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M20.2,17.1l13.5,13.1c0.7,0.7,0.7,1.7,0,2.4c-0.7,0.7-1.8,0.7-2.5,0L17.7,19.5L3,33.7 c-0.7,0.7-1.8,0.7-2.5,0c-0.7-0.7-0.7-1.7,0-2.4l14.8-14.2L0.5,2.9c-0.7-0.7-0.7-1.7,0-2.4s1.8-0.7,2.5,0l14.8,14.2L31.3,1.7 C31.9,1,33,1,33.7,1.7s0.7,1.7,0,2.4L20.2,17.1z" }));
const useSearchDefault = () => {
  const { gamesData, gamesAllowed } = useGlobalData();
  return reactExports.useMemo(() => {
    const collectionId = "_top";
    const sliceCount = 10;
    let games = (gamesData || {})[collectionId] ?? [];
    games = games.filter((notNull) => notNull);
    games = games.slice(0, sliceCount);
    games = games.map((gameCode) => ({
      gameCode,
      ...gamesAllowed[gameCode] ?? {}
    }));
    return games;
  }, [gamesData, gamesAllowed]);
};
const SvgClose = (props) => /* @__PURE__ */ reactExports.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", viewBox: "0 0 34.2 34.2", style: {
  enableBackground: "new 0 0 34.2 34.2"
}, xmlSpace: "preserve", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M20.2,17.1l13.5,13.1c0.7,0.7,0.7,1.7,0,2.4c-0.7,0.7-1.8,0.7-2.5,0L17.7,19.5L3,33.7 c-0.7,0.7-1.8,0.7-2.5,0c-0.7-0.7-0.7-1.7,0-2.4l14.8-14.2L0.5,2.9c-0.7-0.7-0.7-1.7,0-2.4s1.8-0.7,2.5,0l14.8,14.2L31.3,1.7 C31.9,1,33,1,33.7,1.7s0.7,1.7,0,2.4L20.2,17.1z" }));
const HomeSearch = ({
  setSearchVisible
}) => {
  const isMobile = useMobile();
  const defaultSearchGames = useSearchDefault();
  const userId = useUserId();
  const setAuthVisible = useAuthVisible();
  const { userGender } = useAuth();
  const { setGameCode, setGenderCheck } = useGender();
  const [value, setValue] = reactExports.useState("");
  const data = useGlobalData();
  const { providerTitlesMap } = data;
  const [games, setGames] = reactExports.useState([]);
  const navigateGameHandler = (gameCode) => {
    if ((userGender === null || userGender === "") && (gameCode == null ? void 0 : gameCode.split("/")[0]) === "quickfire") {
      setGameCode(gameCode);
      setGenderCheck(true);
    } else {
      navigate(`/game/${gameCode}`);
    }
  };
  reactExports.useEffect(() => {
    const timerId = setTimeout(() => {
      if (!value) {
        setGames(defaultSearchGames);
        return;
      }
      setGames(
        Object.entries((data == null ? void 0 : data.gamesAllowed) || {}).filter(
          ([, game]) => game.title.toLowerCase().search(value.toLowerCase()) !== -1
        ).slice(0, 10).map(([gameCode, game]) => ({
          ...game,
          gameCode
        }))
      );
    }, 500);
    return () => {
      clearTimeout(timerId);
    };
  }, [data, defaultSearchGames, isMobile, value]);
  const findYourGameLocale = useLocale("Find your game");
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
    "div",
    {
      className: "body__search",
      onClick: () => {
        setSearchVisible(false);
      }
    },
    /* @__PURE__ */ React.createElement("div", { className: "search", onClick: (event) => event.stopPropagation() }, /* @__PURE__ */ React.createElement("div", { className: "search__button" }, /* @__PURE__ */ React.createElement(
      "input",
      {
        className: "search__input",
        type: "text",
        autoComplete: "off",
        placeholder: findYourGameLocale,
        autoFocus: true,
        onChange: (event) => setValue(event.target.value)
      }
    ), /* @__PURE__ */ React.createElement("span", { className: "search__icon font-icons font-icons--search" }, /* @__PURE__ */ React.createElement(SvgSearch$1, { height: 18 })), /* @__PURE__ */ React.createElement(
      "button",
      {
        className: "search__close font-icons font-icons--close",
        type: "button",
        onClick: () => {
          setSearchVisible(false);
        }
      },
      /* @__PURE__ */ React.createElement(SvgClose, { width: 14 })
    )), !!games.length && /* @__PURE__ */ React.createElement("div", { className: "search__container green-scroll" }, /* @__PURE__ */ React.createElement("ul", { className: "search__list" }, games.map(
      ({
        gameCode,
        demo,
        collections,
        title,
        provider
      }) => /* @__PURE__ */ React.createElement("li", { key: gameCode }, /* @__PURE__ */ React.createElement(
        "a",
        {
          className: "search__item ng-scope",
          onClick: () => {
            if (userId) {
              navigateGameHandler(gameCode);
            } else if (!demo || (collections == null ? void 0 : collections.live)) {
              setAuthVisible(2);
            } else {
              navigate(`/game/${gameCode}?fun`);
            }
            setSearchVisible(false);
          }
        },
        /* @__PURE__ */ React.createElement(
          "img",
          {
            decoding: "async",
            loading: "lazy",
            className: "search__image",
            src: `https://cdn2.softswiss.net/abocasino/i/s2/${gameCode}.webp`,
            alt: gameCode,
            style: { opacity: 1 }
          }
        ),
        /* @__PURE__ */ React.createElement("span", { className: "search__texts" }, /* @__PURE__ */ React.createElement("span", { className: "search__title ng-binding" }, title), providerTitlesMap && provider && /* @__PURE__ */ React.createElement("span", { className: "search__provider ng-binding" }, providerTitlesMap[provider]))
      ))
    ))))
  ));
};
const lvlPoints = [
  0,
  50,
  100,
  200,
  300,
  500,
  750,
  1e3,
  1250,
  1500,
  1750,
  2e3,
  2500,
  3e3,
  3500,
  4e3,
  6e3,
  8e3,
  1e4,
  12500,
  15e3,
  17500,
  2e4,
  22500,
  25e3,
  27500,
  3e4,
  35e3,
  4e4,
  45e3,
  5e4
];
const BonusTimer = ({ end }) => {
  const [now, setNow] = reactExports.useState(+/* @__PURE__ */ new Date());
  const [days, hours, minutes, seconds] = calculateTimer(now, +new Date(end));
  reactExports.useEffect(() => {
    const timerId = setInterval(() => {
      setNow(+/* @__PURE__ */ new Date());
    }, 1e3);
    return () => {
      clearInterval(timerId);
    };
  }, []);
  return /* @__PURE__ */ React.createElement("div", { className: "bonus-timer" }, /* @__PURE__ */ React.createElement("div", { className: "bonus-timer-item" }, /* @__PURE__ */ React.createElement("div", { className: "number" }, days), /* @__PURE__ */ React.createElement(LocaleText, { className: "char", text: "d" })), /* @__PURE__ */ React.createElement("div", { className: "bonus-timer-item" }, /* @__PURE__ */ React.createElement("div", { className: "number" }, hours), /* @__PURE__ */ React.createElement(LocaleText, { className: "char", text: "h" })), /* @__PURE__ */ React.createElement("div", { className: "bonus-timer-item" }, /* @__PURE__ */ React.createElement("div", { className: "number" }, minutes), /* @__PURE__ */ React.createElement(LocaleText, { className: "char", text: "m" })), /* @__PURE__ */ React.createElement("div", { className: "bonus-timer-item" }, /* @__PURE__ */ React.createElement("div", { className: "number" }, seconds), /* @__PURE__ */ React.createElement(LocaleText, { className: "char", text: "s" })));
};
const HeaderLocaleSelector = ({ isBar }) => {
  const { user, refreshUser } = useAuth();
  const [isLocaleOpen, setLocaleOpen] = reactExports.useState(false);
  const [barName, setBarName] = reactExports.useState("");
  const localeRef = reactExports.useRef(null);
  let { locale, urlWithoutLocale } = usePageContext();
  if (!locale) {
    locale = localeDefault;
  }
  async function changeLocale(event, locale2, dir) {
    const element = document.querySelector("html");
    element == null ? void 0 : element.setAttribute("dir", dir);
    setLocaleOpen(false);
    localStorage.setItem("lang", locale2);
    if (user == null ? void 0 : user.id) {
      event.preventDefault();
      event.stopPropagation();
      let serverLocale = locale2;
      if (serverLocale === "ca")
        serverLocale = "en-CA";
      await request(`player/update_locale?locale=${serverLocale}`, "PATCH", 1);
      await refreshUser();
    } else {
      let serverLocale = locale2;
      if (serverLocale === "ca")
        serverLocale = "en-CA";
      await request(`player/update_locale?locale=${serverLocale}`, "PATCH", 1);
    }
  }
  reactExports.useEffect(() => {
    handleClickOutside(localeRef, setLocaleOpen, isLocaleOpen);
  }, [localeRef, isLocaleOpen]);
  reactExports.useEffect(() => {
    if (user) {
      localStorage.setItem("lang", user == null ? void 0 : user.language);
    }
  }, [user]);
  reactExports.useEffect(() => {
    setBarName(() => {
      if (isLocaleOpen && isBar) {
        return " hamburger";
      }
      if (isLocaleOpen && !isBar) {
        return " open";
      }
      return "";
    });
  }, [isBar, isLocaleOpen]);
  return /* @__PURE__ */ React.createElement("div", null, (!(user == null ? void 0 : user.id) || (user == null ? void 0 : user.id) || isBar) && /* @__PURE__ */ React.createElement("div", { className: isBar ? "bar-menu__locales" : "header__locales" }, /* @__PURE__ */ React.createElement(
    "div",
    {
      className: `${isBar ? "locales-selector--bar " : ""}locales-selector${barName}`,
      ref: localeRef
    },
    /* @__PURE__ */ React.createElement(
      "div",
      {
        className: "locales-selector__button",
        onClick: () => setLocaleOpen((bool) => !bool)
      },
      /* @__PURE__ */ React.createElement("span", { className: "locales-selector__active-code" }, locale),
      /* @__PURE__ */ React.createElement("span", { className: "locales-selector__caret" }, "▼")
    ),
    /* @__PURE__ */ React.createElement("ul", { className: "locales-selector__menu red-scroll" }, flags.map(
      ({ LocaleSvg, name, title, hide, dir }) => hide ? null : /* @__PURE__ */ React.createElement("li", { key: name, onClick: () => setLocaleOpen(false) }, /* @__PURE__ */ React.createElement(
        Link,
        {
          locale: name,
          href: urlWithoutLocale,
          onClick: (event) => {
            changeLocale(event, name, dir);
          },
          replaceHistory: true,
          className: `locales-selector__link${name === locale ? " locales-selector__link--current" : ""}`
        },
        /* @__PURE__ */ React.createElement(
          "img",
          {
            src: LocaleSvg,
            alt: "",
            className: "locales-selector__icon"
          }
        ),
        /* @__PURE__ */ React.createElement("span", { className: "locales-selector__name" }, title)
      ))
    ))
  )));
};
const FreeSpinModal = ({
  setFreespinModalID,
  notificationModalRef,
  freespinModalData,
  rejectFreespin,
  activateFreespin,
  refreshUser
}) => {
  const [count, setCount] = reactExports.useState(3);
  return /* @__PURE__ */ React.createElement("div", { className: "modal modal-login adaptive-log-in-modal" }, /* @__PURE__ */ React.createElement(
    "div",
    {
      className: "modal-backdrop in",
      onClick: () => setFreespinModalID(0)
    }
  ), /* @__PURE__ */ React.createElement("div", { className: "modal-dialog kkdu-freespin-modal-dialog grey-scroll" }, /* @__PURE__ */ React.createElement("div", { ref: notificationModalRef, className: "modal-content" }, /* @__PURE__ */ React.createElement("div", { className: "modal__body" }, /* @__PURE__ */ React.createElement("div", { className: "kkdu-bonus-notification-modal kkdu-freespin-notification-modal" }, /* @__PURE__ */ React.createElement("div", { className: "freespin-title" }, freespinModalData == null ? void 0 : freespinModalData.title, " ", /* @__PURE__ */ React.createElement("small", null, "(", freespinModalData == null ? void 0 : freespinModalData.stage, ")")), /* @__PURE__ */ React.createElement("div", { className: "freespin-description" }, freespinModalData == null ? void 0 : freespinModalData.freespins_total, " ", /* @__PURE__ */ React.createElement(LocaleText, { text: "Freespins" })), /* @__PURE__ */ React.createElement("div", { className: "freespin-games" }, freespinModalData == null ? void 0 : freespinModalData.games_info.slice(0, count).map((gameInfo) => /* @__PURE__ */ React.createElement("div", { className: "freespin-game", key: gameInfo.identifier }, /* @__PURE__ */ React.createElement(
    "img",
    {
      src: `https://cdn2.softswiss.net/arlekincasino/i/s2/${gameInfo.identifier}.webp`,
      alt: gameInfo.identifier,
      className: "freespin-image"
    }
  ), /* @__PURE__ */ React.createElement("div", { className: "freespin-game-title" }, gameInfo.title), /* @__PURE__ */ React.createElement(
    Link,
    {
      href: `/game/${gameInfo.identifier}`,
      className: "button freespin-play-button",
      onClick: () => {
        setFreespinModalID(0);
      }
    },
    /* @__PURE__ */ React.createElement(LocaleText, { text: "Play now" })
  )))), (freespinModalData == null ? void 0 : freespinModalData.games_info.length) > count && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
    "button",
    {
      className: "button",
      type: "button",
      onClick: () => {
        setCount((prev) => {
          let next = prev + 6;
          if ((freespinModalData == null ? void 0 : freespinModalData.games_info.length) < next) {
            next = freespinModalData == null ? void 0 : freespinModalData.games_info.length;
          }
          return next;
        });
      }
    },
    /* @__PURE__ */ React.createElement(LocaleText, { text: "Show more" })
  )), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement("div", { className: "text-row" }, /* @__PURE__ */ React.createElement(LocaleText, { text: "Activate Until" })), /* @__PURE__ */ React.createElement(BonusTimer, { end: freespinModalData == null ? void 0 : freespinModalData.activatable_until }), /* @__PURE__ */ React.createElement("div", { className: "button-row" }, /* @__PURE__ */ React.createElement(
    "button",
    {
      className: "button button-light",
      type: "button",
      onClick: () => {
        rejectFreespin();
        setFreespinModalID(0);
      }
    },
    /* @__PURE__ */ React.createElement(LocaleText, { text: "Forfeit Bonus" })
  ), (freespinModalData == null ? void 0 : freespinModalData.stage) !== "activated" && /* @__PURE__ */ React.createElement(
    "button",
    {
      className: "button",
      type: "button",
      onClick: async () => {
        setFreespinModalID(0);
        await activateFreespin();
        await refreshUser();
      }
    },
    /* @__PURE__ */ React.createElement(LocaleText, { text: "Activate" })
  ))))), /* @__PURE__ */ React.createElement(
    "button",
    {
      type: "button",
      className: "modal__close",
      onClick: () => {
        setFreespinModalID(0);
      }
    },
    /* @__PURE__ */ React.createElement(SvgClose$1, { width: 14, height: 14 })
  )));
};
const HeaderAuth = () => {
  const { user, lvl, points, signOut, refreshUser } = useAuth();
  const { data: bonuses, connect } = useBonuses();
  const { data: freeSpins, connect: connectFreespins } = useFreespin();
  const [isNotificationOpen, setNotificationOpen] = reactExports.useState(false);
  const notificationRef = reactExports.useRef(null);
  const [isLevelMenuOpen, setLevelMenuOpen] = reactExports.useState(false);
  const levelMenuRef = reactExports.useRef(null);
  const [notificationModalID, setNotificationModalIDState] = reactExports.useState(0);
  const notificationModalRef = reactExports.useRef(null);
  const [freespinModalID, setFreespinModalIDState] = reactExports.useState(0);
  const [isScrolled, setScrolled] = reactExports.useState(false);
  const setNotificationModalID = (state) => {
    bodyScrollHandler(state);
    setNotificationModalIDState(state);
  };
  const setFreespinModalID = (state) => {
    bodyScrollHandler(state);
    setFreespinModalIDState(state);
  };
  const percents = (points - lvlPoints[lvl]) / (lvlPoints[lvl + 1] - lvlPoints[lvl]) * 100;
  const bonusModalData = bonuses.filter(
    ({ id }) => id === notificationModalID
  )[0];
  const notificationCount = (bonuses == null ? void 0 : bonuses.filter(({ kkduNew }) => kkduNew).length) ?? 0;
  const rejectBonus = () => {
    request(`player/bonuses/${notificationModalID}`, "DELETE", 1);
  };
  const activateBonus = async () => {
    await request(
      `player/bonuses/${notificationModalID}/activation`,
      "POST",
      1
    );
  };
  const rejectFreespin = () => {
    request(`player/freespins/${freespinModalID}`, "DELETE", 1);
  };
  const activateFreespin = async () => {
    await request(`player/freespins/${freespinModalID}/activation`, "POST", 1);
  };
  const freespinModalData = freeSpins.filter(
    ({ id }) => id === freespinModalID
  )[0];
  reactExports.useEffect(() => {
    connectFreespins();
  }, [connectFreespins]);
  reactExports.useEffect(() => {
    connect();
  }, [connect]);
  reactExports.useEffect(() => {
    handleClickOutside(
      notificationRef,
      setNotificationOpen,
      isNotificationOpen
    );
    return () => {
    };
  }, [isNotificationOpen, notificationRef]);
  reactExports.useEffect(() => {
    handleClickOutside(levelMenuRef, setLevelMenuOpen, isLevelMenuOpen);
  }, [levelMenuRef, isLevelMenuOpen]);
  reactExports.useEffect(() => {
    function handler() {
      if (!isScrolled && window.scrollY > 60) {
        setScrolled(true);
      }
      if (isScrolled && window.scrollY <= 60) {
        setScrolled(false);
      }
    }
    document.addEventListener("scroll", handler);
    return () => {
      document.removeEventListener("scroll", handler);
    };
  }, [isScrolled, setScrolled]);
  return !(user == null ? void 0 : user.id) ? null : /* @__PURE__ */ React.createElement(TranslationsContextProvider, { translations: headerTranslations }, /* @__PURE__ */ React.createElement("div", { className: "auth__level-user" }, /* @__PURE__ */ React.createElement("div", { className: "auth__block-user" }, /* @__PURE__ */ React.createElement("div", { className: "auth__notific" }, /* @__PURE__ */ React.createElement(
    "div",
    {
      className: `push-notifications push-notifications--empty${isNotificationOpen ? " open" : ""}`,
      ref: notificationRef
    },
    /* @__PURE__ */ React.createElement(
      "div",
      {
        className: "push-notifications__button",
        onClick: () => setNotificationOpen((bool) => !bool)
      },
      /* @__PURE__ */ React.createElement("div", { className: "push-notifications__icon" }, /* @__PURE__ */ React.createElement(SvgNotific, { width: 16 })),
      Boolean(notificationCount) && /* @__PURE__ */ React.createElement("div", { className: "push-notifications__count push-notifications__count--new" }, notificationCount),
      (bonuses.length > 0 || freeSpins.length > 0) && /* @__PURE__ */ React.createElement("div", { className: "push-notifications__dot" })
    ),
    isNotificationOpen && /* @__PURE__ */ React.createElement("div", { className: "push-notifications__content grey-scroll" }, /* @__PURE__ */ React.createElement("ul", { className: "push-notifications__list" }, !bonuses.length && !freeSpins.length && /* @__PURE__ */ React.createElement("li", { className: "push-notifications__item" }, /* @__PURE__ */ React.createElement("div", { className: "card-notifications card-notifications--empty" }, /* @__PURE__ */ React.createElement("div", { className: "card-notifications__content" }, /* @__PURE__ */ React.createElement(LocaleText, { text: "No current notifications" })))), bonuses.slice().reverse().map((bonus) => /* @__PURE__ */ React.createElement(
      "li",
      {
        key: bonus.id,
        className: `push-notifications__item push-notifications__item--jackpot_win${bonus.kkduNew ? " push-notifications__item--new" : ""}`
      },
      /* @__PURE__ */ React.createElement(
        "div",
        {
          className: `card-notifications card-notifications--jackpot_win${bonus.kkduNew ? " card-notifications--new" : ""}`,
          onClick: () => {
            setNotificationModalID(bonus.id);
          }
        },
        /* @__PURE__ */ React.createElement("div", { className: "card-notifications__image card-notifications__image--jackpot_win" }),
        /* @__PURE__ */ React.createElement("div", { className: "card-notifications__content" }, /* @__PURE__ */ React.createElement("div", { className: "card-notifications__title " }, bonus.title), /* @__PURE__ */ React.createElement("div", { className: "card-notifications__description " }, currencyMap[bonus.currency], (bonus.amount_cents / 100).toFixed(2), /* @__PURE__ */ React.createElement("span", { className: "card-notifications__wager" }, "wager"), " ", currencyMap[bonus.currency], ((bonus.amount_wager_cents || bonus.amount_wager_requirement_cents) / 100).toFixed(2)))
      )
    )), freeSpins.map((spin) => /* @__PURE__ */ React.createElement(
      "li",
      {
        key: spin.id,
        className: `push-notifications__item push-notifications__item--jackpot_win${spin.kkduNew ? " push-notifications__item--new" : ""}`
      },
      /* @__PURE__ */ React.createElement(
        "div",
        {
          className: `card-notifications card-notifications--freespins${spin.kkduNew ? " card-notifications--new" : ""}`,
          onClick: () => {
            setFreespinModalID(spin.id);
          }
        },
        /* @__PURE__ */ React.createElement("div", { className: "card-notifications__image card-notifications__image--freespins" }),
        /* @__PURE__ */ React.createElement("div", { className: "card-notifications__content" }, /* @__PURE__ */ React.createElement("div", { className: "card-notifications__title" }, spin.title), /* @__PURE__ */ React.createElement("div", { className: "card-notifications__description" }, spin.freespins_total, " ", /* @__PURE__ */ React.createElement(LocaleText, { text: "Freespins" })))
      )
    ))))
  )), !!notificationModalID && /* @__PURE__ */ React.createElement("div", { className: "modal modal-login adaptive-log-in-modal" }, /* @__PURE__ */ React.createElement(
    "div",
    {
      className: "modal-backdrop in",
      onClick: () => setNotificationModalID(0)
    }
  ), /* @__PURE__ */ React.createElement("div", { className: "modal-dialog grey-scroll" }, /* @__PURE__ */ React.createElement("div", { ref: notificationModalRef, className: "modal-content" }, /* @__PURE__ */ React.createElement("div", { className: "modal__body" }, /* @__PURE__ */ React.createElement("div", { className: "kkdu-bonus-notification-modal" }, /* @__PURE__ */ React.createElement("div", { className: "main-title" }, /* @__PURE__ */ React.createElement(LocaleText, { text: "JACKPOT WIN" })), /* @__PURE__ */ React.createElement("div", { className: "text-row" }, /* @__PURE__ */ React.createElement("strong", null, bonusModalData == null ? void 0 : bonusModalData.title), " (", bonusModalData == null ? void 0 : bonusModalData.stage, ")"), /* @__PURE__ */ React.createElement("div", { className: "text-row", style: { marginBottom: 0 } }, /* @__PURE__ */ React.createElement("strong", { className: "money" }, (((bonusModalData == null ? void 0 : bonusModalData.amount_cents) ?? 0) / 100).toFixed(
    2
  ), bonusModalData == null ? void 0 : bonusModalData.currency)), /* @__PURE__ */ React.createElement("div", { className: "text-row" }, "Wager: ", currencyMap[bonusModalData.currency], ((bonusModalData.amount_wager_cents || bonusModalData.amount_wager_requirement_cents) / 100).toFixed(2)), /* @__PURE__ */ React.createElement("div", { className: "text-row" }, /* @__PURE__ */ React.createElement(LocaleText, { text: "Activate Until" })), /* @__PURE__ */ React.createElement(BonusTimer, { end: bonusModalData == null ? void 0 : bonusModalData.activatable_until }), /* @__PURE__ */ React.createElement("div", { className: "button-row" }, /* @__PURE__ */ React.createElement(
    "button",
    {
      className: "button button-light",
      type: "button",
      onClick: () => {
        rejectBonus();
        setNotificationModalID(0);
      }
    },
    /* @__PURE__ */ React.createElement(LocaleText, { text: "Forfeit Bonus" })
  ), (bonusModalData == null ? void 0 : bonusModalData.stage) === "issued" && /* @__PURE__ */ React.createElement(
    "button",
    {
      className: "button",
      type: "button",
      onClick: async () => {
        setNotificationModalID(0);
        await activateBonus();
        await refreshUser();
      }
    },
    /* @__PURE__ */ React.createElement(LocaleText, { text: "Activate" })
  ))))), /* @__PURE__ */ React.createElement(
    "button",
    {
      type: "button",
      className: "modal__close",
      onClick: () => {
        setNotificationModalID(0);
      }
    },
    /* @__PURE__ */ React.createElement(SvgClose$1, { width: 14, height: 14 })
  ))), !!freespinModalID && /* @__PURE__ */ React.createElement(
    FreeSpinModal,
    {
      setFreespinModalID,
      notificationModalRef,
      freespinModalData,
      rejectFreespin,
      activateFreespin,
      refreshUser
    }
  ), /* @__PURE__ */ React.createElement("div", { className: "auth__user-menu", ref: levelMenuRef }, /* @__PURE__ */ React.createElement("div", { className: "user-menu__button" }, /* @__PURE__ */ React.createElement(
    "button",
    {
      type: "button",
      onClick: () => setLevelMenuOpen((bool) => !bool)
    },
    /* @__PURE__ */ React.createElement(SvgUser, { width: 16 })
  )), isLevelMenuOpen && /* @__PURE__ */ React.createElement("div", { className: "user-menu__block" }, /* @__PURE__ */ React.createElement("div", { className: "user-menu__status" }, /* @__PURE__ */ React.createElement("div", { className: "status-progress" }, /* @__PURE__ */ React.createElement("div", { className: "status-progress__wrapper" }, /* @__PURE__ */ React.createElement("div", { className: "status-progress__info" }, /* @__PURE__ */ React.createElement("div", { className: "status-progress__title" }, /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement(LocaleText, { text: "Level" })), /* @__PURE__ */ React.createElement("span", { className: "status-progress__level" }, lvl)), /* @__PURE__ */ React.createElement("div", { className: "status-progress__points" }, /* @__PURE__ */ React.createElement("b", null, points), " / ", /* @__PURE__ */ React.createElement("span", null, lvlPoints[lvl + 1]), " ", /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement(LocaleText, { text: "Points" })))), /* @__PURE__ */ React.createElement("div", { className: "status-progress__progress" }, /* @__PURE__ */ React.createElement("div", { className: "status-progress__progress-bg" }, /* @__PURE__ */ React.createElement(
    "div",
    {
      className: "status-progress__progress-line",
      style: { width: `${percents}%` }
    }
  )))))), /* @__PURE__ */ React.createElement("div", { className: "user-menu__menu" }, /* @__PURE__ */ React.createElement("ul", null, /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement(
    "a",
    {
      href: `${baseUrl}profile/info?back-url=${linkUrl}&target=_self`
    },
    /* @__PURE__ */ React.createElement(LocaleText, { text: "Profile Info" })
  )), /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement(
    "a",
    {
      href: `${baseUrl}profile/bonuses/actual?back-url=${linkUrl}&target=_self`
    },
    /* @__PURE__ */ React.createElement(LocaleText, { text: "BONUSES" })
  )), /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement(
    "a",
    {
      href: `${baseUrl}profile/bets?back-url=${linkUrl}&target=_self`
    },
    /* @__PURE__ */ React.createElement(LocaleText, { text: "Bets" })
  )), /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement(
    "a",
    {
      href: `${baseUrl}profile/wallet/transactions?back-url=${linkUrl}&target=_self`
    },
    /* @__PURE__ */ React.createElement(LocaleText, { text: "HISTORY" })
  )), /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement(
    "a",
    {
      href: "",
      onClick: (event) => {
        event.preventDefault();
        signOut();
      }
    },
    /* @__PURE__ */ React.createElement(LocaleText, { text: "SIGN OUT" })
  )))))))));
};
const Header = ({ setHamburgerMenuOpen }) => {
  const isMobile = useMobile();
  const [isSearchVisible, setSearchVisible] = reactExports.useState(false);
  const search = reactExports.useRef(null);
  const input = reactExports.useRef(null);
  const searchRef = reactExports.useRef(null);
  reactExports.useEffect(() => {
    bodyScrollHandler(isSearchVisible);
  }, [isSearchVisible]);
  reactExports.useEffect(() => {
    var _a;
    if (search.current && input.current && isSearchVisible) {
      (_a = input.current) == null ? void 0 : _a.focus();
    }
  }, [isSearchVisible]);
  reactExports.useEffect(() => {
    handleClickOutside(searchRef, setSearchVisible, isSearchVisible);
    return () => {
    };
  }, [searchRef, isSearchVisible, setSearchVisible]);
  return /* @__PURE__ */ React.createElement(TranslationsContextProvider, { translations: headerTranslations }, /* @__PURE__ */ React.createElement("header", { className: "header" }, /* @__PURE__ */ React.createElement("div", { className: "header-wrapper" }, /* @__PURE__ */ React.createElement("div", { className: "each-side-wrapper" }, isMobile && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "header__bar-menu" }, /* @__PURE__ */ React.createElement(SvgBar, { onClick: () => setHamburgerMenuOpen(true) })), /* @__PURE__ */ React.createElement("div", { className: "header__bar-menu logo" }, /* @__PURE__ */ React.createElement(SvgLogo, { onClick: () => navigate("/") })), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
    "div",
    {
      className: "header__search",
      onClick: () => {
        setSearchVisible(true);
      },
      ref: search
    },
    /* @__PURE__ */ React.createElement(SvgSearch, null)
  ), isSearchVisible ? /* @__PURE__ */ React.createElement(HomeSearch, { setSearchVisible }) : "")), !isMobile && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
    "div",
    {
      className: "header__search",
      onClick: () => {
        setSearchVisible(true);
      },
      ref: search
    },
    /* @__PURE__ */ React.createElement(SvgSearch, null),
    /* @__PURE__ */ React.createElement("span", { style: { color: "gray" } }, /* @__PURE__ */ React.createElement(LocaleText, { text: "Search" }))
  ), isSearchVisible ? /* @__PURE__ */ React.createElement(HomeSearch, { setSearchVisible }) : "")), /* @__PURE__ */ React.createElement("div", { className: "each-side-wrapper" }, /* @__PURE__ */ React.createElement(HeaderAuth, null), /* @__PURE__ */ React.createElement(HeaderLocaleSelector, null)))));
};
export {
  Header as H,
  lvlPoints as l
};