import React, { useEffect } from 'react';
import { useProduct } from 'vtex.product-context';
import { useCssHandles } from 'vtex.css-handles';
import "./Pix.css"
const Pix = () => {

  useEffect(() => {
    const m3Input = document.querySelector(".vtex-address-form-4-x-input");
    m3Input?.setAttribute("placeholder", "Digite seu CEP");
  });



  const CSS_HANDLES = [
    'pixWrapper',
    'pixWrapperImage',
    'pixImage',
    'pixResult',
    'pixResultValue',
    'pixResultPercent'
  ];
  const handles = useCssHandles(CSS_HANDLES);

  const pixImg = "https://agenciamagma.vtexassets.com/arquivos/pix-emmanuelvitorpereiradejesus.svg";

  const resultProductContext = useProduct();
  const productSelling = Number(resultProductContext?.product?.priceRange?.sellingPrice?.lowPrice);
  const disccount = (productSelling * 10) / 100;
  const result = productSelling - disccount;
  const strResult = result.toFixed(2).replace(".", ",");



  return (
    < div className={handles.handles.pixWrapper} >
      <div className={handles.handles.pixWrapperImage}>
        <img src={pixImg} alt="Imagem de pix" className={handles.handles.pixImage} />
      </div>
      <div className={handles.handles.pixResult}>
        <span className={handles.handles.pixResultValue}> R$ {strResult}</span>
        <span className={handles.handles.pixResultPercent}>10 % de desconto</span>
      </div>
    </div >
  );
}
export default Pix;