import Router, { useRouter } from 'next/router'
import { createContext, ReactNode, useEffect, useState } from 'react';
import api from '../services/api'
import Cookies from 'js-cookie'

interface AuthContextData {
  signUp(username: string, email: string, password: string): void
  signIn(email: string, password: string): void
  signOut(): void
  user: {
    username: string
    email: string
  }
  error: string
  loading: boolean
  token: string
}
interface AuthProviderProps {
  children: ReactNode
}
type User = {
  username: string
  email: string
}
export const AuthContext = createContext({} as AuthContextData)

export function AuthProvider({ children }: AuthProviderProps) {
  const [user, setUser] = useState()
  const [token, setToken] = useState("")
  const [error, setError] = useState(null)
  const { pathname, events } = useRouter()
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    async function getStorageData() {
      const Storagetoken = await Cookies.get("token")
      const Storageuser = await Cookies.get("user")
      api.defaults.headers.common['Authorization'] = `Bearer ${Storagetoken}`
      if (Storageuser && Storagetoken) {
        setUser(JSON.parse(Storageuser))
        setLoading(false)
        setToken(Storagetoken)
        if (pathname === '/signup' || pathname === '/signin') {
          await Router.push('/creategroup')
        }
      } else {
        if (pathname === '/groups' || pathname === '/members' || pathname === '/creategroup') {
          Router.push('/signin')
        }
      }

    } getStorageData()
  }, [])

  useEffect(() => {
    // Check that a new route is OK
    const handleRouteChange = url => {
      if (url !== '/' && !user) {
        window.location.href = '/signin'
      }
    }

    // Check that initial route is OK
    if (pathname !== '/' && user === null) {
      window.location.href = '/'
    }

    // Monitor routes
    events.on('routeChangeStart', handleRouteChange)
    return () => {
      events.off('routeChangeStart', handleRouteChange)
    }
  }, [user])
  async function signUp(username, email, password) {
    try {

      const response = await api.post('/admin/signup', {
        username,
        email,
        password
      })
      const token = response.data.token.token
      let user = response.data.user
      setUser(user)
      setToken(token)
      await Cookies.set("token", token)
      await Cookies.set("user", JSON.stringify(user))
      api.defaults.headers.common["Authorization"] = `Bearer ${token}`
      Router.push('/creategroup')
    } catch (err) {
      setError("Esse usuário já existe")
    }
  }

  async function signIn(email, password) {
    try {

      const response = await api.post('/admin/login', {
        email,
        password
      })

      const token = response.data.token.token
      const user = response.data.user

      setUser(user)
      setToken(token)

      await Cookies.set("token", token)
      await Cookies.set("user", JSON.stringify(user))

      api.defaults.headers.common["Authorization"] = `Bearer ${token}`

      Router.push('/creategroup')
    }
    catch (err) {
      setError("Email ou senha inválidos")
    }
  }
  async function signOut() {
    Cookies.remove("user")
    Cookies.remove("token")
    setToken("")
    setUser(null)
    Router.push('/signin')
  }
  return (
    <AuthContext.Provider value={{
      signUp,
      signIn,
      signOut,
      user,
      error,
      loading,
      token
    }}>

      {children}
    </AuthContext.Provider>
  )
}