# settings.py

REST_FRAMEWORK = {
    'DEFAULT_FILTER_BACKENDS': [
        'django_filters.rest_framework.DjangoFilterBackend',
    ],
   
}

# models.py
from django.db import models

class Product(models.Model):
    name = models.CharField(max_length=100)
    category = models.CharField(max_length=50)
    price = models.DecimalField(max_digits=10, decimal_places=2)
    created_at = models.DateTimeField(auto_now_add=True)
    description = models.TextField()
    in_stock = models.BooleanField(default=True)

    def __str__(self):
        return self.name


# views.py
from rest_framework import generics
from .models import Product
from .serializers import ProductSerializer
from django_filters.rest_framework import DjangoFilterBackend
from rest_framework.filters import SearchFilter, OrderingFilter

class ProductListCreateAPIView(generics.ListCreateAPIView):
    queryset = Product.objects.all()
    serializer_class = ProductSerializer
    filter_backends = [DjangoFilterBackend, SearchFilter, OrderingFilter]
    filterset_fields = {
        'name': ['exact', 'contains', 'startswith', 'endswith', 'icontains'],
        'category': ['exact', 'iexact', 'in', 'notin'],
        'price': ['exact', 'gt', 'gte', 'lt', 'lte', 'range'],
        'created_at': ['exact', 'range', 'year', 'month'],
        'description': ['exact', 'isnull'],
        'in_stock': ['exact']
    }
    search_fields = ['name', 'category', 'description']
    ordering_fields = ['name', 'price', 'created_at']

class ProductRetrieveUpdateDestroyAPIView(generics.RetrieveUpdateDestroyAPIView):
    queryset = Product.objects.all()
    serializer_class = ProductSerializer

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const ProductList = () => {
  const [filters, setFilters] = useState({
    name: '',
    name__contains: '',
    name__startswith: '',
    name__endswith: '',
    name__icontains: '',
    category: '',
    category__iexact: '',
    category__in: '',
    category__notin: '',
    price: '',
    price__gt: '',
    price__gte: '',
    price__lt: '',
    price__lte: '',
    price__range: '',
    created_at: '',
    created_at__range: '',
    created_at__year: '',
    created_at__month: '',
    description__isnull: '',
    in_stock: '',
    custom_filter_function: '',
  });

  const [filteredProducts, setFilteredProducts] = useState([]);
  const [ordering, setOrdering] = useState('');

  useEffect(() => {
    fetchProducts();
  }, [filters, ordering]);

  const fetchProducts = async () => {
    try {
      const response = await axios.get('/api/products/', {
        params: { ...filters, ordering },
      });
      setFilteredProducts(response.data);
    } catch (error) {
      console.error('Error fetching products:', error);
    }
  };

  const handleFilterChange = (e) => {
    const { name, value } = e.target;
    setFilters((prevFilters) => ({
      ...prevFilters,
      [name]: value,
    }));
  };

  const handleSortChange = (e) => {
    setOrdering(e.target.value);
  };

  return (
    <div>
      <h2>Product List</h2>
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={filters.name}
          onChange={handleFilterChange}
        />
      </label>
      <label>
        Category:
        <input
          type="text"
          name="category"
          value={filters.category}
          onChange={handleFilterChange}
        />
      </label>
      <label>
        Min Price:
        <input
          type="number"
          name="price__gte"
          value={filters.price__gte}
          onChange={handleFilterChange}
        />
      </label>
      <label>
        Max Price:
        <input
          type="number"
          name="price__lte"
          value={filters.price__lte}
          onChange={handleFilterChange}
        />
      </label>
      <label>
        Ordering:
        <select name="ordering" value={ordering} onChange={handleSortChange}>
          <option value="">None</option>
          <option value="name">Name (A-Z)</option>
          <option value="-name">Name (Z-A)</option>
          <option value="price">Price (Low to High)</option>
          <option value="-price">Price (High to Low)</option>
        </select>
      </label>
      <button onClick={fetchProducts}>Apply Filters</button>

      <ul>
        {filteredProducts.map((product) => (
          <li key={product.id}>
            {product.name} - {product.category} - ${product.price}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ProductList;