import { MdFullscreen } from "react-icons/md";
import useFetch from "../../../hooks/useFetch";
import request from "../../../utils/request";
import { Button, Card, CardBody, Modal } from "react-bootstrap";
import { FaArrowRightFromBracket } from "react-icons/fa6";
import { useContext, useEffect, useState } from "react";
import { UserContext } from "../../../Context/UserContextAPI";
import { socket } from "./socket";
import toast from "react-hot-toast";
import SpecificTokenCalling from "./SpecificTokenCalling";

const ServiceTokenCalling = () => {
  const { currentUser } = useContext(UserContext);
  const { data: settingsData } = useFetch(() => request.getAll("settings"));
  const settingData = settingsData[0];

  const [specificTokenModal, setSpecificTokenModal] = useState(false);

  // counter data

  const { data: counterData, setRefresh: refreshCounter } = useFetch(
    () =>
      request.getOne(
        "queue-management/counter-list/single",
        currentUser?.counterId
      )
    // currentUser?.counterId,
  );
  // console.log(counterData);

  const [refresh, setRefresh] = useState(false);

  const [tokenData, setTokenData] = useState(null);

  // current calling

  // const { data: tokenData } = useFetch(
  //   () =>
  //     request.getOne(
  //       "queue-management/service-list/token/current-calling",
  //       currentUser?.counterId,
  //     ),
  //   currentUser?.counterId,
  // );

  useEffect(() => {
    (async () => {
      try {
        const res = await request.getOne(
          "queue-management/service-list/token/current-calling",
          currentUser?.counterId
        );
        if (res?.status === "OK") {
          setTokenData(res.data);
        }
      } catch (err) {
        // console.log(err);
      }
    })();
  }, [currentUser?.counterId, refresh]);

  const [isConnected, setIsConnected] = useState(socket.connected);

  useEffect(() => {
    function onConnect() {
      setIsConnected(true);
    }

    function onDisconnect() {
      setIsConnected(false);
    }

    socket.on("newToken", (data) => {
      console.log("refresh");
      setRefresh((prev) => !prev);
    });

    socket.on("connect", onConnect);
    socket.on("disconnect", onDisconnect);

    return () => {
      socket.off("connect", onConnect);
      socket.off("disconnect", onDisconnect);
      socket.off("newToken");
    };
  }, []);

  const handleCallNext = (token) => {
    socket.emit(
      "callNextToken",
      { tokenId: token?.id, counterId: currentUser?.counterId },
      (response) => {
        console.log("Server Response:", response);
        if (response.success) {
          console.log(response);
          console.log("Token called successfully");
          setTokenData(response.data);
        } else {
          console.error("Error:", response.error);
          toast.error(response.error);
        }
      }
    );
  };

  const recallToken = async (token) => {
    socket.emit(
      "recallToken",
      { tokenId: token?.id, counterId: currentUser?.counterId },
      (response) => {
        console.log("Server Response:", response);
        if (response.success) {
          console.log(response);
          console.log("Token called successfully");
          // setTokenData(response.data);
          // playAudio(response?.data?.token, response?.data?.counter);
        } else {
          console.error("Error:", response.error);
          toast.error(response.error);
        }
      }
    );
  };

  const onBreak = () => {
    return request.updateOne(
      "queue-management/counter-list/onBreak",
      currentUser?.counterId,
      {
        isOnBreak: counterData.isOnBreak ? false : true,
      },
      () => {
        refreshCounter((previous) => !previous);
        socket.emit("onBreak");
      }
    );
  };

  return (
    <div className="">
      <div className=" ">
        <div className="text-center ">
          <h3 className="fs-3">Current Token</h3>

          <h2 className="fs-2 text-danger">
            {tokenData?.currentToken?.token || "No Current Token"}
          </h2>
          {tokenData?.currentToken && (
            <>
              <div className="d-flex flex-column gap-3 justify-content-center align-items-center ">
                <Button
                  style={{ width: "200px", height: "50px" }}
                  variant="cyan"
                  className="fs-3"
                  onClick={() => recallToken(tokenData?.currentToken)}
                  // onClick={() => playAudio(1, 2)}
                >
                  Recall
                  <FaArrowRightFromBracket size={20} className="ms-2" />
                </Button>

                <Button
                  style={{ width: "200px", height: "50px" }}
                  variant="cyan"
                  className="fs-3"
                  onClick={() => handleCallNext(tokenData?.currentToken)}
                >
                  Call Next
                  <FaArrowRightFromBracket size={20} className="ms-2" />
                </Button>

                <Button
                  style={{ width: "200px", height: "50px" }}
                  variant="cyan"
                  className="fs-3"
                  onClick={onBreak}
                >
                  {counterData?.isOnBreak ? "In Break" : "Take Break"}
                  <FaArrowRightFromBracket size={20} className="ms-2" />
                </Button>

                <Button
                  style={{ width: "200px", height: "50px" }}
                  variant="cyan"
                  className="fs-3"
                  onClick={() => setSpecificTokenModal(true)}
                >
                  Previous Token
                </Button>
              </div>
              <div className="mt-4 d-flex gap-2 justify-content-center align-items-center">
                <p className="fs-5">
                  Service : {tokenData?.currentToken?.service?.name},
                </p>

                <p className="fs-5">
                  Counter : {tokenData?.currentToken?.counter?.name}
                </p>
              </div>
            </>
          )}
        </div>

        {tokenData?.nextToken && (
          <div>
            <div>
              <div className="text-center">
                <h4 className="fs-2">
                  Next :{" "}
                  <span className="text-danger fs-1">
                    {" "}
                    {tokenData?.nextToken?.token}
                  </span>{" "}
                </h4>

                <h3 className="fs-4">
                  service : {tokenData?.nextToken?.service?.name}
                </h3>
              </div>
            </div>
          </div>
        )}
      </div>
      {specificTokenModal && (
        <Modal
          show={specificTokenModal}
          onHide={() => setSpecificTokenModal(false)}
          centered
          size="lg"
          scrollable
        >
          <Modal.Header closeButton>
            <Modal.Title>Call Specific Token</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <SpecificTokenCalling counterId={currentUser?.counterId} />
          </Modal.Body>
        </Modal>
      )}
    </div>
  );
};
export default ServiceTokenCalling;