'use client'
import React from 'react'
import styled from 'styled-components'
import Link from 'next/link'
import {
  getNewAccessTokenUsingRefreshToken,
  getUserInfo,
} from '@services/auth/auth'
import { usePathname } from 'next/navigation'
import { useRouter } from 'next/router'
import { Settings } from 'lucide-react'
import UserAvatar from '@components/Objects/UserAvatar'

export interface Auth {
  access_token: string
  isAuthenticated: boolean
  userInfo: any
  isLoading: boolean
}

function ProfileArea() {
  const PRIVATE_ROUTES = ['/course/*/edit', '/settings*', '/trail']
  const NON_AUTHENTICATED_ROUTES = ['/login', '/register']

  const router = useRouter()
  const pathname = usePathname()
  const [auth, setAuth] = React.useState<Auth>({
    access_token: '',
    isAuthenticated: false,
    userInfo: {},
    isLoading: true,
  })

  async function checkRefreshToken() {
    let data = await getNewAccessTokenUsingRefreshToken()
    if (data) {
      return data.access_token
    }
  }

  React.useEffect(() => {
    checkAuth()
  }, [pathname])

  async function checkAuth() {
    try {
      let access_token = await checkRefreshToken()
      let userInfo = {}
      let isLoading = false

      if (access_token) {
        userInfo = await getUserInfo(access_token)
        setAuth({ access_token, isAuthenticated: true, userInfo, isLoading })

        // Redirect to home if user is trying to access a NON_AUTHENTICATED_ROUTES route

        if (
          NON_AUTHENTICATED_ROUTES.some((route) =>
            new RegExp(`^${route.replace('*', '.*')}$`).test(pathname)
          )
        ) {
          router.push('/')
        }
      } else {
        setAuth({ access_token, isAuthenticated: false, userInfo, isLoading })

        // Redirect to login if user is trying to access a private route
        if (
          PRIVATE_ROUTES.some((route) =>
            new RegExp(`^${route.replace('*', '.*')}$`).test(pathname)
          )
        ) {
          router.push('/login')
        }
      }
    } catch (error) {}
  }
  return (
    <ProfileAreaStyled>
      {!auth.isAuthenticated && (
        <UnidentifiedArea>
          <ul>
            <li>
              <Link href="/login">Login</Link>
            </li>
            <li>
              <Link href="/signup">Sign up</Link>
            </li>
          </ul>
        </UnidentifiedArea>
      )}
      {auth.isAuthenticated && (
        <AccountArea>
          <div>{auth.userInfo.user_object.username}</div>
          <div>
            <UserAvatar width={40} />
          </div>
          <Link href={'/dash'}>
            <Settings />
          </Link>
        </AccountArea>
      )}
    </ProfileAreaStyled>
  )
}

const AccountArea = styled.div`
  padding-right: 20px;
  display: flex;
  place-items: center;

  div {
    margin-right: 10px;
  }
  img {
    width: 29px;
    border-radius: 19px;
  }
`

const ProfileAreaStyled = styled.div`
  display: flex;
  place-items: stretch;
  place-items: center;
`

const UnidentifiedArea = styled.div`
  display: flex;
  place-items: stretch;
  flex-grow: 1;

  ul {
    display: flex;
    place-items: center;
    list-style: none;
    padding-left: 20px;

    li {
      padding-right: 20px;
      font-size: 16px;
      font-weight: 500;
      color: #171717;
    }
  }
`

export default ProfileArea