/* eslint-disable react/prop-types */
/* eslint-disable react/display-name */
import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Container from 'react-bootstrap/Container';
import Dropdown from 'react-bootstrap/Dropdown';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Home from './Home';
import Music from './Music';
import About from './About';
import Videos from './Videos';


function App() {
  const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
    <a
      href=""
      ref={ref}
      onClick={e => {
        e.preventDefault();
        onClick(e);
      }}
    >
      {/* Render custom icon here */}
      <img className="menu_button"></img>
      {children}
    </a>
  ));

  const CustomMenu = React.forwardRef(
    ({ children, className, 'aria-labelledby': labeledBy }, ref) => {
      const [value] = useState('');
      return (
        <div ref={ref} className={className} aria-labelledby={labeledBy}>
          <ul className="list-unstyled">
            { React.Children.toArray(children).filter((child) => !value || child.props.children.toLowerCase().startsWith(value),) }
          </ul>
        </div>
      );
    },
  );

  return (
    <>
      <Router>
        <Container>
          <Row>
            <Col>
            <Dropdown>
              <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components"></Dropdown.Toggle>
              <Dropdown.Menu as={CustomMenu}>
                <Dropdown.Item as={Link} to="/">Home</Dropdown.Item>
                <Dropdown.Item as={Link} to="/about">TANH</Dropdown.Item>
                <Dropdown.Item as={Link} to="/music">Music</Dropdown.Item>
                <Dropdown.Item as={Link} to="/videos">Videos</Dropdown.Item>
              </Dropdown.Menu>
            </Dropdown>
            </Col>
            <Col xs={10}>
              <img className="logo" alt="Neinhills Logo"></img>
            </Col>
            <Col></Col>
          </Row>
          <Row>
            <Col>
              <Routes>
                <Route exact path="/" element={<Home />} />
                <Route path="/music" element={<Music />} />
                <Route path="/about" element={<About />} />
                <Route path="/videos" element={<Videos />} />
              </Routes>
            </Col>
          </Row>
        </Container>
      </Router>
      <div className="footer"></div>
    </>
  )
}

export default App
