import React from "react";
import { useProduct } from "vtex.product-context";

import styles from "./styles.css";

const Pix = () => {
  const product = useProduct();
  const precoAtual = Number(
    product?.product?.priceRange.sellingPrice.highPrice
  );

  const desconto = (precoAtual * 10) / 100;

  const precoNovo = precoAtual - desconto;

  const fechApi = async () => {
    fetch("/api/checkout/pub/orderForms/simulation", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      body: `{
      "items": [
        {
          "id": ${product?.selectedItem?.itemId},
          "seller": ${product?.selectedItem?.sellers[0].sellerId},
          "quantity": ${product?.selectedQuantity}
        }
      ],
      "country": "BRA"
    }`,
    })
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
      });
  };

  fechApi();

  return (
    <div className={styles.pixWrapper}>
      <figure className={styles.pixImageContainer}>
        <img
          className={styles.pixImage}
          src=" https://agenciamagma.vteximg.com.br/arquivos/pix-logo-nicolly.png"
          alt="logo do Pix"
        />
      </figure>

      <div className={styles.descriptionContainer}>
        <p className={styles.newPrice}>
          R$ {precoNovo.toFixed(2).replace(".", ",")}
        </p>
        <p className={styles.discount}>10 % de desconto</p>
      </div>
    </div>
  );
};

export default Pix;