import { Box, Button, FormControl, InputLabel, MenuItem, Select, Stack, TextField } from '@mui/material';
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import ImageUploader from '../components/ImageUploader';
import { useCreateGoodMutation, useGetCategoriesQuery } from '../store/api';


const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
  PaperProps: {
    style: {
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width: 250,
    },
  },
};

function EditGood({ name, category, price, description, goodImages, goodId, buttonText }) {
  const { data } = useGetCategoriesQuery();
  const [goodName, setGoodName] = useState(name || '');
  const [selectedCategory, setSelectedCategory] = useState(category || '');
  console.log(category)
  const [goodPrice, setGoodPrice] = useState(price || 0);
  const [goodDescription, setGoodDescription] = useState(description || '');
  const [images, setImages] = useState(goodImages || []);
  console.log(images);
  const navigate = useNavigate();
  const [createGood, result] = useCreateGoodMutation();


  const handleCategoryChange = (event) => {
    setSelectedCategory(event.target.value);
  };
  const handlePriceChange = (event) => {
    setGoodPrice(event.target.value);
  };
  const handleDescriptionChange = (event) => {
    setGoodDescription(event.target.value);
  }


  const handleSubmit = () => {

    const good = {
      name: goodName,
      categories: [selectedCategory],
      price: +goodPrice,
      description: goodDescription,
      images: images.map(image => ({ _id: image._id }))
    };
    if (goodId) {
      good._id = goodId;
    }
    createGood(good).then(response => {
      navigate('/admin/goods');
    });
  }


  return (
    <Box component='form' onSubmit={handleSubmit}>
      <Stack>
        <TextField
          sx={{ m: '0 auto 20px', width: '100%' }}
          value={goodName}
          onChange={(e) => setGoodName(e.target.value)}
          label='Good name'
        />
        <FormControl
          sx={{ m: '0 auto 20px', width: '100%' }}>
          <InputLabel>Category</InputLabel>
          <Select
            value={selectedCategory}
            onChange={handleCategoryChange}
            MenuProps={MenuProps}
            renderValue={(selected => selectedCategory?.name)}
          >
            {data?.CategoryFind?.map((category) => (
              <MenuItem key={category._id} value={category}>
                {category?.name}
              </MenuItem>
            ))}
          </Select>
        </FormControl>
        <TextField
          sx={{ m: '0 auto 20px', width: '100%' }}
          type='number'
          label='Price'
          value={goodPrice}
          onChange={handlePriceChange}
        />
        <TextField
          sx={{ m: '0 auto 20px', width: '100%' }}
          label="Description"
          multiline
          rows={4}
          value={goodDescription}
          onChange={handleDescriptionChange}
        />
        <ImageUploader passImages={goodImages}onChange={(images) => setImages(images)} />

        <Button variant="contained" sx={{ maxWidth: '200px', width: '100%', m: '20px auto 0' }} onClick={() => handleSubmit()}>{buttonText}</Button>
      </Stack>
    </Box>
  )
}

export default EditGood;