import { useEffect, useRef, useState } from 'react'
import { useDispatch } from 'react-redux'
import Swal from 'sweetalert2'
import Axios from '../../axios'

import {
  Box,
  CircularProgress,
  Container,
  FormControl,
  MenuItem,
  Pagination,
  Select,
  Typography,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
} from '@mui/material'
import ShopCard from './shopCard'

const Shop = () => {
  const [option, setOption] = useState('all')
  const [products, setProducts] = useState([])
  const [categories, setCategories] = useState([])
  const [loading, setLoading] = useState(true)
  const [currentPage, setCurrentPage] = useState(1)
  const [totalData, setTotalData] = useState(0)
  const itemsPerPage = 10 // Adjust this according to your requirements

  const nameRef = useRef('')
  const categoryRef = useRef('')

  const dispatch = useDispatch()

  const handleChange = (event) => {
    const selectedValue = event.target.value
    setOption(selectedValue)
    categoryRef.current = selectedValue === 'all' ? '' : selectedValue // Set to an empty string if "All" is selected
    setCurrentPage(1) // Reset to first page when filter changes
  }

  const getCategories = async () => {
    try {
      const response = await Axios.get('/api/category/getCategories')
      setCategories(response.data?.categories || []) // Assuming the response has a categories property
    } catch (err) {
      Swal.fire({
        title: 'Error',
        text: 'Failed to fetch categories',
        icon: 'error',
        button: 'Retry',
        dangerMode: true,
      })
    }
  }

  const getProductsData = async () => {
    setLoading(true)
    try {
      const response = await Axios.get('/api/product/getAll/user/', {
        params: {
          page: currentPage,
          show: itemsPerPage,
          name: nameRef.current || '',
          category: categoryRef.current || '', // Send category only if it's not empty
        },
      })
      setProducts(response.data?.products || [])
      setTotalData(response.data?.total_data || 0)
    } catch (err) {
      const msg = err?.response?.data?.msg || 'Something went wrong!'
      Swal.fire({
        title: 'Error',
        text: msg,
        icon: 'error',
        button: 'Retry',
        dangerMode: true,
      })
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    getCategories() // Fetch categories on component mount
    getProductsData()
  }, [currentPage, option])

  const handlePageChange = (event, value) => {
    setCurrentPage(value)
  }

  return (
    <Container>
      <Typography sx={{ fontWeight: 'bold' }} variant="h4">
        Categories
      </Typography>
      <FormControl sx={{ width: '400px', mt: '1rem' }}>
        <Select
          labelId="category-select-label"
          id="category-select"
          value={option}
          onChange={handleChange}
        >
          <MenuItem value="all">All</MenuItem>
          {categories.map((category) => (
            <MenuItem key={category._id} value={category.categoryName}>
              {category.categoryName}
            </MenuItem>
          ))}
        </Select>
      </FormControl>

      <Box mt={3}>
        {loading ? (
          <CircularProgress />
        ) : (
          <>
            <TableContainer component={Paper} sx={{ mt: 3 }}>
              <Table>
                <TableHead>
                  <TableRow>
                    <TableCell sx={{ fontWeight: 'bold' }} align="center">
                      Product Name
                    </TableCell>
                    <TableCell sx={{ fontWeight: 'bold' }} align="center">
                      Category
                    </TableCell>
                    <TableCell sx={{ fontWeight: 'bold' }} align="center">
                      Price
                    </TableCell>
                    <TableCell sx={{ fontWeight: 'bold' }} align="center">
                      Action
                    </TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {products?.map((product) => (
                    <TableRow key={product._id}>
                      <TableCell size="small" align="center">
                        {product?.name}
                      </TableCell>
                      <TableCell size="small" align="center">
                        {product.category.categoryName}
                      </TableCell>
                      <TableCell size="small" align="center">
                        ₹{product.price}
                      </TableCell>
                      <TableCell size="small" align="center">
                        <ShopCard item={product} />
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </TableContainer>

            <Box mt={3} display="flex" justifyContent="center">
              <Pagination
                count={Math.ceil(totalData / itemsPerPage)}
                page={currentPage}
                onChange={handlePageChange}
                color="primary"
              />
            </Box>
          </>
        )}
      </Box>
    </Container>
  )
}

export default Shop