import React, { useState } from "react";
import { Route } from "react-router-dom";
import { useSelector } from "react-redux";
import { LinkContainer } from "react-router-bootstrap";
import PropTypes from "prop-types";

import Nav from "react-bootstrap/Nav";
import Navbar from "react-bootstrap/Navbar";
import NavDropdown from "react-bootstrap/NavDropdown";

export const AppNavBar = () => {
  const [expanded, setExpanded] = useState(false);

  const username = useSelector((state) => state.user.username);
  const isAdmin = useSelector((state) => state.user.isAdmin);

  return (
    <Navbar
      fixed="top"
      collapseOnSelect
      bg="dark"
      variant="dark"
      expanded={expanded}
      expand="sm"
      onToggle={() => setExpanded(!expanded)}
    >
      <LinkContainer to="/">
        <Navbar.Brand>Canapé</Navbar.Brand>
      </LinkContainer>
      <Navbar.Toggle />
      <Navbar.Collapse>
        <Nav className="mr-auto">
          <MoviesDropdown />
          <ShowsDropdown />
          <WishlistDropdown />
          <TorrentsDropdown />
        </Nav>
        <Nav>
          <Route
            path="/movies"
            render={(props) => (
              <Search
                placeholder="Search movies"
                path="/movies/search"
                history={props.history}
                setExpanded={setExpanded}
              />
            )}
          />
          <Route
            path="/shows"
            render={(props) => (
              <Search
                placeholder="Search shows"
                path="/shows/search"
                history={props.history}
                setExpanded={setExpanded}
              />
            )}
          />
          <UserDropdown username={username} isAdmin={isAdmin} />
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
};
AppNavBar.propTypes = {
  history: PropTypes.object,
};

const Search = ({ path, placeholder, setExpanded, history }) => {
  const [search, setSearch] = useState("");

  const handleSearch = (ev) => {
    ev.preventDefault();
    history.push(`${path}/${encodeURI(search)}`);
    setExpanded(false);
  };

  return (
    <div className="navbar-form navbar-right">
      <form className="input-group" onSubmit={(ev) => handleSearch(ev)}>
        <input
          className="form-control"
          placeholder={placeholder}
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />
      </form>
    </div>
  );
};
Search.propTypes = {
  placeholder: PropTypes.string.isRequired,
  setExpanded: PropTypes.func.isRequired,
  path: PropTypes.string.isRequired,
  history: PropTypes.object,
};

const MoviesDropdown = () => (
  <NavDropdown title="Movies" id="navbar-movies-dropdown">
    <LinkContainer to="/movies/explore/trakttv/trending">
      <NavDropdown.Item>Discover</NavDropdown.Item>
    </LinkContainer>
    <LinkContainer to="/movies/polochon">
      <NavDropdown.Item>My movies</NavDropdown.Item>
    </LinkContainer>
  </NavDropdown>
);

const ShowsDropdown = () => (
  <NavDropdown title="Shows" id="navbar-shows-dropdown">
    <LinkContainer to="/shows/explore/trakttv/trending">
      <NavDropdown.Item>Discover</NavDropdown.Item>
    </LinkContainer>
    <LinkContainer to="/shows/polochon">
      <NavDropdown.Item>My shows</NavDropdown.Item>
    </LinkContainer>
  </NavDropdown>
);

const UserDropdown = (props) => (
  <Nav>
    <NavDropdown title={props.username} alignRight>
      {props.isAdmin && (
        <LinkContainer to="/admin">
          <NavDropdown.Item>Admin Panel</NavDropdown.Item>
        </LinkContainer>
      )}
      <LinkContainer to="/users/profile">
        <NavDropdown.Item>Profile</NavDropdown.Item>
      </LinkContainer>
      <LinkContainer to="/users/tokens">
        <NavDropdown.Item>Tokens</NavDropdown.Item>
      </LinkContainer>
      <LinkContainer to="/users/logout">
        <NavDropdown.Item>Logout</NavDropdown.Item>
      </LinkContainer>
    </NavDropdown>
  </Nav>
);
UserDropdown.propTypes = {
  username: PropTypes.string.isRequired,
  isAdmin: PropTypes.bool.isRequired,
};

const WishlistDropdown = () => (
  <NavDropdown title="Wishlist" id="navbar-wishlit-dropdown">
    <LinkContainer to="/movies/wishlist">
      <NavDropdown.Item>Movies</NavDropdown.Item>
    </LinkContainer>
    <LinkContainer to="/shows/wishlist">
      <NavDropdown.Item>Shows</NavDropdown.Item>
    </LinkContainer>
  </NavDropdown>
);

const TorrentsDropdown = () => {
  const title = <TorrentsDropdownTitle />;
  return (
    <NavDropdown title={title} id="navbar-wishlit-dropdown">
      <LinkContainer to="/torrents/list">
        <NavDropdown.Item>Downloads</NavDropdown.Item>
      </LinkContainer>
      <LinkContainer to="/torrents/search">
        <NavDropdown.Item>Search</NavDropdown.Item>
      </LinkContainer>
    </NavDropdown>
  );
};

const TorrentsDropdownTitle = () => {
  const count = useSelector((state) => state.torrents.count);
  if (count === 0) {
    return <span>Torrents</span>;
  }

  return (
    <span>
      Torrents
      <span className="badge badge-info badge-pill ml-1">{count}</span>
    </span>
  );
};