import React, { useState } from "react";
import Header from "../components/Header";
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import Footer from "../components/Footer";
import axios from "axios";
import { Link } from "react-router-dom";
import Cookies from "js-cookie"
export default function SigninScreen() {
  const [formData, setFormData] = useState({ email: "", password: "" });
  function handleInputChange(event) {
    const name = event.target.name;
    const password = event.target.value;
    console.log("password is ", password)
    setFormData({ ...formData, [name]: password });
    // setFormData({ ...formData, [name]: value });
  }
  function handleSubmit(event) {
    event.preventDefault();
    console.log("here");
    axios
      .post("http://localhost:3000/user/login", formData)
      .then((response) => {
        console.log("response data", response.data)
        Cookies.set('name', response.data.userName, { expires: 7 });
        Cookies.set("userID", response.data.userID, {expires: 36000000})
        console.log("Give me cookies username", Cookies.get('name'))
        console.log("Form submitted successfully");
      })
      .catch((error) => {
        console.error("Form submission error", error);
      });
  }
  return (
    <div>
      <Header />
      <main>
        <img id="login-img" src="./images/login.jpg" alt="login"></img>
        <div className="login-form">
          <h1>Login</h1>
          <Form onSubmit={handleSubmit}>
            <Form.Group className="mb-5" controlId="formBasicEmail">
              <Form.Label>Email address</Form.Label>
              <Form.Control
                type="email"
                name="email"
                placeholder="Enter email"
                onChange={handleInputChange}
              />
            </Form.Group>

            <Form.Group className="mb-5" controlId="formBasicPassword">
              <Form.Label>Password</Form.Label>
              <Form.Control
                type="password"
                name="password"
                placeholder="Password"
                onChange={handleInputChange}
              />
            </Form.Group>
            <Link to="/signup">
              {" "}
              <Button id="signup1" variant="primary">
                Signup
              </Button>
            </Link>

            <Button id="login1" variant="primary" type="submit">

              Login
            </Button>
          </Form>
        </div>
      </main>
      <Footer />
    </div>
  );
}
