// React Imports
import { useEffect, useState } from 'react'

// MUI Imports
import Button from '@mui/material/Button'
import Divider from '@mui/material/Divider'
import Drawer from '@mui/material/Drawer'
import IconButton from '@mui/material/IconButton'
import MenuItem from '@mui/material/MenuItem'
import Typography from '@mui/material/Typography'

// Third-party Imports

// Type Imports

// Components Imports
import CustomTextField from '@core/components/mui/TextField'
import { useCategoriesMutation } from '../../../../../services/mutations/categories'
import { Category, CategoryRequest } from '../../../../../types/services/category'

type Props = {
  open: boolean
  handleClose: () => void
  data: Category
}

const EditCategoryDrawer = (props: Props) => {
  // Props
  const { open, handleClose, data } = props

  const { mutate: updateCategory, isPending: isCreating } = useCategoriesMutation().updateCategory

  // States
  const [formData, setFormData] = useState<CategoryRequest>({
    name: '',
    description: '',
    business_type: ''
  })

  useEffect(() => {
    if (data) {
      setFormData({
        name: data.name,
        description: data.description,
        business_type: data.business_type
      })
    }
  }, [data])

  // Handle Form Submit
  const handleFormSubmit = (e: any) => {
    e.preventDefault()

    updateCategory({ id: data.id, payload: formData }, {
      onSuccess: () => {
        handleReset()
      }
    })
  }

  const handleInputChange = (e: any) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    })
  }

  // Handle Form Reset
  const handleReset = () => {
    handleClose()
    setFormData({
      name: '',
      description: '',
      business_type: ''
    })
  }

  return (
    <Drawer
      open={open}
      anchor='right'
      variant='temporary'
      onClose={handleReset}
      ModalProps={{ keepMounted: true }}
      sx={{ '& .MuiDrawer-paper': { width: { xs: 300, sm: 400 } } }}
    >
      <div className='flex items-center justify-between pli-6 plb-5'>
        <Typography variant='h5'>Edit Category</Typography>
        <IconButton size='small' onClick={handleReset}>
          <i className='tabler-x text-textSecondary text-2xl' />
        </IconButton>
      </div>
      <Divider />
      <div className='p-6'>
        <form onSubmit={handleFormSubmit} className='flex flex-col gap-5'>
          <CustomTextField
            fullWidth
            label='Title'
            name='name'
            value={formData.name}
            onChange={handleInputChange}
            placeholder='Minuman'
          />
          <CustomTextField
            select
            fullWidth
            label='Business Type'
            value={formData.business_type}
            onChange={e => setFormData({ ...formData, business_type: e.target.value })}
          >
            <MenuItem value='restaurant'>Restaurant</MenuItem>
          </CustomTextField>
          <CustomTextField
            fullWidth
            label='Description'
            value={formData.description || ''}
            name='description'
            onChange={handleInputChange}
            multiline
            rows={4}
            placeholder='Write a Comment...'
          />
          <div className='flex items-center gap-4'>
            <Button variant='contained' type='submit' disabled={isCreating}>
              {isCreating ? 'Updating...' : 'Update'}
            </Button>
            <Button variant='tonal' color='error' type='reset' onClick={handleReset}>
              Discard
            </Button>
          </div>
        </form>
      </div>
    </Drawer>
  )
}

export default EditCategoryDrawer
