'use client'

// React Imports

// MUI Imports
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import CardHeader from '@mui/material/CardHeader'
import MenuItem from '@mui/material/MenuItem'

// Component Imports
import CustomIconButton from '@core/components/mui/IconButton'
import CustomTextField from '@core/components/mui/TextField'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '../../../../../redux-store'
import { setProductField } from '../../../../../redux-store/slices/product'
import { useCategories } from '../../../../../services/queries/categories'
import { Category } from '../../../../../types/services/category'

const ProductOrganize = () => {
  const dispatch = useDispatch()
  const { category_id, printer_type } = useSelector((state: RootState) => state.productReducer.productRequest)

  const { data: categoriesApi } = useCategories()

  const handleSelectChange = (field: any, value: any) => {
    dispatch(setProductField({ field, value }))
  }

  return (
    <Card>
      <CardHeader title='Organize' />
      <CardContent>
        <form onSubmit={e => e.preventDefault()} className='flex flex-col gap-6'>
          <div className='flex items-end gap-4'>
            <CustomTextField
              select
              fullWidth
              label='Category'
              value={category_id}
              onChange={e => handleSelectChange('category_id', e.target.value)}
            >
              {categoriesApi?.categories.length ? (
                categoriesApi?.categories.map((item: Category, index: number) => (
                  <MenuItem key={index} value={item.id}>
                    {item.name}
                  </MenuItem>
                ))
              ) : (
                <MenuItem disabled value=''>
                  Loading categories...
                </MenuItem>
              )}
            </CustomTextField>
            <CustomIconButton variant='tonal' color='primary' className='min-is-fit'>
              <i className='tabler-plus' />
            </CustomIconButton>
          </div>
          <CustomTextField
            select
            fullWidth
            label='Printer Type'
            value={printer_type}
            onChange={e => handleSelectChange('printer_type', e.target.value)}
          >
            <MenuItem value={`kitchen`}>Kitchen</MenuItem>
          </CustomTextField>
          {/* <CustomTextField select fullWidth label='Status' value={status} onChange={e => setStatus(e.target.value)}>
            <MenuItem value='Published'>Published</MenuItem>
            <MenuItem value='Inactive'>Inactive</MenuItem>
            <MenuItem value='Scheduled'>Scheduled</MenuItem>
          </CustomTextField>
          <CustomTextField fullWidth label='Enter Tags' placeholder='Fashion, Trending, Summer' /> */}
        </form>
      </CardContent>
    </Card>
  )
}

export default ProductOrganize
