import { useState } from "react";
import { Link } from "react-router-dom";
import { Button, Modal, ModalHeader, ModalBody } from "reactstrap";

import styles from "./NavbarMenu.module.scss";
import { Create, Login } from "../../";

export function NavbarMenu() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const [isRegister, setIsRegister] = useState(false);

  const toggleModal = () => {
    setIsModalOpen(!isModalOpen);
  };

  const toggleRegister = () => {
    setIsRegister(!isRegister);
  };

  return (
    <div className={styles.navMenuContainer}>
      <Link to="/">
        <img src="/assets/logo.png" className={styles.logo} alt="logo" />
      </Link>
      <div className={styles.navLinksContainer}>
        <ul className={styles.navLinks}>
          <li className={styles.navLinkContainer}>
            <Link to="/" className={styles.navLink}>
              Home
            </Link>
          </li>
          <li className={styles.navLinkContainer}>
            <Link to="/trends" className={styles.navLink}>
              Trends
            </Link>
          </li>
          <li className={styles.navLinkContainer}>
            <Link to="/guides" className={styles.navLink}>
              Guides
            </Link>
          </li>
          <li className={styles.navLinkContainer}>
            <Link to="/news" className={styles.navLink}>
              News
            </Link>
          </li>
        </ul>
      </div>
      <div>
        <Button className={styles.signup} onClick={toggleModal}>
          Sign Up
        </Button>
        <Modal isOpen={isModalOpen} toggle={toggleModal}>
          <div className="m-header">
            <div className={styles.exit} onClick={toggleModal}>
              &times;
            </div>
            <ModalHeader toggle={toggleModal} className={styles.modalHeader}>
              Sign Up
            </ModalHeader>
          </div>
          <ModalBody>
            <Login />
          </ModalBody>
          <div className="modal-footer">
            <Button className={styles.cAccount} onClick={toggleModal}>
              Login
            </Button>
            <Button className={styles.login} onClick={toggleRegister}>
              Create Account
            </Button>
            <Modal isOpen={isRegister} toggle={toggleRegister}>
              <div className="m-header">
                <div className={styles.exit} onClick={toggleRegister}>
                  &times;
                </div>
                <ModalHeader
                  toggle={toggleRegister}
                  className={styles.modalHeader}
                >
                  Create Account
                </ModalHeader>
              </div>
              <ModalBody className={styles.modBody}>
                <Create />
              </ModalBody>
              <div className="modal-footer">
                <Button className={styles.login}>Register</Button>
                <Button className={styles.cAccount} onClick={toggleRegister}>
                  Cancel
                </Button>
              </div>
            </Modal>
          </div>
        </Modal>
      </div>
    </div>
  );
}
