"use client"

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

export default function(){

    const myContractAddress = "0x12216fb7d3F72E68E9aC52d3e9e0006DAAe07401"
    const [loading,setLoading] = useState(false)

    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 checkCommit = async()=>{
        try{

          let { contract, signer } = await getContract()

           const address = await signer.getAddress()
           console.log("Signer is " , address)

           setLoading(true)

          fetch(`http://localhost:9000/v1/userCommit/checkCommit/${address}`,{
            method:"PUT",
            credentials:"include"
          })
          .then((response)=>{
            return response.json()
          })
          .then(async(data)=>{
              console.log("chalo chalo")
              let checkData = data.check
              console.log(checkData)
              console.log("type of data type is : " , typeof checkData)
              console.log(data.timestamp)
              console.log("type of data type is : " , typeof data.timestamp)
              console.log(data.Sign)
              console.log("Typof signature is " , typeof data.Sign)
              console.log("sednder of meessage is " , address)
              console.log("type of address is  " , typeof address)
              console.log("contract is " , contract)
              const tx = await contract.investigateAccount(data.check,data.timestamp,data.Sign)
              let signMsg = await tx.wait()
              toast.success(signMsg)
              setLoading(false)
              toast.success(signMsg)
              console.log("now the msg is " , signMsg)
              
          })
          .catch((err)=>{
            setLoading(false)
            console.log("error is " , err)
            toast.error(err)
          })

        }
        catch(error){
            setLoading(false)
            toast.error("Something went wrong " + error)
        }
    }


    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-[30%] 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"}}>Check Your Commit</h1>
                   <p className="text-center text-[18px] text-slate-300" style={{"fontFamily":"sans-serif"}}>
                       You reached this page because you are already a part 
                       of this challenge and have invested your Ethereum here. <span className="text-red-500">Now, 
                       you are here to re-check your commits.</span> 
                    </p>
                      <div className="w-full border-2 rounded-2xl border-white mt-14 p-2 flex flex-col space-y-5 items-center justify-center">
                      <p className="text-[40px] text-white">What do you have to do?</p>
                      <div className="flex flex-col space-y-5">
                         <ul className="text-slate-400 text-[20px] text-center" style={{"fontFamily":"sans-serif"}}>1. After committing to your GitHub, you need to visit this page.</ul>
                         <hr></hr>
                         <ul className="text-slate-400 text-[20px] text-center" style={{"fontFamily":"sans-serif"}}>2. Click the button below only then will your commits be accepted.</ul>
                         <hr></hr>
                         <ul className="text-slate-400 text-[20px] text-center" style={{"fontFamily":"sans-serif"}}>3. We want you to do this manually because it involves money, so you can't blindly trust automation, especially since it’s on-chain.</ul>
                      </div>

                    </div>
                    <button onClick={checkCommit} className="p-2 mt-6 w-[80%] bg-red-600 text-white  text-[30px]">Re-Check Commit</button>

                 </div>
          )}

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