"use client"
import React from 'react'
import Image from 'next/image'
import Google from '@/app/Provider/Google'
import Microsoft from '@/app/Provider/Microsoft'
import Signout from '@/app/Provider/signout'
import {toast} from 'react-hot-toast';
import 'react-tooltip/dist/react-tooltip.css'
import './style.css'
const handleClickGoogle = async() => {

    const googlefn = new Promise(async(resolve, reject) => {
        await Google().then(data => {
            localStorage.setItem('my-drive-user', data)
            resolve("")
        }).catch(err => {
            console.log(err)
            reject(err)
        })
    })

    await toast.promise(googlefn, {
        loading: `Logging..`,
        success: (data) => `Successfully Logged In 👌`,
        error: (err) => `${err}`
    })
    window.location.href = "/MyFiles"

}

const handleClickMicrosoft = async() => {

    const microsofrfn = new Promise(async(resolve, reject) => {
        await Microsoft().then(data => {
            localStorage.setItem('my-drive-user', data)
            resolve("")
        }).catch(err => {
            console.log(err)
            reject(err)
        })
    })

    await toast.promise(microsofrfn, {
        loading: `Logging..`,
        success: (data) => `Successfully Logged In 👌`,
        error: (err) => `${err}`
    })
    window.location.href = "/MyFiles"
}
const logout = async e => {
    await Signout().then(() => {
        window.location.href = "/"
    }).catch(err => console.log(err))
}
var userId = null
export default function Home() {
    React.useEffect(() => {
        userId = localStorage.getItem('my-drive-user')
        setTimeout(() => {
            document
                .getElementById('mainLoading')
                .style
                .display = 'none'
            document
                .getElementById('homebg_id')
                .style
                .display = 'block'
        }, 500);
    }, [])

    return (

        <div>
            <img
                src="/image/pexels-miguel-á-padriñán-19670.jpg"
                className="bgimage"
                alt=""/>
            <div id="mainLoading">
                <img src="/image/loading.gif" className='mx-auto w-5/12 '/>
            </div>
            <div id="homebg_id">

                <div className="main-content">

                    <div className="homebg1 animate__animated animate__fadeIn">

                        <div className="homebg2-content animate__animated animate__fadeIn">
                            <div className="container-fluid ">
                                <div className="row">
                                    <div className="col-12">
                                        <center><img src="/image/logo1.png" className="index_logo" alt=""/></center>
                                    </div>

                                    <div className="col-12">
                                        <p>Data in the Cloud</p>
                                    </div>
                                    <div className="col-12">
                                        <div className='siginoption'>
                                            {userId
                                                ? <div>
                                                        <a href="/MyFiles">
                                                            <button
                                                                type="button"
                                                                class="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-full text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700">My Files</button>
                                                        </a>
                                                        <button
                                                            onClick={logout}
                                                            type="button"
                                                            class="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-full text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700">Signout</button>
                                                    </div>
                                                : <div>
                                                    <span>
                                                        <img src="/image/Group 2.png" onClick={handleClickGoogle}/>
                                                    </span>
                                                    <span>
                                                        <img src="/image/Group 1.png" onClick={handleClickMicrosoft}/>
                                                    </span>

                                                </div>}

                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                < div className="main-content-features">
                    <div className="container-fluid">
                        <div className="row">
                            <div className="col-md-12 text-center">
                                <h1>Features</h1>
                                <br/>
                            </div>
                            <div className="col-md-6">
                                <img src="/image/undraw_setup_analytics_re_foim.svg" alt=""/>
                            </div>
                            {/* <div className="col-md-6">
                <h2>Cloud Storage
                </h2>
                <p>Easily able to keep track of your monthly expenses as well as your savings in
                    a convenient and effortless manner</p>
            </div>
            <div className="col-md-12">
                <hr/>
            </div>
            <div className="col-md-6">
                <h2>Statement</h2>
                <p>Quickly add your monthly financial records or transactions with ease</p>

            </div>
            <div className="col-md-6">
                <img src="/image/undraw_credit_card_re_blml.svg" alt=""/>
            </div> */}

                            <div className="col-md-12">
                                <br/><br/><br/>
                                <h6
                                    style={{
                                    color: 'black'
                                }}>
                                    <center>&copy; mydrive {new Date().getFullYear()}||
                                        <a
                                            href="https://mylnk.co.in/priyonuj"
                                            target="_blank"
                                            rel="noreferrer"
                                            style={{
                                            color: 'black',
                                            textDecoration: 'none'
                                        }}>priyonujdey</a>
                                    </center>
                                </h6>
                            </div>

                        </div>
                    </div>

                </div>
            </div>

        </div>
    )
}
