import { useAuth } from '@/hooks/auth'
import Image from 'next/image'
import { useCallback } from 'react'
import Particles from 'react-tsparticles'
import { loadFull } from 'tsparticles'
import packageJson from './../package.json'
import { Menu } from './Menu'
import { Navbar } from './Navbar'

export const Depan = ({ children }) => {
	useAuth({ middleware: 'guest', redirectIfAuthenticated: '/dashboard' })

	/** PARTICLES */
	const particlesInit = useCallback(async (engine) => {
		await loadFull(engine)
	}, [])

	return (
		<div className='flex h-screen'>
			<div className='kiri w-9/12 relative hidden md:block'>
				<div className='relative h-screen'>
					<Image src={'/img/bg-login.jpg'} alt='bg-login' layout='fill' objectFit='cover' priority />
				</div>
				<Particles
					id='tsparticles'
					init={particlesInit}
					options={{
						fpsLimit: 60,
						interactivity: {
							events: {
								onHover: {
									enable: true,
									mode: 'grab',
								},
								resize: true,
							},
						},
						particles: {
							color: {
								value: '#ffffff',
							},
							links: {
								color: '#ffffff',
								distance: 130,
								enable: true,
								opacity: 1,
								width: 1,
							},
							collisions: {
								enable: true,
							},
							move: {
								directions: 'none',
								enable: true,
								outModes: {
									default: 'bounce',
								},
								random: false,
								speed: 2,
								straight: false,
							},
							number: {
								density: {
									enable: true,
									area: 800,
								},
								value: 50,
							},
							opacity: {
								value: 0.5,
							},
							shape: {
								type: 'circle',
							},
							size: {
								value: { min: 1, max: 5 },
							},
						},
						detectRetina: true,
					}}
				/>

				<div className='absolute left-1/2 -translate-x-1/2 bottom-10 text-white flex gap-1 text-xs 2xl:text-base'>
					<p>Copyright © 2022</p>
					<p className=''>SISTEM APLIKASI VERIFIKASI ANGGARAN BKN RI</p>
				</div>
				<div className='absolute left-1/2 -translate-x-1/2 bottom-6 text-white flex gap-1 text-xs 2xl:text-base'>
					<p>V{packageJson.version}</p>
				</div>
			</div>
			<div className='kanan bg-abu md:w-3/12 px-7 relative'>{children}</div>
		</div>
	)
}

export const Belakang = ({ children }) => {
	useAuth({ middleware: 'auth' })
	return (
		<div className=''>
			<Navbar />
			<Menu />
			<div className='content 2xl:mx-72 mx-20 my-10'>{children}</div>
		</div>
	)
}

export const LandingPageLayout = ({ children }) => {
	return <div className='md:grid md:grid-cols-1 items-center md:px-32 md:gap-3 gap-y-3 py-5 mx-3'>{children}</div>
}