OpenSign/microfrontends/SignDocuments/src/Component/component/PlaceholderCopy.js

import React, { useState } from "react";
import Modal from "react-bootstrap/Modal";
import ModalHeader from "react-bootstrap/esm/ModalHeader";
import { themeColor } from "../../utils/ThemeColor/backColor";

function PlaceholderCopy(props) {
  const copyType = ["All pages", "All pages but last", "All pages but first"];
  const [selectCopyType, setSelectCopyType] = useState("");

  //get RandomKey Id
  const randomKey = () => {
    const randomId = Math.floor(1000 + Math.random() * 9000);
    return randomId;
  };

  //function for get copy placeholder position
  const getCopyPlaceholderPosition = (
    type,
    rest,
    newPageNumber,
    existPlaceholderPosition
  ) => {
    let obj;

    const filterPosition =
      existPlaceholderPosition &&
      existPlaceholderPosition.filter(
        (data) => data.xPosition !== rest.xPosition
      );
    //copy all page placeholder at requested position except first page
    if (newPageNumber === 1 && type === "first") {
      if (filterPosition && filterPosition.length > 0) {
        return (obj = {
          pageNumber: newPageNumber,
          pos: [...filterPosition]
        });
      }
    }
    //copy all page placeholder at requested position except  last page
    else if (newPageNumber === props.allPages && type === "last") {
      if (existPlaceholderPosition) {
        return (obj = {
          pageNumber: newPageNumber,
          pos: [...filterPosition]
        });
      }
    }
    //copy all page placeholder at requested position with existing placeholder position
    else if (existPlaceholderPosition) {
      return (obj = {
        pageNumber: newPageNumber,
        pos: [...filterPosition, rest]
      });
    }
    //copy all page placeholder at requested position
    else {
      return (obj = {
        pageNumber: newPageNumber,
        pos: [rest]
      });
    }
  };

  //function for copy placeholder as per select copy type
  const copyPlaceholder = (type) => {
    let newPlaceholderPosition = [];
    let newPageNumber = 1;
    const signerPosition = props.xyPostion;

    //handle placeholder array and copy for multiple signers placeholder at requested location
    if (props.signerObjId) {
      //get current signers data
      const filterSignerPosition = signerPosition.filter(
        (data) => data.signerObjId === props.signerObjId
      );
      //get current pagenumber's all placeholder position data
      const placeholderPosition = filterSignerPosition[0].placeHolder.filter(
        (data) => data.pageNumber === props.pageNumber
      );
      //get current placeholder position data which user want to copy
      const currentPlaceholder = placeholderPosition[0].pos.filter(
        (position) => position.key === props.signKey
      );
      const { key, ...rest } = currentPlaceholder[0];
      for (let i = 0; i < props.allPages; i++) {
        const newId = randomKey();
        rest.key = newId;
        //get exist placeholder position for particular page
        const existPlaceholder = filterSignerPosition[0].placeHolder.filter(
          (data) => data.pageNumber == newPageNumber
        );
        const existPlaceholderPosition =
          existPlaceholder[0] && existPlaceholder[0].pos;

        //function for get copy to requested location of placeholder position
        const getPlaceholderObj = getCopyPlaceholderPosition(
          type,
          rest,
          newPageNumber,
          existPlaceholderPosition
        );
        if (getPlaceholderObj) {
          newPlaceholderPosition.push(getPlaceholderObj);
        }
        newPageNumber++;
      }

      const updatedSignerPlaceholder = signerPosition.map(
        (signersData, ind) => {
          if (signersData.signerObjId === props.signerObjId) {
            return {
              ...signersData,
              placeHolder: newPlaceholderPosition
            };
          }
          return signersData;
        }
      );

      const signersData = signerPosition;
      signersData.splice(0, signerPosition.length, ...updatedSignerPlaceholder);
      props.setXyPostion(signersData);
    }
    //handle signyourself array and copy for single signers placeholder at requested location
    else {
      const xyPostion = props.xyPostion;

      const placeholderPosition = xyPostion.filter(
        (data) => data.pageNumber === props.pageNumber
      );
      //get current placeholder position data which user want to copy
      const currentPlaceholder = placeholderPosition[0].pos.filter(
        (pos) => pos.key === props.signKey
      );
      const { key, ...rest } = currentPlaceholder[0];
      for (let i = 0; i < props.allPages; i++) {
        //get exist placeholder position for particular page
        const existPlaceholder = xyPostion.filter(
          (data) => data.pageNumber == newPageNumber
        );
        const existPlaceholderPosition =
          existPlaceholder[0] && existPlaceholder[0].pos;

        const newId = randomKey();
        rest.key = newId;
        //function for get copy to requested location of placeholder position
        const getPlaceholderObj = getCopyPlaceholderPosition(
          type,
          rest,
          newPageNumber,
          existPlaceholderPosition
        );
        if (getPlaceholderObj) {
          newPlaceholderPosition.push(getPlaceholderObj);
        }

        newPageNumber++;
      }
      props.setXyPostion(newPlaceholderPosition);
    }
  };

  //function for getting selected type placeholder copy
  const handleApplyCopy = () => {
    if (selectCopyType === "All pages") {
      copyPlaceholder("all");
    } else if (selectCopyType === "All pages but last") {
      copyPlaceholder("last");
    } else if (selectCopyType === "All pages but first") {
      copyPlaceholder("first");
    }
  };

  return (
    <Modal show={props.isPageCopy}>
      <ModalHeader style={{ background: themeColor() }}>
        <span style={{ color: "white" }}>Place All pages</span>
      </ModalHeader>

      <Modal.Body>
        {copyType.map((data, key) => {
          return (
            <div key={key} style={{ display: "flex", flexDirection: "column" }}>
              <label key={key} style={{ fontSize: "16px", fontWeight: "500" }}>
                <input
                  style={{ accentColor: "red", marginRight: "10px" }}
                  type="radio"
                  value={data}
                  onChange={() => setSelectCopyType(data)}
                  checked={selectCopyType === data}
                />

                {data}
              </label>
            </div>
          );
        })}
      </Modal.Body>

      <Modal.Footer>
        <button
          style={{
            color: "black"
          }}
          type="button"
          className="finishBtn"
          onClick={() => props.setIsPageCopy(false)}
        >
          Cancel
        </button>

        <button
          onClick={() => {
            handleApplyCopy();
            props.setIsPageCopy(false);
          }}
          style={{
            background: themeColor()
          }}
          type="button"
          disabled={!selectCopyType}
          className="finishBtn"
        >
          Apply
        </button>
      </Modal.Footer>
    </Modal>
  );
}

export default PlaceholderCopy;