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

// MUI Imports
import CardContent from '@mui/material/CardContent'
import Grid from '@mui/material/Grid2'
import MenuItem from '@mui/material/MenuItem'

// Type Imports

// Component Imports
import CustomTextField from '@core/components/mui/TextField'
import { ProductsQueryParams } from '../../../../../services/queries/products'
import { Product } from '../../../../../types/services/product'
import { useCategories } from '../../../../../services/queries/categories'
import { useDebounce } from 'use-debounce'
import { Autocomplete, CircularProgress } from '@mui/material'

type ProductStockType = { [key: string]: boolean }

const TableFilters = ({
  filter,
  setFilter
}: {
  filter: ProductsQueryParams
  setFilter: (data: ProductsQueryParams) => void
}) => {
  // States
  const [stock, setStock] = useState('')

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

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

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

  const handleStatusChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFilter({ ...filter, is_active: e.target.value === 'Active' ? true : e.target.value === 'Inactive' ? false : '' })
  }

  return (
    <CardContent>
      <Grid container spacing={6}>
        <Grid size={{ xs: 12, sm: 4 }}>
          <CustomTextField
            select
            fullWidth
            id='select-status'
            value={filter.is_active ? 'Active' : filter.is_active === false ? 'Inactive' : ''}
            onChange={handleStatusChange}
            slotProps={{
              select: { displayEmpty: true }
            }}
          >
            <MenuItem value=''>Select Status</MenuItem>
            <MenuItem value='Active'>Active</MenuItem>
            <MenuItem value='Inactive'>Inactive</MenuItem>
          </CustomTextField>
        </Grid>
        <Grid size={{ xs: 12, sm: 4 }}>
          <Autocomplete
            options={categoryOptions}
            loading={categoriesLoading}
            fullWidth
            getOptionLabel={option => option.name}
            value={categoryOptions.find(p => p.id === filter.category_id) || null}
            onInputChange={(event, newCategoryInput) => {
              setCategoryInput(newCategoryInput)
            }}
            onChange={(event, newValue) => {
              setFilter({ ...filter, category_id: newValue?.id || '' })
            }}
            renderInput={params => (
              <CustomTextField
                {...params}
                fullWidth
                placeholder='Search Category'
                InputProps={{
                  ...params.InputProps,
                  endAdornment: (
                    <>
                      {categoriesLoading && <CircularProgress size={18} />}
                      {params.InputProps.endAdornment}
                    </>
                  )
                }}
              />
            )}
          />
        </Grid>
        <Grid size={{ xs: 12, sm: 4 }}>
          <CustomTextField
            select
            fullWidth
            id='select-stock'
            value={stock}
            onChange={e => setStock(e.target.value as string)}
            slotProps={{
              select: { displayEmpty: true }
            }}
          >
            <MenuItem value=''>Select Stock</MenuItem>
            <MenuItem value='In Stock'>In Stock</MenuItem>
            <MenuItem value='Out of Stock'>Out of Stock</MenuItem>
          </CustomTextField>
        </Grid>
      </Grid>
    </CardContent>
  )
}

export default TableFilters
