import React, { useState } from "react";
import { Route } from "react-router-dom";
import { connect } 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";

const mapStateToProps = (state) => {
  let torrentCount = 0;
  if (
    state.torrentStore.has("torrents") &&
    state.torrentStore.get("torrents") !== undefined
  ) {
    torrentCount = state.torrentStore.get("torrents").size;
  }
  return {
    username: state.userStore.get("username"),
    isAdmin: state.userStore.get("isAdmin"),
    torrentCount: torrentCount,
  };
};

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

  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 torrentsCount={props.torrentCount} />
        </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={props.username} isAdmin={props.isAdmin} />
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
};
AppNavBar.propTypes = {
  torrentCount: PropTypes.number.isRequired,
  username: PropTypes.string.isRequired,
  isAdmin: PropTypes.bool.isRequired,
  history: PropTypes.object,
};

export default connect(mapStateToProps)(AppNavBar);

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/yts/seeds">
      <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/eztv/rating">
      <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 = (props) => {
  const title = <TorrentsDropdownTitle torrentsCount={props.torrentsCount} />;
  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>
  );
};
TorrentsDropdown.propTypes = { torrentsCount: PropTypes.number.isRequired };

const TorrentsDropdownTitle = (props) => {
  if (props.torrentsCount === 0) {
    return <span>Torrents</span>;
  }

  return (
    <span>
      {" "}
      Torrents
      <span>
        &nbsp;{" "}
        <span className="badge badge-info badge-pill">
          {props.torrentsCount}
        </span>
      </span>
    </span>
  );
};
TorrentsDropdownTitle.propTypes = {
  torrentsCount: PropTypes.number.isRequired,
};