'use client'

import {useState, useRef, useEffect} from 'react'
import PropTypes from 'prop-types'
import Grid from '@mui/material/Grid2'
import Typography from '@mui/material/Typography'
import HomeIcon from '@mui/icons-material/Home'
import Box from '@mui/material/Box'
import AuthAlert from '../auth-form/auth-alert.js'
import SessionExpired from '../session/session-expired.js'
import {Loading} from '../loading.js'
import ListVersions from './list-versions.js'
import {listVersions} from '@/lib/directus.js'
import Sign from '@/components/session/sign.js'

const navButton = {
  title: 'Accueil',
  path: '/',
  color: 'success',
  icon: <HomeIcon fontSize='large' />
}

export default function GetVersions({session}) {
  const {accessToken, userId} = session.user

  const [versions, setVersions] = useState(null)
  const [isErrorAlertOpen, setIsErrorAlertOpen] = useState(false)
  const [error, setError] = useState('')
  const countdownRef = useRef()

  useEffect(() => {
    async function fetchVersions() {
      const data = await listVersions({
        accessToken, userId, countdownRef, setError, setIsErrorAlertOpen
      })
      setVersions(data)
    }

    fetchVersions()
  }, [accessToken, userId])

  if (!versions) {
    return (
      <>
        {error && <AuthAlert
          isOpen={isErrorAlertOpen}
          setIsOpen={setIsErrorAlertOpen}
          message={error}
          severity='error'
        />}
        <Loading />
        <SessionExpired ref={countdownRef} setError={setError} setIsErrorAlertOpen={setIsErrorAlertOpen} />
      </>
    )
  }

  const titres = versions?.filter(({collection}) => collection === 'titres')
  const articles = versions?.filter(({collection}) => collection === 'articles')

  return (
    <>
      {error && <AuthAlert
        isOpen={isErrorAlertOpen}
        setIsOpen={setIsErrorAlertOpen}
        message={error}
        severity='error'
      />}

      <Sign session={session} navButton={navButton} />

      <Box
        sx={{
          border: '2px solid #ccc',
          borderRadius: '8px',
          padding: 1,
          my: 4
        }}
      >

        <Typography
          gutterBottom
          variant='h5'
          component='h2'
          textAlign='center'
          sx={{display: 'block', fontWeight: 'bold', textTransform: 'uppercase'}}
        >
          Liste des versions
        </Typography>

        <Grid
          container
          spacing={2}
          justifyContent={
            (titres.length > 0 && articles.length === 0) || (articles.length > 0 && titres.length === 0)
              ? 'center'
              : 'flex-start'
          }
        >
          {titres.length > 0 && (
            <Grid size={{xs: 12, md: articles.length > 0 ? 6 : 12}}>
              <ListVersions
                collection='Titres'
                data={titres}
                accessToken={accessToken}
                userId={userId}
                setError={setError}
                setIsErrorAlertOpen={setIsErrorAlertOpen}
              />
            </Grid>
          )}

          {articles.length > 0 && (
            <Grid size={{xs: 12, md: titres.length > 0 ? 6 : 12}}>
              <ListVersions
                collection='Articles'
                data={articles}
                accessToken={accessToken}
                userId={userId}
                setError={setError}
                setIsErrorAlertOpen={setIsErrorAlertOpen}
              />
            </Grid>
          )}
        </Grid>
      </Box>
      <SessionExpired ref={countdownRef} setError={setError} setIsErrorAlertOpen={setIsErrorAlertOpen} />
    </>
  )
}

GetVersions.propTypes = {
  session: PropTypes.object.isRequired
}