import React, { useState } from "react";
import {
  IonContent,
  IonHeader,
  IonIcon,
  IonPage,
  IonRow,
  IonText,
  IonToolbar,
  IonButtons,
  IonBackButton,
  IonTitle,
  IonRouterLink,
  IonButton,
  IonSelect,
  IonSelectOption,
  IonInput,
  IonList,
  IonItem,
} from "@ionic/react";
import { arrowBackOutline, arrowForward } from "ionicons/icons";

const PayInternet: React.FC = () => {
  const [vendor, setVendor] = useState<string>("");
  const [packages, setPackages] = useState<string>("");
  const [meterNumber, setMeterNumber] = useState<string>("");
  const [amount, setAmount] = useState<string>("");

  const handlePay = () => {
    // Handle payment logic here
    console.log("Payment details:", { vendor, packages, meterNumber, amount });
  };

  function formatNumber(number: string) {
    return Number(number).toLocaleString("en-US", {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    });
  }

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar className="ion-padding-horizontal">
          <IonButtons slot="start">
            <IonBackButton
              text=""
              icon={arrowBackOutline}
              defaultHref="/"
            ></IonBackButton>
          </IonButtons>
          <IonTitle>Pay For Internet</IonTitle>
        </IonToolbar>
      </IonHeader>

      <IonContent fullscreen className="ion-content-bg ion-padding">
        <IonList
          className="ion-margin-vertical"
          style={{ border: "1px solid darkorange" }}
        >
          <IonItem>
            <IonSelect
              interface="popover"
              label="Chose vendor"
              labelPlacement="floating"
              value={vendor}
              onIonChange={(e) => setVendor(e.detail.value)}
            >
              <IonSelectOption value="vendor1">Vendor 1</IonSelectOption>
              <IonSelectOption value="vendor2">Vendor 2</IonSelectOption>
              {/* Add more vendors as needed */}
            </IonSelect>
          </IonItem>
        </IonList>
        <IonList
          className="ion-margin-bottom"
          style={{ border: "1px solid darkorange" }}
        >
          <IonItem>
            <IonSelect
              labelPlacement="floating"
              placeholder="Chose package"
              interface="popover"
              label="Chose package"
              value={packages}
              onIonChange={(e) => setPackages(e.detail.value)}
            >
              <IonSelectOption value="package1">Package 1</IonSelectOption>
              <IonSelectOption value="package2">Package 2</IonSelectOption>
              {/* Add more packages as needed */}
            </IonSelect>
          </IonItem>
        </IonList>
        <IonList
          className="ion-margin-bottom"
          style={{ border: "1px solid darkorange" }}
        >
          <IonItem>
            <IonInput
              label="Phone number"
              labelPlacement="floating"
              placeholder="123456"
              value={meterNumber}
              onIonInput={(e) => setMeterNumber(e.detail.value || "")}
            ></IonInput>
          </IonItem>
        </IonList>

        <IonButton expand="block" onClick={handlePay}>
          PAY NOW
        </IonButton>
        <div className="ion-text-center">
          <p>
            Need help?{" "}
            <IonRouterLink routerLink="/contact">GET HELP</IonRouterLink>
          </p>
        </div>
      </IonContent>
    </IonPage>
  );
};

export default PayInternet;