'use client'

import PropTypes from 'prop-types'
import Button from '@mui/material/Button'
import TextField from '@mui/material/TextField'
import Dialog from '@mui/material/Dialog'
import DialogActions from '@mui/material/DialogActions'
import DialogContent from '@mui/material/DialogContent'
import DialogContentText from '@mui/material/DialogContentText'
import DialogTitle from '@mui/material/DialogTitle'
import RichTextEditor from '../rich-text-editor/index.js'
import SessionExpired from '../session/session-expired.js'
import ListItems from './create/list-items.js'

export default function FormHandler({
  isOpen,
  setIsOpen,
  setError,
  setIsErrorAlertOpen,
  dialogText,
  title,
  label,
  hasMultiline = true,
  listItems,
  handleFormSubmit,
  countdownRef,
  selectValue,
  setSelectValue,
  contenu,
  collection
}) {
  const handleClose = () => {
    setIsOpen(false)
  }

  return (
    <>
      <Dialog
        open={isOpen}
        PaperProps={{
          component: 'form',
          onSubmit: handleFormSubmit,
        }}
        onClose={handleClose}
      >
        <DialogTitle>{title}</DialogTitle>
        <DialogContent sx={{color: 'white'}}>
          <DialogContentText sx={{color: 'white'}}>
            {dialogText}
          </DialogContentText>
          {listItems && listItems.length > 0 && (
            <ListItems
              items={listItems}
              selectLabel='Titre associé *'
              selectValue={selectValue}
              setSelectValue={setSelectValue}
            />
          )}
          {hasMultiline && collection === 'articles' ? (
            <RichTextEditor
              isRequired
              label={label}
              name='content'
              placeholder={`Rédigez ${label.toLowerCase()}...`}
              value={contenu || ''}
            />
          ) : (
            <TextField
              autoFocus
              required
              fullWidth
              defaultValue={contenu}
              multiline={Boolean(hasMultiline)}
              rows={hasMultiline ? 4 : 1}
              mt={2}
              id='content'
              name='content'
              label={label}
            />
          )}
        </DialogContent>
        <DialogActions>
          <Button variant='contained' color='error' onClick={handleClose}>Annuler</Button>
          <Button variant='contained' color='success' type='submit'>Valider</Button>
        </DialogActions>
      </Dialog>
      <SessionExpired ref={countdownRef} setError={setError} setIsErrorAlertOpen={setIsErrorAlertOpen} />
    </>
  )
}

FormHandler.propTypes = {
  isOpen: PropTypes.bool.isRequired,
  setIsOpen: PropTypes.func.isRequired,
  countdownRef: PropTypes.object,
  setError: PropTypes.func.isRequired,
  setIsErrorAlertOpen: PropTypes.func.isRequired,
  handleFormSubmit: PropTypes.func.isRequired,
  selectValue: PropTypes.string,
  setSelectValue: PropTypes.func.isRequired,
  dialogText: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  hasMultiline: PropTypes.bool,
  listItems: PropTypes.array.isRequired,
  contenu: PropTypes.string,
  collection: PropTypes.string
}