/* eslint-disable jsx-a11y/anchor-is-valid */
import {useEffect, useState} from 'react'
import {Outlet, Link} from 'react-router-dom'
import {toAbsoluteUrl} from '../../../_res/helpers'

const AuthLayout = () => {

  // INITIAL STATE FOR BACKGROUND IMAGE
  let [bgImage, setBgImage] = useState({
    filter: 'grayscale(0%)'
  })

  // FUNCTION TO CHANGE BACKGROUND IMAGE
  let changeBg = () => {
    // let randomNum = Math.round(Math.random() * 3)
    let randomNum = Number(localStorage.getItem('bg-num'))
    if(randomNum){
      if(randomNum <= 1){
        setBgImage({
          filter: 'grayscale(0%)'
        })
        localStorage.setItem('bg-num', '2')
      }else if(randomNum <= 2){
        setBgImage({
          // filter: 'hue-rotate(90deg)'
          filter: 'grayscale(100%)'
        })
        localStorage.setItem('bg-num', '3')
      }else{
        setBgImage({
          filter: 'sepia(50%)'
        })
        localStorage.setItem('bg-num', '1')
      }
    }else{
      localStorage.setItem('bg-num', '2')
    }
  }

  useEffect(() => {
    changeBg() // FUNCTION TO CHANGE BACKGROUND IMAGE
    const root = document.getElementById('root')
    if (root) {
      root.style.height = '100%'
    }
    return () => {
      if (root) {
        root.style.height = 'auto'
      }
    }
  }, [])

  return (    
    <div className='position-relative d-flex flex-column flex-lg-row flex-column-fluid overflow-hidden' style={{minHeight: '100vh'}}>
      <img src={toAbsoluteUrl('/media/misc/float-sample.jpg')} alt="" className='position-absolute top-0 left-0 w-auto h-100' style={{filter: bgImage.filter}}/>
      {/* begin::Body */}
      <div className='position-relative d-flex flex-column flex-lg-row-fluid w-lg-50 p-10 order-2 order-lg-1'>
        {/* begin::Form */}
        <div className='d-flex flex-center flex-column flex-lg-row-fluid'>
          {/* begin::Wrapper */}
          <div className='w-lg-500px p-10 bg-white rounded'>
            <Outlet />
          </div>
          {/* end::Wrapper */}
        </div>
        {/* end::Form */}

        {/* begin::Footer */}
        <div className='d-flex flex-center flex-wrap px-5'>
          {/* begin::Links */}
          <div className='d-flex fw-semibold text-primary fs-base'>

            <a href='http://float-www.dev.chiefsoft.net' className='px-5 text-white fw-bolder' target='_blank'>
              Home
            </a>

            <a href={process.env.REACT_APP_TERMS_LINK} className='px-5 text-white fw-bolder' target='_blank'>
              Terms
            </a>

            <a href={process.env.REACT_APP_CONTACT_LINK} className='px-5 text-white fw-bolder' target='_blank'>
              Contact Us
            </a>

            <a href={process.env.REACT_APP_ABOUT_LINK} className='px-5 text-white fw-bolder' target='_blank'>
              About Us
            </a>
          </div>
          {/* end::Links */}
        </div>
        {/* end::Footer */}
      </div>
      {/* end::Body */}


    </div>
  )
}

export {AuthLayout}