import React, { useState, useEffect } from 'react';
import { Box, Button, TextField, Typography } from '@mui/material';
import { useRestaurant } from '../../../../contexts/RestaurantContext';

const AddCategory = ({ onAdd, editingCategory }) => {
  const { restaurantId } = useRestaurant();
  const [productName, setProductName] = useState('');
  const [description, setDescription] = useState('');
  const [price, setPrice] = useState('');
  const [discount, setDiscount] = useState('');
  const [productImage, setProductImage] = useState(null);

  useEffect(() => {
    if (editingCategory) {
      setProductName(editingCategory.name || '');
      setDescription(editingCategory.description || '');
      setPrice(editingCategory.price || '');
      setDiscount(editingCategory.discount || '');
      setProductImage(editingCategory.icon || null);
    }
  }, [editingCategory]);

  const handleImageUpload = (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => setProductImage(reader.result);
      reader.readAsDataURL(file);
    }
  };

  const handleSubmit = () => {
    if (!productName) {
      alert("Please enter category name");
      return;
    }

    if (!restaurantId) {
      alert("Restaurant ID not set");
      return;
    }

    const payload = {
      name: productName,
      restaurant_id: restaurantId,
      description,
      price,
      discount,
      icon: productImage,
    };

    // فقط أرسل البيانات للمكون الأب
    if (onAdd) onAdd(payload);
  };

  return (
    <Box p={2} maxWidth={400} mx="auto">
      <Typography variant="body2" color="black" sx={{ fontWeight: 600, fontSize: '24px' }}>
        Category Name
      </Typography>
      <TextField
        fullWidth
        placeholder="Enter category name"
        value={productName}
        onChange={(e) => setProductName(e.target.value)}
        margin="normal"
        sx={{
          '& input': { fontWeight: 500, fontSize: '15px' },
          '& input::placeholder': { color: '#969BA7' },
          '& .MuiOutlinedInput-root': {
            borderRadius: '10px',
            transition: '0.3s',
            '&.Mui-focused fieldset': {
              borderColor: '#FF914D',
              boxShadow: '0 0 0 2px rgba(255,145,77,0.2)',
            },
          },
        }}
      />

      <Button
        variant="contained"
        fullWidth
        sx={{
          mt: 2,
          backgroundColor: '#FF914D',
          '&:hover': { backgroundColor: '#e57f3c' },
          borderRadius: 2,
          color: '#fff',
          textTransform: 'none',
          fontWeight: 600,
          fontSize: '16px',
        }}
        onClick={handleSubmit}
      >
        {editingCategory ? 'Update Category' : 'Add Category'}
      </Button>
    </Box>
  );
};

export default AddCategory;