import { FC, useState } from "react";
import { apiCall } from "../../untils/apiCall";

export interface ITestInvoice {
  fakturowniaCustomerID: string;
  userStripeID: string;
  email: string;
}

export const TestInvoice: FC<ITestInvoice> = ({
  fakturowniaCustomerID,
  userStripeID,
  email,

}) => {
  const [pageData, setPageData] = useState({
    price: 0,
    planName: "",
    currency: "",
    paymentArea: "",
    
  });

  const handleChange =
    (field: keyof typeof pageData) =>
    (e: React.ChangeEvent<HTMLInputElement>) => {
      setPageData((prev) => ({
        ...prev,
        [field]: field === "price" ? Number(e.target.value) : e.target.value,
      }));
    };

  const invoiceTest = async () => {
    const options = {
      fakturowniaCustomerID,
      userStripeID,
      price: pageData.price,
      planName: pageData.planName,
      currency: pageData.currency,
      paymentArea: pageData.paymentArea,
      email:email
    };
    await apiCall("connection/testInvoice", options, (response: any) => {
      console.log("response", response);
    });
  };

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        gap: 12,
        maxWidth: 400,
      }}
    >
      <h1>Test Invoice</h1>

      <label>
        Price
        <input
          type="number"
          value={pageData.price}
          onChange={handleChange("price")}
        />
      </label>

      <label>
        Plan Name
        <input
          type="text"
          value={pageData.planName}
          onChange={handleChange("planName")}
        />
      </label>

      <label>
        Currency
        <input
          type="text"
          value={pageData.currency}
          onChange={handleChange("currency")}
        />
      </label>

      <label>
        Payment Area
        <input
          type="text"
          value={pageData.paymentArea}
          onChange={handleChange("paymentArea")}
        />
      </label>


      <button onClick={invoiceTest}>Send Invoice</button>
    </div>
  );
};