
import React from 'react';
import Image from 'next/image'
import './style.css'
import Storage from './storage';
import Folder from '../../Folder/folder'
import File from '../../File/file'
import Loading from '../../loading/loading'
import {checkFolder} from "@/app/util/db";
import {usePathname} from 'next/navigation'
import Signout from '@/app/Provider/signout'
export function generateStaticParams() {
    return [{ slug: ['a', '1'] }, { slug: ['b', '2'] }, { slug: ['c', '3'] }]
  }
export default function Page({ params }) {
    const { slug } = params
    const pathname = usePathname()
    const check = async e => {
        await checkFolder(localStorage.getItem('my-drive-user'),pathname).catch(err => {
            //  alert(err.message)
            window.location.href = '/MyFiles'
        });
        // setTimeout(() => {     document         .getElementById('loading') .style
        // .display = 'none'     document .getElementById('content')         .style
        // .display = 'block' }, 500);
    }

    React.useEffect(() => {
       if(!localStorage.getItem('my-drive-user'))  window.location.href = '/'
        if (pathname != '/MyFiles') 
            check()
        else {
            // setTimeout(() => {     document         .getElementById('loading') .style
            // .display = 'none'     document .getElementById('content')         .style
            // .display = 'block' }, 500);
        }

    }, [])
    const [showSearch,
        setShowSearch] = React.useState(false)
    const [searchQuery,
        setSearchQuery] = React.useState('')
    const search = e => {
        setSearchQuery(e.trim())
    }
    const [addFolder,
        setAddFolder] = React.useState(false)
    const [addFile,
        setaddFile] = React.useState(false)
    const [showNav,
        setshowNav] = React.useState(false)
    const [modalIsOpenFStorage,
        setIsOpenFolder] = React.useState(false);
    const [folderExist,
        setFodlerSist] = React.useState(false);
    const [filePresent,
        setfileEist] = React.useState(false);
    const logout = async e =>{
         await Signout().then(() => {
            window.location.href="/"
        }).catch(err => console.log(err))
    }
    return (
        <div className="w-full h-screen secondHalf animate__animated animate__fadeIn">

            <Storage
                open={modalIsOpenFStorage}
                refresh={modalIsOpenFStorage}
                close={e => setIsOpenFolder(false)}/>
            <button
                onClick={e => setshowNav(true)}
                type="button"
                className="inline-flex items-center p-2  font-extrabold mt-16 text-black rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-black dark:hover:bg-gray-700 dark:focus:ring-gray-600">
                <span className="sr-only">Open sidebar</span>
                <svg
                    className="w-8 h-8"
                    aria-hidden="true"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        clip-rule="evenodd"
                        fill-rule="evenodd"
                        d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
                </svg>
            </button>
            <aside
                className={showNav
                ? "fixed top-0 left-0 z-40 w-42 h-screen pt-11 transition-transform bg-white border-r border-gray-200 dark:bg-gray-800 dark:border-gray-700"
                : "fixed top-0 left-0 z-40 w-42 h-screen pt-11 transition-transform -translate-x-full bg-white border-r border-gray-200 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700"}>
                <div className=' float-right  mr-5 sm:hidden'>
                    <span
                        class="material-icons navcloseIcon  cursor-pointer mt-8 text-white"
                        onClick={e => setshowNav(false)}>
                        cancel
                    </span>
                </div>

                <div className="h-full px-3 pb-4 overflow-y-auto bg-white dark:bg-gray-800 animate__animated animate__fadeInLeft">
                    <ul className="space-y-2 font-medium text-sm mt-10 ">
                        <li>
                            <a
                                href="#"
                                className="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"
                                style={{"backgroundColor" : pathname.split('/')[1] === 'MyFiles' ? "grey": "none"}}
                                >
                                <span className="material-icons">perm_media</span>
                                <span className="ms-3">My Files</span>
                            </a>
                        </li>
                        <li className="pt-3">
                            <a
                                href="#"
                                className="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"
                                style={{"backgroundColor" : pathname.split('/')[1] === 'SharedFiles' ? "grey": "none"}}
                                >
                                <span className="material-icons">share</span>
                                <span className="flex-1 ms-3 whitespace-nowrap">Shared Files</span>

                            </a>
                        </li>
                        <li className="pt-3">
                            <a
                                onClick={e => {
                                setshowNav(false);
                                setAddFolder(true)
                            }}
                                className="flex items-center p-2 cursor-pointer text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
                                <span className="material-icons">create_new_folder</span>
                                <span className="flex-1 ms-3 whitespace-nowrap">Create Folder</span>

                            </a>
                        </li>
                        <li className="pt-3">
                            <a
                                onClick={e => {
                                setshowNav(false);
                                setaddFile(true)
                            }}
                                className="flex items-center p-2 cursor-pointer text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
                                <span className="material-icons">cloud_upload</span>
                                <span className="flex-1 ms-3 whitespace-nowrap">Upload File</span>

                            </a>
                        </li>
                        <li className="pt-3">
                            <a
                                href="#"
                                className="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"
                                style={{"backgroundColor" : pathname.split('/')[1] === 'Favorites' ? "grey": "none"}}
                                >
                                <span className="material-icons">star</span>
                                <span className="flex-1 ms-3 whitespace-nowrap">Favorites</span>

                            </a>
                        </li>
                        <li className="pt-3">
                            <a
                                onClick={e => {
                                setshowNav(false);
                                setIsOpenFolder(true)
                            }}
                                className="flex items-center p-2 cursor-pointer text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
                                <span className="material-icons">memory</span>
                                <span className="flex-1 ms-3 whitespace-nowrap">Storage</span>

                            </a>
                        </li>
                     
                        <div className='absolute bottom-10'>

                            <li className="pt-3">

                                <span className=" whitespace-nowrap text-white text-xs">Created By Priyonuj Dey</span>

                            </li>
                        </div>

                    </ul>

                </div>
            </aside>
            <div className='overflow-auto  p-2  lg:pl-44 sm:pl-44 lg:pt-20 sm:pt-20'>
                <p>
                    {pathname && pathname
                        .split('/')
                        .map((data, index) => {
                            const slicedArray = pathname
                                .split('/')
                                .slice(0, index + 1);
                            return <span >&#9656;
                                <span
                                    className="cursor-pointer"
                                    onClick={e => {
                                    window.location.href = slicedArray.join('/')
                                }}>
                                    {data.replace(/\%20/g, ' ')}
                                </span>
                            </span>
                        })}</p>

                {/* {folderExist && filePresent
                    ? <div className='text-center sm:mt-16 mt-36 animate__animated animate__zoomIn'>
                            <img
                                src='/image/undraw_upload_re_pasx.svg'
                                className='sm:w-3/12 w-6/12 mx-auto hover:w-4/12 transition-all duration-75'/>
                            <br/>
                            <p className='font-extrabold'>UPLOAD FILE</p>
                        </div>
                    : ""} */}
                {/* <Folder
                    open={addFolder}
                    close={e => setAddFolder(false)}
                    folder={e => setFodlerSist(e)}/> */}
                <br/>
                <File
                    file={searchQuery}
                    openFile={addFile}
                    openFolder={addFolder}
                    close={e => {setaddFile(false);setAddFolder(false)}}
                  />
            </div>

        </div>
    )
}
