/* 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 background color
  let [bgColor, setBgColor] = useState({
    backgroundImage: 'linear-gradient(70deg, #E6E7F9, #b4caed)'
  })

  // function to determine background color
  let changeBgColor = () => {
    // let randomNum = Math.round(Math.random() * 3)
    let randomNum = Number(localStorage.getItem('bg-num'))
    if(randomNum){
      if(randomNum <= 1){
        setBgColor({
          backgroundImage: 'linear-gradient(70deg, #E6E7F9, #b4caed)'
        })
        localStorage.setItem('bg-num', '2')
      }else if(randomNum <= 2){
        setBgColor({
          backgroundImage: 'linear-gradient(70deg, #eee, #fff)'
        })
        localStorage.setItem('bg-num', '3')
      }else{
        setBgColor({
          backgroundImage: 'linear-gradient(70deg, #d5e1f5, #75a5f0)'
        })
        localStorage.setItem('bg-num', '1')
      }
    }else{
      setBgColor({
        backgroundImage: 'linear-gradient(70deg, #E6E7F9, #b4caed)'
      })
      localStorage.setItem('bg-num', '1')
    }
  }

  useEffect(() => {

    changeBgColor() // calls the change color function after page loads

    const root = document.getElementById('root')
    if (root) {
      root.style.height = '100%'
    }
    return () => {
      if (root) {
        root.style.height = 'auto'
      }
    }
  }, [])

  return (
    <div className='d-flex flex-column flex-lg-row flex-column-fluid overflow-auto' style={{backgroundImage: `${bgColor.backgroundImage}`}}>
      {/* begin::Body */}
      <div className='d-flex flex-column flex-lg-row-fluid w-lg-50 p-10 order-2 order-lg-1 vh-100'>
        {/* begin::Form */}
        <div className='d-flex flex-center flex-column flex-lg-row-fluid'>
          <div className='text-center mb-11'>
          {/* <h1 className='text-dark fw-bolder mb-3'>Sign In</h1> */}
          <img alt='Float Mobility' src={toAbsoluteUrl('/media/logos/logo.png')} className='h-35px' />
        </div>
          {/* begin::Wrapper */}
          <div className='auth-gray w-lg-500px p-10 shadow-lg rounded-sm'>
            <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' target='_blank'>
              Home
            </a>


            <a href={process.env.REACT_APP_SITE_TERMS} className='px-5' target='_blank'>
              Terms
            </a>

            <a href={process.env.REACT_APP_SITE_CONTACT_US} className='px-5' target='_blank'>
              Contact Us
            </a>

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

      {/* begin::Aside */}
      <div
        className='position-relative d-flex flex-lg-row-fluid w-lg-50 p-10 order-1 order-lg-2'
      >
        {/* begin::Content */}
        <div className='position-relative d-flex flex-column flex-center px-5 px-md-15 w-100'>
          {/* begin::Logo */}
          {/* <Link to='/' className='mb-12'>
            <img alt='Float Mobility' src={toAbsoluteUrl('/media/logos/logo.png')} className='h-35px' />
          </Link> */}
          {/* end::Logo */}

          {/* <img
            className='mx-auto w-350px w-md-50 w-xl-500px mb-10 mb-lg-20 rounded'
            src={toAbsoluteUrl('/media/misc/auth-bg-new.png')}
            alt=''
            style={{boxShadow: '0px 0px 10px white'}}
          /> */}
           <div className='mx-auto w-75 w-xl-500px mb-10 mb-lg-20 rounded'>
            <img
              className='img-fluid rounded'
              src={toAbsoluteUrl('/media/misc/auth-bg-new.png')}
              alt=''
              // style={{boxShadow: '0px 0px 10px white'}}
              />
          </div>
          {/* end::Image */}
            <div className='w-100 w-md-75'>
              {/* begin::Title */}
              <h1 className='text-dark fs-2qx fw-bolder text-center mb-7'>
                Fast, Efficient and Productive
              </h1>
              {/* end::Title */}

              {/* begin::Text */}
              {/* <div className='text-dark fs-base text-center'>
                In this kind of post,{' '}
                <a href='#' className='opacity-75-hover text-warning fw-bold me-1'>
                  the blogger
                </a>
                introduces a person they’ve interviewed <br /> and provides some background information
                about {' '}
                <a href='#' className='opacity-75-hover text-warning fw-bold me-1'>
                  the interviewee
                </a>
                and their <br /> work following this is a transcript of the interview.
              </div> */}
              {/* end::Text */}
            </div>
        </div>
        {/* end::Content */}
      </div>
      {/* end::Aside */}
    </div>
  )
}

export {AuthLayout}