import React from "react";
import { useProduct } from "vtex.product-context";
import styles from "./styles.css";
// import { useQuery } from "react-apollo";
// import pixPrice from "../../graphql/pixPrice.graphql";

const PixDiscount = () => {
  const productContextValue = useProduct();

  const sellingPrice =
    productContextValue?.product?.priceRange?.sellingPrice?.highPrice;

  const pixPrice = (sellingPrice! * 0.9).toLocaleString(undefined, {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  });

  // console.log(productContextValue);

  return (
    <>
      <p className={styles.pixDiscount}>{`R$ ${pixPrice}`}</p>
      {/* <p>{testingApi}</p> */}
    </>
  );
};

export default PixDiscount;

// "vtex.search-graphql": "0.x"

// const { data } = useQuery(pixPrice, {
//   variables: {
//     slug: productContextValue?.product?.productName,
//   },
//   ssr: false,
// });

// const testingApi = fetch(
//   "https://agenciamagma.dev.com.br/api/checkout/pub/orderForms/simulation"
// )
//   .then((response) => response.json())
//   .then((data) => console.log(data));