import React, { lazy, Suspense, useRef, useState } from 'react'
import Layout from '../Partials/Layout'
import MediaLayout from '../Partials/MediaLayout'
import CustomBreadcrumb from '../Breadcrumb/CustomBreadcrumb'
import ActiveJobMessageMedia from '../MyActiveJobs/ActiveJobMessageMedia'
import LoadingSpinner from '../Spinners/LoadingSpinner'
import usersService from '../../services/UsersService'
import { useNavigate } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { useReactToPrint } from 'react-to-print'

const Iframe = lazy(() => import("../Iframe/Iframe"));

export default function FamGames(props) {

  const ApiCall = new usersService();
  const navigate = useNavigate();

  const { userDetails } = useSelector((state) => state.userDetails);

  const [messageToSend, setMessageToSend] = useState(""); // State to hold the value of message to be sent

  const [filesToSend, setFilesToSend] = useState([]); // State to hold the value of files to be sent

  const [tab, setTab] = useState("message");

  const [requestStatus, setRequestStatus] = useState({
    loading: false,
    status: false,
    message: "",
  });

  // let [popUp, setPopUp] = useState(false); // STATE FOR POPOUT MODAL

  const printRef = useRef();
  // to handle printing
  const handlePrint = useReactToPrint({
    content: () => printRef.current,
  });

  // FUNCTION TO HANDLE POPOUT
  const popUpHandler = () => {
    // setPopUp((prev) => !prev);
  };

  // FUNCTION TO HANDLE MESSAGE CHANGE
  const handleMessageChange = ({ target: { value } }) => {
    setMessageToSend(value);
  };

  // FUNCTION TO HANDLE FILE UPlOAD CHANGE
  const handleFileChange = ({ target: { files } }) => {
    setRequestStatus({ loading: false, status: false, message: "" }); // State to determine error state

    if (!files[0]) {
      // IF NO FILE SELECTED RETURN
      return;
    }
    if (files[0].size > Number(process.env.REACT_APP_MAX_FILE_SIZE)) {
      setRequestStatus({
        loading: false,
        status: false,
        message: "File must be <= 1mb",
      });
      setTimeout(() => {
        setRequestStatus({ loading: false, status: false, message: "" });
      }, 5000);
      return;
    }
    if (filesToSend.length >= Number(process.env.REACT_APP_TOTAL_NUM_FILE)) {
      setRequestStatus({
        loading: false,
        status: false,
        message: `Total number of attachment is ${Number(
          process.env.REACT_APP_TOTAL_NUM_FILE
        )}`,
      });
      setTimeout(() => {
        setRequestStatus({ loading: false, status: false, message: "" });
      }, 5000);
      return;
    }
    // INCLUDE FILE IF NO ERROR
    setFilesToSend((prev) => [...prev, files[0]]);
  };

  // FUNCTION TO CLEAR ALL TYPED MESSAGE OR FILES
  const handleClearAll = ({ target: { name } }) => {
    if (tab == "message") {
      setMessageToSend("");
    } else if (tab == "files") {
      setFilesToSend([]);
    } else {
      return;
    }
  };

  // FUNCTION TO REMOVE AND IMAGE
  const handleRemoveImage = (imageToDelete) => {
    setFilesToSend((prev) =>
      prev.filter((item) => item.name != imageToDelete.name)
    );
  };

  // FUNCTION TO SEND TASK MESSAGE
  const sendTaskMessage = () => {
    let reqData = {
      message: messageToSend,
      msg_type: "TEXT",
      contract: props.details.contract,
    };
    if (!reqData.message) {
      setRequestStatus({
        loading: false,
        status: false,
        message: "Message is empty",
      });
      return setTimeout(() => {
        setRequestStatus({ loading: false, status: false, message: "" });
      }, 5000);
    }
    setRequestStatus({ loading: true, status: false, message: "" });
    ApiCall.sendTaskMessage(reqData)
      .then((res) => {
        if (res.status != 200 || res.data.internal_return < 0) {
          setRequestStatus({
            loading: false,
            status: false,
            message: "Message could not be sent, try again later",
          });
          return;
        }
        setRequestStatus({
          loading: false,
          status: true,
          message: "Message Sent Successfully",
        });
        // function to trigger socket to emit 'send_message'
        // sendMessage(messageToSend, `${props.details.contract}-${props.details.contract_uid}`)
        
        props.reloadActiveJobList((prev) => !prev); // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
        setMessageToSend(""); // SENDS MESSAGE TO SEND BACK TO EMPTY STRINGS
      })
      .catch((error) => {
        setRequestStatus({
          loading: false,
          status: false,
          message: "Opps! something went wrong",
        });
      })
      .finally(() => {
        setTimeout(() => {
          setRequestStatus({ loading: false, status: false, message: "" });
        }, 5000);
      });
  };

  // FUNCTION TO SEND FILES
  const sendFile = async () => {
    setRequestStatus({ loading: true, status: false, message: "" });

    if (!filesToSend.length) {
      // checks if file to send is empty
      setRequestStatus({
        loading: false,
        status: false,
        message: "No File(s) selected",
      });
      return setTimeout(() => {
        setRequestStatus({ loading: false, status: false, message: "" });
      }, 5000);
    }

    for (let i = 0; i <= filesToSend.length - 1; i++) {
      // Loops through files to send array and trigger upload API call

      const fileToBase64 = async () => {
        // Converts file data to base64 string
        // try {
        //   const base64String = await convertFileToBase64(filesToSend[i]);
        //   return base64String;
        // } catch (error) {
        //   return false;
        // }
      };

      // if(await !fileToBase64()){
      //   return
      // }

      let reqData = {
        file_name: filesToSend[i].name,
        file_size: filesToSend[i].size,
        file_type: "image/png",
        file_data: await fileToBase64(),
        msg_type: "FILE",
        contract: props.details.contract,
      };

      ApiCall.sendFiles(reqData)
        .then((res) => {
          // if(res.status != 200 || res.data.internal_return < 0){
          //   setRequestStatus({loading: false, status: false, message: 'Files(s) could not be sent, try again later'})
          //   return
          // }
          // setRequestStatus({loading: false, status: true, message: 'File(s) Uploaded Successfully'})
          // props.reloadActiveJobList(prev => !prev) // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
          // setFilesToSend([]) // SETS FILES TO SEND TO SEND BACK TO EMPTY ARRAY
        })
        .catch((error) => {
          // setRequestStatus({loading: false, status: false, message: 'Opps! something went wrong'})
        })
        .finally(() => {
          if (i == filesToSend.length - 1) {
            setRequestStatus({
              loading: false,
              status: true,
              message: "File(s) Uploaded Successfully",
            });
            setFilesToSend([]); // SETS FILES TO SEND TO SEND BACK TO EMPTY ARRAY
            props.reloadActiveJobList((prev) => !prev); // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
            setTimeout(() => {
              setRequestStatus({ loading: false, status: false, message: "" });
            }, 5000);
          }
        });
    }
  };


  return (
    <MediaLayout
      backpath={'/'}
      title={'Games'}
    >
        {/* <div className='mb-4'>
          <CustomBreadcrumb 
            title='Games and Interest' 
            breadcrumb = {
              [
                { link: "/", title: "Home" },
                  { link: "/work-in-progress", title: "Games and Interest", active: true},
              ]
            }
          />
        </div> */}
        <div className="my-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
            <div className="w-full mb-4 border-b pb-4 lg:pb-0 lg:mb-0 lg:border-b-0">
            
              <div className="mb-4 w-full h-screen max-h-[650px]">
                <Suspense fallback={<Fallback />}>
                  <Iframe 
                    src={process.env.REACT_APP_FAM_GAME_LINK}
                    title='Games'
                  />
                </Suspense>
              </div>

              <div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md md:flex md:justify-between gap-8">
                  <div className="w-full flex flex-col justify-between">
                      <div className="w-full h-30">
                        <div className='w-full h-full flex justify-center items-center text-5xl'>COMING SOON</div>
                          {/* <p className="w-full text-base text-right text-sky-blue">
                          {props?.details && props.details.job_to}
                          </p>
                          <div className="text-base tracking-wide">
                              <p className="font-semibold text-black dark:text-white tracking-wider">
                                  Description:{" "}
                              </p>
                              <p className="p-2 ml-8 border-b border-sky-blue">
                                  {props?.details && props.details.description}
                              </p>
                          </div>
                          <div className="mt-6 w-full lg:flex gap-8">
                              <div className="w-full text-base tracking-wide">
                                  <p className="font-semibold text-black dark:text-white tracking-wider">
                                      Delivery Detail:{" "}
                                  </p>
                                  <p className="p-2 ml-8">
                                      {props?.details && props.details.job_description}
                                  </p>
                              </div>
                              <div className="my-2 lg:my-0">
                                  <IndexJobActions details={props.details} />
                              </div>
                          </div> */}
                      </div>
                  </div>

                  {/* job details */}
                  <div className="w-full md:w-[200px] h-20">
                      {/* <p className="text-base text-sky-blue">Delivery Detail</p> */}
                      {/* {passDue ? (
                          <div className="my-1">
                              <p className="text-base text-slate-700">
                                  <span className="font-semibold">Due: </span>
                                  {props?.details && props.details.delivery_date.split(" ")[0]}
                              </p>
                              {props?.delivery_date && (
                                  <p className="py-2 text-base text-slate-700">
                                  {props.details.delivery_date.split(" ")[1]}
                                  </p>
                              )}
                          </div>
                      ) : (
                          <div className="my-1 flex items-start gap-3">
                              <p className="font-semibold">Due: </p>
                              <div className="flex flex-col justify-between">
                                  <p className="text-base text-slate-700 tracking-wide">
                                  <CountDown
                                      lastDate={props?.details && props.details.delivery_date}
                                  />
                                  </p>
                                  <div className="text-base text-slate-700 tracking-wide flex gap-[5px]">
                                  <span>Hrs</span>
                                  <span>Min</span>
                                  <span>Sec</span>
                                  </div>
                              </div>
                          </div>
                      )} */}

                      {/* <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
                          <span className="font-semibold text-black dark:text-white">
                          Reward:{" "}
                          </span>
                          <span className="">{thePrice}</span>
                      </div>

                      <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
                          <span className="font-semibold text-black dark:text-white">
                          Duration:{" "}
                          </span>
                          <span className="">
                          {props.details?.timeline_days && props.details.timeline_days}{" "}
                          day(s)
                          </span>
                      </div> */}
                  </div>
                  {/* end of job details */}
              </div>
            </div>

            <div className="w-full lg:w-1/6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4">
                {/* TEXTAREA SECTION */}
                <div className="w-full mb-3 hidden">
                    <div className="w-full">
                        <div className="pl-7 flex items-center gap-3">
                            <button
                                name="message"
                                onClick={(e) => setTab(e.target.name)}
                                className={`px-4 xl:px-1 xxl:px-4 text-sm py-1 rounded-t-2xl ${
                                tab == "message"
                                    ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
                                    : "bg-white text-[#000] border-t-[2px]"
                                }`}
                            >
                                Send Message
                            </button>
                            <button
                                name="files"
                                onClick={(e) => setTab(e.target.name)}
                                className={`px-4 xl:px-1 xxl:px-4 text-sm py-1 rounded-t-2xl ${
                                tab == "files"
                                    ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
                                    : "bg-white text-[#000] border-t-[2px]"
                                }`}
                            >
                                Send Files
                            </button>
                        </div>
                        {tab == "message" ? (
                        <textarea
                            className="p-4 w-full h-[150px] text-base text-slate-600 dark:text-white bg-white dark:bg-black border-4 border-[#4687ba] outline-none"
                            // rows="10"
                            style={{ resize: "none" }}
                            name="message"
                            onChange={handleMessageChange}
                            value={messageToSend}
                            autoFocus
                        />
                        ) : (
                        <div className="p-4 mb-2 h-[150px] text-base text-slate-600 border-4 border-[#4687ba]">
                            <div className="files flex">
                            <label
                                htmlFor="file"
                                className="custom-btn btn-gradient text-base text-white"
                            >
                                Select Files to Upload
                            </label>
                            <input
                                type="file"
                                id="file"
                                accept="image/*"
                                style={{ display: "none" }}
                                onChange={handleFileChange}
                            />
                            </div>
                            <div className="selected_file my-2 overflow-y-auto">
                            {filesToSend.length > 0 &&
                                filesToSend.map((item, index) => (
                                <p key={index} className="flex items-center space-x-2">
                                    <span>{item.name}</span>
                                    <button
                                    name="remove"
                                    onClick={() => handleRemoveImage(item)}
                                    className="px-2 flex justify-center items-center rounded-full border border-red-500 text-red-500"
                                    >
                                    x
                                    </button>
                                </p>
                                ))}
                            </div>
                        </div>
                        )}
                    </div>

                    {/* ERROR DISPLAY AND SUBMIT BUTTON */}
                    <div className="w-full">
                        {/* error or success display */}
                        {requestStatus.message != "" &&
                        (!requestStatus.status ? (
                            <div
                            className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
                            >
                            {requestStatus.message}
                            </div>
                        ) : (
                            requestStatus.status && (
                            <div
                                className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
                            >
                                {requestStatus.message}
                            </div>
                            )
                        ))}
                    </div>
                    {/* End of error or success display */}

                    {/* Buttons Sections */}
                    <div className="py-1 grid grid-cols-1 xxs:grid-cols-3">
                        <div className="w-full col-span-3 col-start-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center gap-4">
                            <button
                                type="button"
                                onClick={handleClearAll}
                                className="custom-btn border-gradient"
                            >
                                <span className="text-gradient">Clear</span>
                            </button>
                            {tab == "files" ? (
                                <button
                                onClick={sendFile}
                                type="button"
                                className="custom-btn btn-gradient text-white"
                                >
                                {requestStatus.loading ? (
                                    <LoadingSpinner size="6" color="sky-blue" />
                                ) : (
                                    <>
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        viewBox="0 0 24 24"
                                        width="20"
                                        height="20"
                                        fill="white"
                                    >
                                        <path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z" />
                                    </svg>

                                    <span className="text-white">Upload Files</span>
                                    </>
                                )}
                                </button>
                            ) : (
                                <button
                                onClick={sendTaskMessage}
                                type="button"
                                className="custom-btn btn-gradient text-white"
                                >
                                {requestStatus.loading ? (
                                    <LoadingSpinner size="6" color="sky-blue" />
                                ) : (
                                    <span className="text-white">Send</span>
                                )}
                                </button>
                            )}
                        </div>
                    </div>
                    {/* end of Buttons Sections  */}
                </div>
                {/* END OF TEXTAREA */}

                {/* MESSAGE SECTION */}
                <div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md h-[400px]">
                  <div className='w-full h-full flex justify-center items-center text-5xl'>COMING SOON</div>
                    {/* <div className="flex justify-between items-center gap-5">
                        <p className="w-full text-lg font-bold text-dark-gray dark:text-white tracking-wide flex items-center gap-2 justify-between"> 
                        <span>Message</span>
                        <button
                        type="button"
                        onClick={popUpHandler}
                        className="text-[12px] tracking-wider text-gray-400 dark:text-slate-400"
                        >
                        View all
                        </button>
                        </p>
                    </div>
                    {props.activeJobMesList.loading ? (
                        <LoadingSpinner size="16" color="sky-blue" />
                    ) : (
                        <ActiveJobMessageMedia activeJobMesList={props.activeJobMesList} />
                    )} */}
                </div>
                {/* END OF MESSAGE */}
            </div>
        </div>
    </MediaLayout>
  )
}



let Fallback = () => {
  return (
    <div className="w-full flex justify-center items-center">
      <LoadingSpinner size='20' color='skyblue' height='h-screen max-h-[600px]' />
    </div>
  )
}