import React, { useState, useRef, useEffect } from "react";
import ModalUi from "../../premitives/ModalUi";
import RecipientList from "../../premitives/RecipientList";
import { useDrag } from "react-dnd";
import AllWidgets from "../WidgetComponent/allWidgets";
import { widgets } from "../../utils/Utils";

function FieldsComponent({
  pdfUrl,
  dragSignature,
  signRef,
  handleDivClick,
  handleMouseLeave,
  isDragSign,
  themeColor,
  dragStamp,
  dragRef,
  isDragStamp,
  dragSignatureSS,
  dragStampSS,
  isDragSignatureSS,
  isSignYourself,
  addPositionOfSignature,
  signersdata,
  isSelectListId,
  setSignerObjId,
  setIsSelectId,
  setContractName,
  isSigners,
  dataTut,
  dataTut2,
  isMailSend,
  handleAddSigner,
  setUniqueId,
  setRoleName,
  handleDeleteUser,
  signerPos,
  handleRoleChange,
  handleOnBlur,
  title,
  initial
}) {
  const [isSignersModal, setIsSignersModal] = useState(false);

  const [{ isDragDropdown }, dropdown] = useDrag({
    type: "BOX",
    item: {
      type: "BOX",
      id: 5,
      text: "dropdown"
    },
    collect: (monitor) => ({
      isDragDropdown: !!monitor.isDragging()
    })
  });
  const [{ isDragCheck }, checkbox] = useDrag({
    type: "BOX",
    item: {
      type: "BOX",
      id: 6,
      text: "checkbox"
    },
    collect: (monitor) => ({
      isDragCheck: !!monitor.isDragging()
    })
  });
  const [{ isDragText }, text] = useDrag({
    type: "BOX",
    item: {
      type: "BOX",
      id: 7,
      text: "text"
    },
    collect: (monitor) => ({
      isDragText: !!monitor.isDragging()
    })
  });
  const [{ isDragInitial }, initials] = useDrag({
    type: "BOX",
    item: {
      type: "BOX",
      id: 8,
      text: "initials"
    },
    collect: (monitor) => ({
      isDragInitial: !!monitor.isDragging()
    })
  });
  const [{ isDragName }, name] = useDrag({
    type: "BOX",
    item: {
      type: "BOX",
      id: 9,
      text: "name"
    },
    collect: (monitor) => ({
      isDragName: !!monitor.isDragging()
    })
  });
  const [{ isDragCompany }, company] = useDrag({
    type: "BOX",
    item: {
      type: "BOX",
      id: 10,
      text: "company"
    },
    collect: (monitor) => ({
      isDragCompany: !!monitor.isDragging()
    })
  });
  const [{ isDragJobtitle }, jobTitle] = useDrag({
    type: "BOX",
    item: {
      type: "BOX",
      id: 11,
      text: "job title"
    },
    collect: (monitor) => ({
      isDragJobtitle: !!monitor.isDragging()
    })
  });
  const [{ isDragDate }, date] = useDrag({
    type: "BOX",
    item: {
      type: "BOX",
      id: 11,
      text: "date"
    },
    collect: (monitor) => ({
      isDragDate: !!monitor.isDragging()
    })
  });

  const isMobile = window.innerWidth < 767;
  const scrollContainerRef = useRef(null);
  const [widget, setWidget] = useState([]);

  const color = [
    "#93a3db",
    "#e6c3db",
    "#c0e3bc",
    "#bce3db",
    "#b8ccdb",
    "#ceb8db",
    "#ffccff",
    "#99ffcc",
    "#cc99ff",
    "#ffcc99",
    "#66ccff",
    "#ffffcc"
  ];
  const handleModal = () => {
    setIsSignersModal(!isSignersModal);
  };

  useEffect(() => {
    const widgetRef = [
      dragSignature,
      dragStamp,
      dropdown,
      checkbox,
      text,
      initials,
      name,
      company,
      jobTitle,
      date
    ];
    const getWidgetArray = widgets;
    const newUpdateSigner = getWidgetArray.map((obj, ind) => {
      return { ...obj, ref: widgetRef[ind] };
    });
    const removeInitial = newUpdateSigner.filter(
      (widgetData) => widgetData.type !== "initials"
    );

    setWidget(initial ? newUpdateSigner : removeInitial);
  }, []);

  const filterWidgets = widget.filter((data) => data.type !== "dropdown");
  const updateWidgets = isSignYourself ? filterWidgets : widget;

  const handleScroll = (scrollOffset) => {
    if (scrollContainerRef.current) {
      scrollContainerRef.current.scrollLeft += scrollOffset;
    }
  };

  return (
    <>
      {isMobile ? (
        !isMailSend && (
          <div
            data-tut={dataTut}
            id="navbar"
            className="stickyfooter"
            style={{ width: window.innerWidth + "px" }}
          >
            {isSigners && (
              <div
                data-tut={dataTut}
                style={{
                  background: isSelectListId
                    ? color[isSelectListId % color.length]
                    : color[0],
                  padding: "10px 20px",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center"
                }}
                onClick={() => {
                  // if (signersdata?.length) {
                  handleModal();
                  // }
                }}
              >
                <span
                  style={{
                    fontSize: "13px",
                    fontWeight: "700",
                    textAlign: "center"
                  }}
                >
                  {title ? title : "Recipient"}
                </span>
                <span
                  style={{
                    fontSize: "13px",
                    fontWeight: "700",
                    display: "flex",
                    alignItems: "center"
                  }}
                >
                  {signersdata[isSelectListId]?.Role && (
                    <div>
                      {signersdata[isSelectListId]?.Name ? (
                        <>
                          :{" "}
                          {signersdata[isSelectListId]?.Name?.length > 12
                            ? `${signersdata[isSelectListId].Name.slice(
                                0,
                                12
                              )}...`
                            : signersdata[isSelectListId]?.Name}
                        </>
                      ) : (
                        <>
                          :{" "}
                          {signersdata[isSelectListId]?.Role?.length > 12
                            ? `${signersdata[isSelectListId].Role.slice(
                                0,
                                12
                              )}...`
                            : signersdata[isSelectListId]?.Role}
                        </>
                      )}
                    </div>
                  )}
                  <div style={{ marginLeft: 6, fontSize: 16 }}>
                    <i className="fa-solid fa-angle-down"></i>
                  </div>
                </span>
              </div>
            )}
            {handleAddSigner && (
              <div
                data-tut="reactourAddbtn"
                style={{
                  margin: "5px 0 5px 0",
                  backgroundColor: themeColor(),
                  color: "white"
                }}
                className="addSignerBtn"
                onClick={() => handleAddSigner()}
              >
                <i className="fa-solid fa-plus"></i>
                <span style={{ marginLeft: 2 }}>Add role</span>
              </div>
            )}
            {/* <div
              data-tut={dataTut2}
              className="signLayoutContainer2"
              style={{ backgroundColor: themeColor() }}
            >
              <div
                onClick={() => addPositionOfSignature("onclick", false)}
                ref={(element) => {
                  dragSignatureSS(element);
                  if (element) {
                    signRef.current = element;
                    // const height = signRef && signRef.current.offsetHeight;
                    // const width = signRef && signRef.current.offsetWidth;
                  }
                }}
                style={{
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  userSelect: "none",
                  opacity: isDragSignatureSS ? 0.5 : 1,
                  backgroundImage: `url(${sign})`,
                  backgroundSize: "70% 70%",
                  backgroundRepeat: "no-repeat",
                  backgroundPosition: "center center",
                  paddingBottom: "2.2rem"
                }}
              >
                <span
                  style={{
                    color: "white",
                    fontSize: "12px",
                    position: "relative",
                    top: "2.6rem"
                  }}
                >
                  Signature
                </span>
              </div>
              <div
                onClick={() => addPositionOfSignature("onclick", true)}
                ref={(element) => {
                  dragStampSS(element);
                  dragRef.current = element;
                }}
                onMouseMove={handleDivClick}
                onMouseDown={handleMouseLeave}
                style={{
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  userSelect: "none",
                  backgroundImage: `url(${stamp})`,
                  backgroundSize: "32px 33px",
                  backgroundRepeat: "no-repeat",
                  backgroundPosition: "center center",
                  paddingBottom: "2.2rem"
                }}
              >
                <span
                  style={{
                    color: "white",
                    fontSize: "12px",
                    position: "relative",
                    top: "2.6rem"
                  }}
                >
                  Stamp
                </span>
              </div>
            </div> */}
            <div
              ref={scrollContainerRef}
              style={{
                overflowX: "scroll",
                whiteSpace: "nowrap",
                padding: "10px",
                background: "white",
                borderTop: `2px solid ${themeColor()}`
              }}
            >
              <i
                style={{
                  color: "rgb(140 142 149)",
                  position: "fixed",
                  left: "1%",
                  bottom: "3%",
                  fontSize: "23px"
                }}
                onClick={() => handleScroll(-100)}
                className="fa-solid fa-circle-chevron-left"
              ></i>
              <div style={{ display: "flex" }}>
                {/* {updateWidgets.map((item, ind) => {
                  return (
                    <div
                      key={ind}
                      ref={(element) => {
                        item.ref(element);
                        if (element) {
                          signRef.current = element;
                        }
                      }}
                      className={signStyle}
                      onMouseMove={handleDivClick}
                      onMouseDown={handleMouseLeave}
                      style={{
                        opacity: isDragSign ? 0.5 : 1,
                        boxShadow:
                          "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)",
                        marginLeft: "5px"
                      }}
                    >
                      <div
                        style={{
                          display: "flex",
                          alignItems: "center",
                          marginLeft: "5px"
                        }}
                      >
                        <i
                          class="fa-sharp fa-solid fa-grip-vertical"
                          style={{ color: "#908d8d", fontSize: "13px" }}
                        ></i>
                        <span
                          style={{
                            fontWeight: "400",
                            fontSize: "15px",
                            // padding: "3px 20px 0px 20px",
                            color: "black",
                            marginLeft: "5px"
                          }}
                        >
                          {item.type}
                        </span>
                      </div>
                      <div
                        style={{
                          backgroundColor: themeColor(),
                          padding: "0 5px",
                          display: "flex",
                          alignItems: "center"
                        }}
                      >
                        <i
                          style={{ color: "white", fontSize: item.iconSize }}
                          className={item.icon}
                        ></i>
                      </div>
                    </div>
                  );
                })} */}
                <AllWidgets
                  updateWidgets={updateWidgets}
                  handleDivClick={handleDivClick}
                  handleMouseLeave={handleMouseLeave}
                  signRef={signRef}
                  marginLeft={5}
                  addPositionOfSignature={addPositionOfSignature}
                />
              </div>
              <i
                style={{
                  color: "rgb(140 142 149)",
                  position: "fixed",
                  left: "93%",
                  bottom: "3%",
                  fontSize: "23px"
                }}
                onClick={() => handleScroll(100)}
                className="fa-solid fa-circle-chevron-right"
              ></i>
            </div>
          </div>
        )
      ) : (
        <div data-tut={dataTut} className="signerComponent">
          <div
            style={{
              background: themeColor(),
              padding: "5px"
            }}
          >
            <span className="signedStyle">Fields</span>
          </div>

          <div className="signLayoutContainer1">
            {/* {pdfUrl ? (
              <>
                <button className={signStyle} disabled={true}>
                  <span
                    style={{
                      fontWeight: "400",
                      fontSize: "15px",
                      padding: "3px 20px 0px 20px",
                      color: "#bfbfbf"
                    }}
                  >
                    Signature
                  </span>

                  <img
                    alt="sign img"
                    style={{
                      width: "30px",
                      height: "28px",
                      background: "#d3edeb"
                    }}
                    src={sign}
                  />
                </button>
                <button className={signStyle} disabled={true}>
                  <span
                    style={{
                      fontWeight: "400",
                      fontSize: "15px",
                      padding: "3px 0px 0px 35px",
                      color: "#bfbfbf"
                    }}
                  >
                    Stamp
                  </span>

                  <img
                    alt="stamp img"
                    style={{
                      width: "25px",
                      height: "28px",
                      background: "#d3edeb"
                    }}
                    src={stamp}
                  />
                </button>
              </>
            ) : (
              <>
                <div
                  ref={(element) => {
                    dragSignature(element);
                    if (element) {
                      signRef.current = element;
                    }
                  }}
                  className={signStyle}
                  onMouseMove={handleDivClick}
                  onMouseDown={handleMouseLeave}
                  style={{
                    opacity: isDragSign ? 0.5 : 1,
                    boxShadow:
                      "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)"
                  }}
                >
                  <span
                    style={{
                      fontWeight: "400",
                      fontSize: "15px",
                      padding: "3px 20px 0px 20px",
                      color: "black"
                    }}
                  >
                    Signature
                  </span>
                  <img
                    alt="sign img"
                    style={{
                      width: "30px",
                      height: "28px",
                      background: themeColor(),
                    }}
                    src={sign}
                  />
                  
                </div>
                <div
                  ref={(element) => {
                    dragStamp(element);
                    dragRef.current = element;
                    if (isDragStamp) {
                      
                    }
                  }}
                  className={!pdfUrl ? signStyle : "disableSign"}
                  disabled={pdfUrl && true}
                  onMouseMove={handleDivClick}
                  onMouseDown={handleMouseLeave}
                  style={{
                    opacity: isDragStamp ? 0.5 : 1,
                    boxShadow:
                      "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)"
                  }}
                >
                  <span
                    style={{
                      fontWeight: "400",
                      fontSize: "15px",
                      padding: "3px 0px 0px 35px",
                      color: !pdfUrl ? "black" : "#bfbfbf"
                    }}
                  >
                    Stamp
                  </span>

                  <img
                    alt="stamp img"
                    style={{
                      width: "25px",
                      height: "28px",
                      background: themeColor()
                    }}
                    src={stamp}
                  />
                </div>
              </>
            )} */}
            {/* {updateWidgets.map((item, ind) => {
              return (
                <div
                  key={ind}
                  ref={(element) => {
                    item.ref(element);
                    if (element) {
                      signRef.current = element;
                    }
                  }}
                  className={signStyle}
                  onMouseMove={handleDivClick}
                  onMouseDown={handleMouseLeave}
                  style={{
                    opacity: isDragSign ? 0.5 : 1,
                    boxShadow:
                      "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)"
                  }}
                >
                  <div
                    style={{
                      display: "flex",
                      alignItems: "center",
                      marginLeft: "5px"
                    }}
                  >
                    <i
                      class="fa-sharp fa-solid fa-grip-vertical"
                      style={{ color: "#908d8d", fontSize: "13px" }}
                    ></i>
                    <span
                      style={{
                        fontWeight: "400",
                        fontSize: "15px",
                        // padding: "3px 20px 0px 20px",
                        color: "black",
                        marginLeft: "5px"
                      }}
                    >
                      {item.type}
                    </span>
                  </div>
                  <div
                    style={{
                      backgroundColor: themeColor(),
                      padding: "0 5px",
                      display: "flex",
                      alignItems: "center"
                    }}
                  >
                    <i
                      style={{ color: "white", fontSize: item.iconSize }}
                      className={item.icon}
                    ></i>
                  </div>
                </div>
              );
            })} */}
            <AllWidgets
              updateWidgets={updateWidgets}
              handleDivClick={handleDivClick}
              handleMouseLeave={handleMouseLeave}
              signRef={signRef}
            />
          </div>
        </div>
      )}
      {isSignersModal && (
        <ModalUi
          title={"Recipients"}
          isOpen={isSignersModal}
          handleClose={handleModal}
        >
          {signersdata.length > 0 ? (
            <RecipientList
              signerPos={signerPos}
              signersdata={signersdata}
              isSelectListId={isSelectListId}
              setSignerObjId={setSignerObjId}
              setIsSelectId={setIsSelectId}
              setContractName={setContractName}
              setUniqueId={setUniqueId}
              setRoleName={setRoleName}
              handleDeleteUser={handleDeleteUser}
              handleRoleChange={handleRoleChange}
              handleOnBlur={handleOnBlur}
              handleModal={handleModal}
            />
          ) : (
            <div
              style={{
                padding: 20,
                fontSize: 15,
                fontWeight: "500",
                textAlign: "center"
              }}
            >
              Please add Recipient
            </div>
          )}
        </ModalUi>
      )}
    </>
  );
}

export default FieldsComponent;