import "./ExploreContainer.css";
import { useKlashaPayment, KlashaButton, KlashaConsumer } from "../dist";
import { KlashaOptionsProps } from "../dist/types";

interface ContainerProps {}

const config: KlashaOptionsProps = {
  email: "dansteve@email.com",
  phone_number: "+2348143108254",
  merchantKey: "GByi/gkhn5+BX4j6uI0lR7HCVo2NvTsVAQhyPko/uK4=",
  amount: 1000,
  sourceCurrency: "",
  destinationCurrency: "",
  tx_ref: "" + Math.floor(Math.random() * 1000000000 + 1),
  businessId: "1",
  fullname: "Dansteve Adekanbi",
  paymentDescription: "",
  kit: {
    currency: "",
    phone_number: "+2348143108254",
    email: "dansteve@email.com",
    fullname: "Dansteve Adekanbi",
    tx_ref: "",
    paymentType: "",
  },
};

const KlashaHookExample = () => {
  const componentProps = {
    ...config,
  };
  const className = "btn";
  componentProps.kit.callBack = (response: any) => console.log(response);
  const initializePayment = useKlashaPayment(componentProps);
  return (
    <div className={`${className}`}>
      <button
        onClick={() => {
          initializePayment();
        }}
      >
        Klasha Hooks Implementation
      </button>
    </div>
  );
};

const ExploreContainer: React.FC<ContainerProps> = () => {
  const componentProps = {
    ...config,
    text: "Klasha Button Implementation",
  };

  componentProps.kit.callBack = (response: any) => console.log(response);

  return (
    <div className="container">
      <p>
        <strong className="ion-padding">Welcome to Dansteve Adekanbi</strong>
      </p>
      <p>
        <strong className="ion-padding">react-Klasha package testing</strong>
      </p>
      <div>
        <KlashaHookExample />
      </div>
      <div>
        <KlashaButton {...componentProps} className="btn" />
      </div>
      <div>
        <KlashaConsumer {...componentProps}>
          {({ initializePayment }: any) => (
            <button onClick={() => initializePayment()}>
              Klasha Consumer Implementation
            </button>
          )}
        </KlashaConsumer>
      </div>
    </div>
  );
};

export default ExploreContainer;