import { Layout } from '@/components/layouts/Layout'
import UserStore from '@/store/UserStore'
import { GetServerSidePropsContext } from 'next'
import { useRouter } from 'next/router'
import { League } from '../../types'

export default function Home({ leagues }: { leagues: League[] }) {
  const { user } = UserStore()
  const router = useRouter()
  //   if (user?.expirationDateTime) return router.push('login')
  console.log(user)
  console.log(leagues)

  return (
    <Layout>
      <div className="flex justify-center">
        <div className="w-full max-w-3xl">
          <div className="flex flex-col justify-center items-center">
            Bienvenido {user?.user?.firstName} a la home
            <div className="bg-gray-300 p-4">
              {leagues?.map((league: League) => (
                <div className="bg-white">
                  <h3>{league.name}</h3>
                  <div>
                    <p>{league.description}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </Layout>
  )
}

export async function getServerSideProps(context: GetServerSidePropsContext) {
  //   console.log(`${process.env.BASE_URL}`)
  //   const url = `${process.env.BASE_URL}`
  try {
    const res = await fetch(`http://79df-91-126-43-216.ngrok-free.app/api/public/league`, { method: 'GET' })
    const data = await res.json()
    const leagues: League[] = data.leagues
    console.log('Datos recibidos', leagues)
    return {
      props: {
        leagues
      }
    }
  } catch (error) {
    console.error(error)
    return {
      props: {
        leagues: []
      }
    }
  }
}

// {
//     id: 9,
//     name: 'La Primera Liga',
//     logo: '/src/files/league/logo.jpg',
//     description: 'Liga de pruebas.',
//     pointsPerWin: 3,
//     pointsPerDraw: 2,
//     pointsPerLoss: 1,
//     matchesBetweenTeams: null,
//     blockedMatchDates: null,
//     active: null,
//     seasonIdList: [],
//     presidentId: null,
//     createdAt: '2023-10-08 02:12:02'
//   },

// {
//     token:
//       'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJpYXQiOjE3MTU5MDE0ODYsImV4cCI6MTcxNTkwMzI4Niwicm9sZXMiOlsiUk9MRV9VU0VSIl0sInVzZXJuYW1lIjoiY2VicmVpcm9tYUBnbWFpbC5jb20ifQ.ShKuCFMYV6Q4F-1GnCqZgwbLk9HhrNtURsztgOfW8eQhLMEar_XL0yZHTzKa_ukH2xcRLhWwYc_kqLiwD8gYxVW72gPYTpgT05oF0CRpg1Eof70YZm-XNz1MmqsoBAf0X8mSxq6W-E6fJLWH18SGoCTuBJxv9qVdpmSg0e1H14t6ZEwavt-jMEjLJx_8O-tWSUQk80FDOusH8IOSLlq6o0hnHEEkUy8QyvORGp4mbCZOVRJEIHDPEKL0uDYvbNmrpQUGjD5kOGnWbdKutViaVphE63rPlESK1V7e9dN6jOlBtKzpQZNmqm9u6d1AVTUxQNZXEQR59r2CEspwqIU7Nw',
//     expirationDateTime: '2024-05-17 01:48:06',
//     user: {
//       id: 11,
//       email: 'cebreiroma@gmail.com',
//       firstName: 'Manuel',
//       lastName: 'Manuel',
//       phone: '638514511',
//       profilePicture: null,
//       birthday: '1989-04-09',
//       noteList: [],
//       notificationList: []
//     }
//   }
