import { Box, Button, Container, CssBaseline, Grid, TextField, Typography } from "@mui/material"
import { useState } from "react"
import { useSetGoodUpsertMutation } from "../../store/categoriesApi"
import ImageUploader from "../ImageUploader"
import RecursiveTreeView from "./pages/MuiTreeWithCheckBox"


const AddNewGood = () => {
    const [selected, setSelect] = useState([])
    const [images, setImages] = useState([])
    const [GoodUpsert, result] = useSetGoodUpsertMutation()





    const handlerGoodUpsert = (event) => {
        event.preventDefault();
        const data = new FormData(event.currentTarget);
        
        const goodToUpsert = {
            name: data.get('goodsName') || null,
            price: +data.get('goodsPrice') || null,
            description: data.get('goodDescription') || null,
            categories: selected.map(id=>({ _id: id })),
            images: images.map(image=>({_id: image._id}))
        }
        GoodUpsert(goodToUpsert).then(res => console.log(res))
    }

    return (
        <>
        <Container component="main" maxWidth="sm">
        <CssBaseline />
        <Box
          sx={{
            marginTop: 2,
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
          }}
        >

          <Typography component="h1" variant="h5">
            Создание товара
          </Typography>
          <Box component="form" noValidate onSubmit={handlerGoodUpsert} sx={{ mt: 3 }}>
            <Grid container spacing={2}>
              <Grid item xs={12} sm={6}>
                <TextField
                  name="goodsName"
                  required
                  fullWidth
                  id="goodsName"
                  label="Название"
                  autoFocus
                />
              </Grid>
              <Grid item xs={12} sm={6}>
                <TextField
                  required
                  fullWidth
                  id="goodsPrice"
                  label="Цена, грн."
                  name="goodsPrice"
                  type={"number"}
                />
              </Grid>

              <Grid item xs={12}>
                <TextField
                  fullWidth
                  multiline
                  rows={10}
                  name="goodDescription"
                  label="Описание"
                  id="goodDescription"
                />
              </Grid>

            </Grid>
            <Grid item xs={12} mt={1}>
            <Typography mb={2}>Выберите категорию: </Typography>
            <Box maxHeight={"300px"} overflow={"scroll"}>
            <RecursiveTreeView callback={(arr)=>setSelect(arr)}/>
            </Box>
            </Grid>
            <Grid item xs={12} mt={1}>
            <Typography mb={2}>Добавьте изображения товара:</Typography>
            <ImageUploader onChange={(images)=>setImages(images)}/>
            </Grid>
            
            <Button
              type="submit"
              fullWidth
              variant="contained"
              sx={{ mt: 3, mb: 2 }}
            >
              Создать товар
            </Button>

          </Box>
        </Box>
      </Container>
      
        </>
        
    )
}

export default AddNewGood