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 { useGetCategoriesQuery } from '../../store/api';
import Title from '../../components/Title';
import ImageUploader from '../../components/ImageUploader';


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

function CreateGoodPage() {
  const { data } = useGetCategoriesQuery();
  const [goodName, setGoodName] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('');
  const [goodPrice, setGoodPrice] = useState(0);
  const [goodDescription, setGoodDescription] = useState('');
  const navigate = useNavigate();
  const dispatch = useDispatch();


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

  }


  return (
    <Box sx={{ maxWidth: '450px', m: '20px auto', width: '100%' }} >
      <Title>Create good</Title>
      <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}
            >
              {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 />

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

export default CreateGoodPage;