"use client"
import { ethers } from "ethers"
import {abi} from "../Abi/Abi"
import { useState } from "react"
import { ToastContainer, toast } from 'react-toastify';

export default function () {

  const [checkBox,setCheckBox] = useState(false)
  const [loading,setLoading] = useState(false)

  const myContractAddress = "0x12216fb7d3F72E68E9aC52d3e9e0006DAAe07401"


  const getContract = async()=>{
    const provider = new ethers.BrowserProvider(window.ethereum)
    const signer = await provider.getSigner()
    const contract = new ethers.Contract(myContractAddress,abi,signer)
    return {contract,signer}
  }

  const createAccount = async()=>{
    try{
      if(checkBox === false){
        toast.success("Please Accept the terms and condition")
        return

      }

      let {contract,signer} = await getContract()
      let addresss = await signer.getAddress()
      console.log("The address is " , addresss)

      setLoading(true)

      // First we are going to check from the backend part

      fetch("http://localhost:9000/v1/startChallenge",{
        method:"POST",
        credentials:"include"
      })
      .then((response)=>{
        return response.json()
      })
      .then(async(data)=>{
          toast.success(data.msg)
          const tx = await contract.createAccount({
            value:ethers.parseEther("0.002")
          })
          await tx.wait()
          setLoading(false)
          toast.success("Created the Challenge ");
          
      })
      .catch((err)=>{
          setLoading(false)
          console.log("not able " + err)
          toast.error("Not able to perform the action " + err)
      })
    }
    catch(error){
      setLoading(false)
      toast.error("Not able to perform the action  " + error)
    }
  }

  const checkBoxComment = ()=>{
    if(!checkBox) setCheckBox(true)
  }

  return (
    <>
      <div className="w-full min-h-screen bg-black flex items-center justify-center">

      {loading?(

        <div className="flex flex-col space-y-5 items-center justify-center">

        <div className="w-[70px] h-[70px] border-t-black rounded-full animate-spin border-3 border-white">

        </div>

        <div>
          <h1 className="text-[25px] font-bold text-white">Loading....</h1>
        </div>

        <ToastContainer></ToastContainer>

        </div>

        


      ):(
         <div className="w-[50%] flex flex-col mt-[5rem] space-y-4 h-auto p-2 items-center justify-center">
          <h1 className="text-white text-center text-[40px] font-bold" style={{ "fontFamily": "sans-serif" }}>Start the Challenge</h1>
          <div className="flex items-center justify-center w-[60%]">
          <p className="text-center text-[18px] text-slate-300" style={{ "fontFamily": "sans-serif" }}>
            Before starting the challenge, please make sure that you
            want to perform this task because this task may lead to
            <span className="text-red-500"> your own financial loss and may lead to depression </span> so once
            again make sure that you are ready for this
          </p>

          </div>

            <div className="w-[60%] mt-14 flex flex-col space-y-5 items-center justify-center">
              <p className="text-[40px] text-white">This Challenge Includes</p>
              <div className="flex flex-col space-y-5 p-3 rounded-2xl border-2 border-white">
                <ul className="text-slate-400 text-[20px] text-center" style={{"fontFamily":"sans-serif"}}>1. You have to commit to GitHub until the 30th day of starting this challenge</ul>

                <hr></hr>
                <ul className="text-slate-400 text-[20px] text-center" style={{"fontFamily":"sans-serif"}}>2. You have to submit ETH at the start of the challenge</ul>
                <hr></hr>
                <ul className="text-slate-400 text-[20px] text-center" style={{"fontFamily":"sans-serif"}}>3. If you miss any day in these 30 days of committing on GitHub, then you will lose your ETH</ul>
              </div>

              <div className="flex mt-6 space-x-5 items-center justify-center">
                <input onClick={checkBoxComment} className="w-[20px] h-[20px] border-2 border-white" type="radio"></input>
                <p className="font-light text-white text-[20px]" style={{"fontFamily":"sans-serif"}}> I understand the risks and accept the terms</p>
              </div>
            </div>
          
          <button onClick={createAccount} className="p-2 mt-6 w-[60%] bg-red-600 text-white text-[30px]">Start Challenge</button>

        </div>

      )}

      </div>
      <ToastContainer></ToastContainer>
      
    </>
  )
}