import React, { useEffect } from "react";

const Freight = () => {
  const setPlaceholder = (input: Element | null, placeholder: string) => {
    if (input) {
      input!.setAttribute("placeholder", placeholder);
    }
  };

  const appendElement = (
    parentElement: ChildNode | null | undefined,
    childElement: ChildNode | null | undefined
  ) => {
    if (parentElement && childElement) {
      parentElement!.appendChild(childElement);
    }
  };

  useEffect(() => {
    const cepInput = document.querySelector(".vtex-address-form-4-x-input");
    const inputSpan = cepInput?.nextSibling;
    const cepButton = document.querySelector(".vtex-address-form__postalCode")
      ?.nextSibling;

    console.log("cepInput: " + cepInput, typeof cepInput);
    console.log("inputSpan: " + inputSpan, typeof inputSpan);
    console.log("cepButton: " + cepButton, typeof cepButton);

    setPlaceholder(cepInput, "Digite seu CEP");
    appendElement(inputSpan, cepButton);
  });

  return <></>;
};

export default Freight;