// src/pages/trade/Trade.tsx
import React, { useState, useContext } from "react";
import { Context } from "../../../context/contex";

import {
 IonPage,
 IonLoading,
 IonCard,
 IonCardContent,
 IonIcon,
 IonButton,
 IonCardHeader,
 IonCardTitle,
} from "@ionic/react";
import {
 alertCircle,

 warningOutline,
} from "ionicons/icons";
import AppShell from "../../../components/Header";
import Home from "./Home";


const Crypto: React.FC = () => {
 const context = useContext(Context);

 if (!context) {
  return <div>Loading...</div>;
 }

 const {
  userInfo,
 
  getUserInfo,
apiRequest,
  presentToast,
 } = context;

 const createCryptoAccount = async (id: string) => {
  if (!id) return;
  if (userInfo?.id_verified !== 1) {
   return presentToast(
    "top",
    "You must pass KYC verification to enable crypto features. Go to Home page and click on Verify KYC to get started.",
    () => null,
    "danger",
    alertCircle
   );
  }
   const data = await apiRequest(
  "POST",
  "", //url
  {
action: "create_crypto_account",
     id: id,
  },
  true,       // require auth
  true    // show success or error messages
) as any;
if(data?.success){
  await getUserInfo();
}
 
 };

 return (
  <IonPage>
    <AppShell showBack showLogo={false} title={" Crypto"}>

 
    <IonLoading
     isOpen={context.busy}
     message="Please wait..."
     spinner="circles"
     className="custom-loading"
    />


    {context.userInfo?.quidax_id === null && (
     <IonCard className="ion-text-center enable-crypto-card">
      <IonCardHeader>
       <IonIcon
        color="warning"
        icon={warningOutline}
        style={{ fontSize: "48px", marginBottom: "8px" }}
       />
       <IonCardTitle
        className="ion-text-uppercase"
        style={{ color: "#ffffff" }}
       >
        Crypto Not Enabled
       </IonCardTitle>
      </IonCardHeader>

      <IonCardContent>
       <p
        className=""
        style={{ fontSize: "15px", lineHeight: "1.5", color: "#ffffff" }}
       >
        You must enable crypto on your account to access all crypto services.
       </p>

       <IonButton
        color="success"
        expand="block"
        size="large"
        shape="round"
        className="ion-margin-top"
        disabled={context.userInfo?.quidax_id !== null}
        onClick={() => createCryptoAccount(context?.userInfo?.id.toString()!)}
       >
        Enable Crypto
       </IonButton>
      </IonCardContent>
     </IonCard>
    )}

    {context.userInfo?.quidax_id !== null && (
     <>
    
      <Home context={context}  />
    
     </>
    )}
   </AppShell>
  </IonPage>
 );
};

export default Crypto;