import React, { useState } from 'react';
import axios from "axios";
import { useNavigate } from "react-router-dom";
import { useForm } from 'react-hook-form';
import { Link } from 'react-router-dom';
import 'react-toastify/dist/ReactToastify.css';
import { toast } from 'react-toastify';
import '../styles/Admin.css'

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


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

    });

    const successAlert = () => {
        toast.success("Station 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/stations/${preloadedValues.id}`, data, {
            headers: {
                Authorization: 'Bearer ' + localStorage.getItem('accessToken')
            }
        }).then((response) => {
            successAlert();
            navigate("/admin/stations");
        })
            .catch((error) => {
                setError(error.response.data.error ?? error.response.data.message ?? "There was a problem");

            });
    };


    return (
        <div className='full-vh'>
            <div className="container border border-1 mt-5 p-3 bg-white">
                <h3>Edit Station </h3>
                <span className="text-danger list-unstyled">{error}</span>
                <form onSubmit={handleSubmit(onSubmit)}>
                    <div className="form-group ">
                        <p className="text-danger">{errors.name?.message}</p>
                        <label>Name:</label>
                        <input
                            className="form-control col-3 mb-3" type="text" name="name" {...register("name", {
                                required: "Station name is required",
                                minLength: { value: 1, message: "Name must be at least 1 character" },
                                maxLength: { value: 100, message: "Name cannot be more than 100 characters" }
                            })}
                        />


                        {currStation.id !== 1 && (
                            <>
                                <p className="text-danger">{errors.totalSlots?.message}</p>
                                <label>Number of Slots:</label>
                                <input
                                    className="form-control col-3 mb-3" type="number" name="totalSlots" {...register("totalSlots", {
                                        required: "Total number of slots is required",
                                        min: { value: 0, message: "Number of slots cannot be negative" },
                                        max: { value: 30, message: "Number of slots cannot exceed 30" }
                                    })}
                                />
                            </>
                        )}

                        <p className="text-danger">{errors.latitude?.message}</p>
                        <label>Latitude:</label>
                        <input
                            className="form-control col-3 mb-3" type="text" name="latitude" {...register("latitude", {
                                required: "Latitude is required",
                                minLength: { value: 1, message: "Latitude must be at least 1 character" },
                                maxLength: { value: 100, message: "Latitude cannot be more than 100 characters" }
                            })}
                        />
                        <p className="text-danger">{errors.longitude?.message}</p>
                        <label>Longitude:</label>
                        <input
                            className="form-control col-3 mb-3" type="text" name="longitude" {...register("longitude", {
                                required: "Longitude is required",
                                minLength: { value: 1, message: "Longitude must be at least 1 character" },
                                maxLength: { value: 100, message: "Longitude cannot be more than 100 characters" }
                            })}
                        />
                        <p className="text-danger">{errors.status?.message}</p>

                        {/* 
            <label>Status:</label>
            <select className = "form-control" name="status" {...register ("status", {
                required: "Status is required", 
            })}>
                <option value="ACTIVE">ACTIVE</option>
                <option value="DISABLED">DISABLED</option>
            </select> */}
                        <Link to={"/admin/stations"}><button className="btn btn-secondary green-btn m-2">Back to Stations</button></Link>
                        <button type="submit" className="btn btn-primary ">Update Station</button>
                    </div>
                </form>


            </div>
        </div>
    )
}