import React from 'react';
import { useState } from 'react';
import axios from "axios";
import { useNavigate } from 'react-router-dom';
import { useForm } from 'react-hook-form';
import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
// import { setNestedObjectValues } from 'formik';
import '../styles/Admin.css'
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';
import Avatar from '@mui/material/Avatar';
import Container from '@mui/material/Container';
import CssBaseline from '@mui/material/CssBaseline';
import { PedalBikeRounded } from '@mui/icons-material';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import "react-datetime/css/react-datetime.css";
import { Link } from 'react-router-dom';


export default function EditRental({preloadedValues}){
    let navigate = useNavigate();
    const theme = createTheme();
    const [error, setError] = useState("");

    const {register, handleSubmit, formState: {errors} } = useForm({
         defaultValues: preloadedValues
  
    });

        const successAlert = () => {
        toast.success("Rental has been updated successfully!", {
            position: "top-center",
            autoClose: 2000,
            hideProgressBar: false,
            closeOnClick: true,
            pauseOnHover: false,
            draggable: true,
            progress: undefined,    
        });
    }
    
 
        const onSubmit = (data) => {
        axios.put(`/api/admin/rentals/`, data, {
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('accessToken')
        }
    }).then((response) => {
            successAlert();
            navigate("/admin/rentals");
        })
                .catch((error) => {
                    setError(error.response.data.error ?? error.response.data.message ?? "There was a problem");
                });
    }



    return (
    <div > 
        <ThemeProvider theme={theme}>
            <Container sx={{ minHeight: "100vh" }} component="main" maxWidth="xs">
                <CssBaseline />
                 <main className="w-100 bg-grey rounded-3 shadow-sm">
                    <Box
                        sx={{
                            p: 5,
                            marginTop: 8,
                            display: 'flex',
                            flexDirection: 'column',
                            alignItems: 'center',
                        }}
                        className='contentBox rounded-3'
                    >
                       <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
                            <PedalBikeRounded />
                        </Avatar> 
                        <Typography component="h1" variant="h5">
                            Update Rental
                        </Typography>
                        <span className="text-danger">{error}</span>
            <form onSubmit={handleSubmit(onSubmit)}>
                <div className="form-group ">
                <p className="text-danger">{errors.startTime?.message}</p>
                <label>Start Time:</label>
                <input className="form-control col-3 mb-3" type="datetime-local" step="1" {...register ("startTime", {
                    required: "you should enter Start Time",
                    })} /> 
                <p className="text-danger">{errors.endTime?.message}</p>
                <label>End Time:</label>
                <input className="form-control col-3 mb-3" type="datetime-local" step="1" {...register ("endTime", {
                    })} /> 
                    <p className="text-danger">{errors.bikeId?.message}</p>
                     <label>Bike Id :</label>
                    <input type="number"  className="form-control col-3 mb-3" name="bikeId" {...register ("bikeId", {
                        required: "you should bikeId",
                        min: {value: 1, message: "Bike Id cannot be less than 1"},
                    })}/>
                    <p className="text-danger">{errors.userId?.message}</p>
                     <label>User Id :</label>
                    <input type="number"  className="form-control col-3 mb-3" name="userId" {...register ("userId", {
                        required: "you should enter userId",
                        min: {value: 1, message: "User Id cannot be less than 1"},
                    })}/>
                <Grid item xs={12}>

                </Grid>
                
                <Button
                    type="submit"
                    fullWidth
                    variant="contained"
                    sx={{ mt: 3, mb: 2 }}
                >
                    Update Rental
                </Button>
                <Link to={"/admin/rentals"}><button className="btn btn-secondary green-btn w-100">Back to Rentals</button></Link>
                </div>
            </form>
            </Box>
                </main>
                </Container>
                    </ThemeProvider>
        </div>
    )
}












