import React, { useState } from "react";
import { Navigate } from "react-router-dom";
import { Navbar, Nav, Container, Card, Form, Button } from "react-bootstrap";
const LoginPage = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [redirectTo, setRedirectTo] = useState(null);

  const handleUsernameChange = (event) => {
    setUsername(event.target.value);
  };

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);
  };

  const handleLogin = (event) => {
    event.preventDefault();
    // Implement your login logic here
    // Assume that you get a response object with the user's role as a property
    const response = { role: "admin" }; // replace with your authentication logic
    switch (response.role) {
      case "admin":
        setRedirectTo("/admin");
        break;
      case "manager":
        setRedirectTo("/manager");
        break;
      case "merchant":
        setRedirectTo("/merchants");
        break;
      default:
        console.log("Invalid role");
        break;
    }
  };

  if (redirectTo) {
    return <Navigate to={redirectTo} />;
  }

  return (
    <>
      <Navbar bg="dark" variant="dark" expand="lg">
        <Container>
          <Navbar.Brand>The Merchandisers</Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="me-auto">
              <Nav.Link>Contact Us</Nav.Link>
            </Nav>
            <Nav>
              <Nav.Link>Logout</Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>

      <Container className="mt-4 d-flex justify-content-center">
        <Card style={{ maxWidth: "500px" }}>
          <Card.Body>
            <h1>Product Smart</h1>
            <Form onSubmit={handleLogin}>
              <Form.Group controlId="formBasicUsername">
                <Form.Label></Form.Label>
                <Form.Control
                  type="text"
                  placeholder="enter username"
                  value={username}
                  onChange={handleUsernameChange}
                />
              </Form.Group>

              <Form.Group controlId="formBasicPassword">
                <Form.Label></Form.Label>
                <Form.Control
                  type="password"
                  placeholder="enter password"
                  value={password}
                  onChange={handlePasswordChange}
                />
              </Form.Group>
              <br />

              <Button variant="primary" type="submit">
                Login
              </Button>
              <br />
            </Form>
          </Card.Body>
        </Card>
      </Container>
      </>
  );
};

export default LoginPage;