import { isEmpty } from "lodash";
import React, { useContext, useEffect, useState } from "react";
import { Link, useLocation } from "react-router-dom";
import AuthProvider from "../context/AuthContext";
import io from "socket.io-client";
import { apiGet, apiPost } from "../Utils/apiFetch";
import apiPath from "../Utils/apiPath";
import obj from "../Utils/helpers";
import MessageBox from "./MessageBox";
import WalletWrap from "./WalletWrap";
import BetSlipContext from "../context/BetSlipContext";

const Header = () => {
  let {
    user,
    user_coins,
    logoutUser,
    setOpenBetsToogle,
    setSettingToogle,
    setIsTv,
    setAnnouncmentToogle,
    isTv,
    setWalletOpen,
    walletOpen,
  } = useContext(AuthProvider);
  
  const location = useLocation();
  let { betLoader, unMatchedBets, setRefreshCurrentBets, balanceRefresh, setBalanceRefresh } =
    useContext(BetSlipContext);
  const [refresh, setRefresh] = useState(false);
  const [loader, setLoader] = useState(false);
  const [loader1, setLoader1] = useState(false);

  // Synchronize local balance state with user_coins from AuthContext
  const [balance, setBalance] = useState({
    totalCoins: user_coins?.totalCoins || 0,
    exposure: user_coins?.exposure || 0
  });

  // Update local balance when user_coins changes
  // useEffect(() => {
  //   setBalance({
  //     totalCoins: user_coins?.totalCoins || 0,
  //     exposure: user_coins?.exposure || 0
  //   });
  // }, [user_coins]);

  const refreshAmount = () => {
    setRefresh(true);
    const newSocket = io(
      `${import.meta.env.VITE_API_BASE_URL_OLD}?token=${localStorage.getItem(
        "token"
      )}&userType=front`,
      {
        transports: ["websocket"],
      }
    );
    const coinListener = (message) => {
      setBalance({
        totalCoins: message.results.totalCoins,
        exposure: message.results.exposure
      });
      setRefresh(false);
    };
    const forceLogout = (message) => {
      const uniqueId = localStorage.getItem("uniqueId");
      if (uniqueId !== message.results.uniqueId) {
        logoutUser();
      }
    };
    newSocket.emit("getCoins", { user_id: user ? user.user._id : "" });
    newSocket.on("listenGetCoin", coinListener);
    newSocket.on("listenForceLogout", forceLogout);
    return () => newSocket.close();
  };

  const recallCasinoAmount = async (event) => {
    if (!isEmpty(user)) {
      setLoader(true);
      try {
        const { status, data: response_users } = await apiPost(
          apiPath.withdrawCasinoAmount,
          { amount: casionData ? casionData : user_coins?.casinoCoins }
        );
        if (status === 200) {
          if (response_users.status) {
            if (response_users.data.status === "0000") {
              setLoader(false);
              mainBalanceClick();
            } else {
              setLoader(false);
            }
          } else {
            setLoader(false);
          }
        }
      } catch (err) {
        setLoader(false);
      }
    }
  };

  const recallEgtCasinoAmount = async (event) => {
    if (!isEmpty(user)) {
      setLoader1(true);
      try {
        const { status, data: response_users } = await apiPost(
          apiPath.withdrawEgtCasinoAmount,
          { amount: 0 }
        );
        if (status === 200) {
          if (response_users.status) {
            setLoader1(false);
            mainEgBalanceClick();
            getCoins();
          } else {
            setLoader1(false);
          }
        }
      } catch (err) {
        setLoader1(false);
      }
    }
  };

  const [casionData, setCasinoData] = useState(0);
  const [egtCasionData, setEgtCasionData] = useState(0);

  const mainBalanceClick = async () => {
    let { status, data: response_users } = await apiPost(apiPath.awcBalance);
    if (status === 200) {
      if (!isEmpty(response_users.data)) {
        setCasinoData(response_users.data.balance);
      }
    }
  };

  const mainEgBalanceClick = async () => {
    let { status: status1, data: response_users1 } = await apiPost(
      apiPath.egtBalance
    );
    if (status1 === 200) {
      if (!isEmpty(response_users1.data)) {
        setEgtCasionData(response_users1.data.balance);
      }
    }
  };

  // const getCoins = async () => {
  //   if (!isEmpty(user)) {
  //     const { status, data } = await apiGet(apiPath.refreshAmount);
  //     if (status === 200) {
  //       if (data.success) {
  //         setBalance({
  //           totalCoins: data?.results?.totalCoins,
  //           exposure: data?.results?.exposure
  //         });
  //       }
  //     }
  //   }
  // };

  const getCoins = async () => {
    if (!isEmpty(user)) {
      setRefresh(true);
      try {
        const { status, data } = await apiGet(apiPath.refreshAmount);
        if (status === 200 && data?.success) {
          setBalance({
            totalCoins: data?.results?.totalCoins,
            exposure: data?.results?.exposure,
          });
        }
      } finally {
        setRefresh(false);
      }
    }
  };

  useEffect(() => {
    if (!isEmpty(user)) {
      getCoins();
      mainBalanceClick();
      mainEgBalanceClick();
    }
  }, [user]);

  useEffect(() => {
  if (balanceRefresh) {
    getCoins();
    setBalanceRefresh(false);
  }
}, [balanceRefresh]);

  const [message, setMessage] = useState([]);

  const messageList = async () => {
    let hostname = window.location.hostname;
    hostname = hostname.replace(/^www\./, "");
    hostname = hostname.replace(/^ag\./, "");
    hostname = hostname || "sabaexch.com";

    const { status, data: response_users } = await apiGet(
      apiPath.messageList + "?domain=" + hostname
    );
    if (status === 200) {
      if (response_users.success) {
        setMessage(response_users.results);
      }
    }
  };

  useEffect(() => {
    messageList();
  }, []);

  return (
    <>
      {!isEmpty(user) && (
        <header id="headerMain1">
          <ul>
            <li className="li-tv_bet">
              {location?.pathname?.split("/")[1] == "match-details" &&
                isTv.id !== "" && (
                  <a
                    id="openTV"
                    className="a-open_tv ui-link"
                    href="#"
                    onClick={() => setIsTv({ ...isTv, status: true })}
                    style={{ display: isTv.id == "" ? "none" : "flex" }}
                  >
                    <img
                      src={
                        // import.meta.env.VITE_IMAGE_URL +
                        "/assets/images/home/transparent.gif"
                      }
                      alt={""}
                    />
                  </a>
                )}
              <a
                id="openBetsBtn"
                onClick={() => {
                  setOpenBetsToogle(true);
                  setRefreshCurrentBets(true);
                }}
                className="a-open_bets ui-link"
                href="javascript:void(0)"
              >
                <img
                  src={
                    // import.meta.env.VITE_IMAGE_URL +
                    "/assets/images/home/transparent.gif"
                  }
                  alt={""}
                />
                Bets
                {unMatchedBets?.length > 0 && (
                  <div>
                    <span class="slip-note"></span>
                    <span class="slip-note"></span>
                    <span class="slip-note"></span>
                  </div>
                )}
              </a>
            </li>

            <li className="main-wallet">
              <a
                id="multiWallet"
                href="javascript:void(0)"
                onClick={() => {
                  setWalletOpen(true);
                  mainBalanceClick();
                  mainEgBalanceClick();
                }}
                className={
                  walletOpen ? "a-wallet ui-link open" : "a-wallet ui-link"
                }
              >
                {refresh ? (
                  <p className="loading-bar" id="menuRefreshLoading">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                  </p>
                ) : (
                  <ul id="accountCredit">
                    <li>
                      <span style={{ marginRight: "3px" }}>Main</span>
                      <span id="betCredit">
                        PBU{"  "}
                        {balance.totalCoins?.toFixed(2) || 0.0}
                      </span>
                    </li>
                    <li>
                      <span style={{ marginRight: "3px" }}>Exposure</span>
                      <span
                        id="totalExposure"
                        style={{
                          color: balance.exposure > 0 && "white",
                          background: balance.exposure && "red",
                          padding: "2px",
                        }}
                      >
                        
                        {Number(balance.exposure)?.toFixed(2) }
                      </span>
                    </li>
                    <li className="nums">
                      +<span id="vendorQuantity">4</span>
                    </li>
                  </ul>
                )}
              </a>
              <a
                className="a-refresh ui-link"
                id="menuRefresh"
                href="javascript:void(0)"
                onClick={() => getCoins()}
                title="Refresh Main Wallet"
              >
                <img
                  src={
                    // import.meta.env.VITE_IMAGE_URL +
                    "/assets/images/home/transparent.gif"
                  }
                  alt={""}
                />
              </a>
            </li>

            <li>
              <a
                onClick={() => setSettingToogle(true)}
                className="a-setting ui-link"
                href="javascript:void(0)"
                title="Setting"
              >
                <img
                  src={
                    // import.meta.env.VITE_IMAGE_URL +
                    "/assets/images/home/transparent.gif"
                  }
                  alt={""}
                />
              </a>
            </li>
          </ul>
          <MessageBox />
          <WalletWrap
            user_coins={user_coins}
            recallCasinoAmount={recallCasinoAmount}
            recallEgtCasinoAmount={recallEgtCasinoAmount}
            casionData={casionData}
            egtCasionData={egtCasionData}
            loader={loader}
            loader1={loader1}
          />
        </header>
      )}
      {isEmpty(user) && (
        <header style={{ display: "flex"}}>
          <h1 className="top-logo"></h1>
          
          <Link to="/login" className="login-index ui-link">
            Login
          </Link>

          <Link to="/register" className="btn-signup ui-link">
            Register
          </Link>
          <div
            id="msgBox"
            className="message-wrap success to-open_bets"
            style={{ display: "none" }}
          >
            <div className="message">
              <h4 id="header">Bet Matched</h4>
              <p id="info">
                <span id="sideType" className="back">
                  Back
                </span>
                <strong id="selectionName">England</strong>{" "}
                <strong id="stake">$1,000</strong> at odds{" "}
                <strong id="odds">1.29</strong>
              </p>
            </div>
            <a id="close" className="close ui-link" href="#">
              Close
            </a>
          </div>
          <div id="multiWalletDiv" className="overlay" style={{ display: "none" }}>
            <div className="wallet-detail">
              <div className="wallet-detail-group">
                <dl className="wallet-detail-content">
                  <dt>Main Balance</dt>
                  <dd className="wallet-balance-num">
                    <span className="badge-currency" id="currency">
                      PBU
                    </span>
                    <span id="mainBalance">$ 0.00</span>
                  </dd>
                  <dd className="wallet-exposure">
                    Exposure <span id="mainExposure">$ 0.00</span>
                  </dd>
                </dl>
              </div>
              <div id="walletContent" className="wallet-detail-group"></div>
              <div
                id="walletTemp"
                className="wallet-detail-group"
                style={{ display: "none" }}
              >
                <dl id="tempDl" className="wallet-detail-content">
                  <dt id="vendorTitle">Housie Balance</dt>
                  <dd className="wallet-balance-num">
                    <span className="badge-currency" id="vendorCurrency">
                      PBU
                    </span>
                    <span id="vendorBalance">$ 0.00</span>
                  </dd>
                  <dd className="wallet-recall">
                    <button
                      className="btn-recall ui-btn ui-shadow ui-corner-all"
                      id="recall"
                    >
                      Recall
                    </button>
                  </dd>
                </dl>
                <dl id="recallAllDl" className="wallet-detail-content">
                  <dd class="align-R">
                    <button
                      className="btn-recall ui-btn ui-shadow ui-corner-all"
                      id="recallAll"
                    >
                      Recall All
                    </button>
                  </dd>
                </dl>
              </div>
              <div class="btn-box">
                <button
                  className="btn ui-btn ui-shadow ui-corner-all"
                  id="balanceClose"
                >
                  Close
                </button>
              </div>
            </div>
          </div>
        </header>
      )}
      {!isEmpty(user) && (
        <div
          id="headerMain2"
          className="marquee-box"
          style={{ display: "flex" }}
        >
          <h4>News</h4>
          <div
            class="marquee"
            onClick={() => {
              setAnnouncmentToogle(message.length > 0 ? true : false);
            }}
          >
            <marquee class="js-marquee-wrapper">
              <div class="js-marquee">
                {message?.length > 0 &&
                  message?.map((item) => {
                    return (
                      <a>
                        <span> {obj.msgDateFormat(item.msgDate)}</span>
                        {item.message}
                      </a>
                    );
                  })}
              </div>
            </marquee>
          </div>
        </div>
      )}
    </>
  );
};

export default Header;