'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'
import { useDebounce } from 'use-debounce'
import { useMemo, useState } from 'react'
import { Autocomplete, CircularProgress } from '@mui/material'

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

  const [categoryInput, setCategoryInput] = useState('')
  const [categoryDebouncedInput] = useDebounce(categoryInput, 500)

  const { data: categoriesApi, isLoading: categoriesLoading } = useCategories({
    search: categoryDebouncedInput
  })

  const categoryOptions = useMemo(() => categoriesApi?.categories || [], [categoriesApi])

  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'>
            <Autocomplete
              options={categoryOptions}
              loading={categoriesLoading}
              fullWidth
              getOptionLabel={option => option.name}
              value={categoryOptions.find(p => p.id === category_id) || null}
              onInputChange={(event, newCategoryInput) => {
                setCategoryInput(newCategoryInput)
              }}
              onChange={(event, newValue) => {
                dispatch(setProductField({ field: 'category_id', value: newValue?.id || '' }))
              }}
              renderInput={params => (
                <CustomTextField
                  {...params}
                  className=''
                  label='Category'
                  fullWidth
                  InputProps={{
                    ...params.InputProps,
                    endAdornment: (
                      <>
                        {categoriesLoading && <CircularProgress size={18} />}
                        {params.InputProps.endAdornment}
                      </>
                    )
                  }}
                />
              )}
            />
          </div>
          <CustomTextField
            select
            fullWidth
            label='Printer Type'
            value={printer_type}
            onChange={e => handleSelectChange('printer_type', e.target.value)}
          >
            <MenuItem value={`kitchen`}>Kitchen</MenuItem>
          </CustomTextField>
        </form>
      </CardContent>
    </Card>
  )
}

export default ProductOrganize
