'use client'

import PropTypes from 'prop-types'
import Box from '@mui/material/Box'
import SpeedDial from '@mui/material/SpeedDial'
import SpeedDialIcon from '@mui/material/SpeedDialIcon'
import SpeedDialAction from '@mui/material/SpeedDialAction'
import ArticleIcon from '@mui/icons-material/Article'
import TitleIcon from '@mui/icons-material/Title'
import {useState} from 'react'
import HandleCreate from './handle-create.js'
import AuthAlert from '@/components/auth-form/auth-alert.js'

const actions = [
  {id: 'titres', icon: <TitleIcon />, name: 'Créer un titre'},
  {id: 'articles', icon: <ArticleIcon />, name: 'Créer un article'}
]

export default function Create({session}) {
  const [collection, setCollection] = useState(null)
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [isErrorAlertOpen, setIsErrorAlertOpen] = useState(false)
  const [isSuccessAlertOpen, setIsSuccessAlertOpen] = useState(false)
  const [error, setError] = useState('')
  const [success, setSuccess] = useState('')

  const handleTitresDialog = collection => {
    setCollection(collection)
    setIsDialogOpen(true)
  }

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

      {success && <AuthAlert
        isOpen={isSuccessAlertOpen}
        setIsOpen={setIsSuccessAlertOpen}
        message={success}
        severity='success'
      />}

      <Box sx={{height: 18, transform: 'translateZ(0px)', flexGrow: 1}}>
        <SpeedDial
          FabProps={{color: 'success'}}
          direction='left'
          ariaLabel='Créer un titre ou un article'
          sx={{position: 'absolute', bottom: 18, right: 0}}
          icon={<SpeedDialIcon />}
        >
          {actions.map(({id, icon, name}) => (
            <SpeedDialAction
              key={name}
              icon={icon}
              tooltipTitle={name}
              onClick={() => handleTitresDialog(id)}
            />
          ))}
        </SpeedDial>
      </Box>
      {collection && (
        <HandleCreate
          session={session}
          isOpen={isDialogOpen}
          setIsOpen={setIsDialogOpen}
          setError={setError}
          setSuccess={setSuccess}
          setIsErrorAlertOpen={setIsErrorAlertOpen}
          setIsSuccessAlertOpen={setIsSuccessAlertOpen}
          collection={collection}
        />
      )}
    </>
  )
}

Create.propTypes = {
  session: PropTypes.object
}