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

const Airtime2Cash: React.FC = () => {
  //Customer to customer
  const [fromNumber, setFromNumber] = useState<string>("");
  const [amount, setAmount] = useState<string>("");
  const [network, setNetwork] = useState<string>("");

  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>Airtime to Cash</IonTitle>
        </IonToolbar>
      </IonHeader>

      <IonContent fullscreen className="ion-content-bg ion-padding">
        <IonGrid>
          <IonText className="ion-padding ion-text-center">
            <p>
              Trade your excess airtime for instant cash in your Vinpace wallet.
            </p>
          </IonText>

          <IonList
            className="ion-margin-bottom"
            style={{ border: "1px solid darkorange" }}
          >
            <IonItem>
              <IonSelect
                labelPlacement="floating"
                placeholder="Chose Network"
                interface="popover"
                label="Chose Network"
                value={network}
                onIonChange={(e) => setNetwork(e.detail.value)}
              >
                <IonSelectOption value="MTN">MTN</IonSelectOption>
                <IonSelectOption value="AIRTEL">AIRTEL</IonSelectOption>
                <IonSelectOption value="9MOBILE">9MOBILE</IonSelectOption>
                <IonSelectOption value="GLO">GLO</IonSelectOption>
              </IonSelect>
            </IonItem>
          </IonList>
          {network && (
            <>
              <IonList
                className="ion-margin-bottom"
                style={{ border: "1px solid darkorange" }}
              >
                <IonItem>
                  <IonInput
                    type="number"
                    label={`Type the ${network} phone number you are sending from`}
                    labelPlacement="stacked"
                    placeholder="phone number"
                    onIonInput={(e) => setFromNumber(e.detail.value || "")}
                    value={fromNumber}
                  ></IonInput>
                </IonItem>
              </IonList>

              <IonList
                className="ion-margin-bottom"
                style={{ border: "1px solid darkorange" }}
              >
                <IonItem>
                  <IonInput
                    type="number"
                    label={`How much worth of ${network} airtime are you sending? (10% fee applies)`}
                    labelPlacement="stacked"
                    placeholder="airtime amount"
                    onIonInput={(e) => setAmount(e.detail.value || "")}
                    value={amount}
                  ></IonInput>
                </IonItem>
              </IonList>
              <IonButton expand="block">
                <IonIcon slot="end" icon={arrowForward}></IonIcon>
                CONTINUE
              </IonButton>
            </>
          )}
        </IonGrid>

        <div className="ion-text-center">
          <p>
            Need help?{" "}
            <IonRouterLink routerLink="/contact">GET HELP</IonRouterLink>
          </p>
        </div>
      </IonContent>
    </IonPage>
  );
};

export default Airtime2Cash;