import React, { useState } from 'react';
import {
  Row,
  Col,
  Navbar,
  NavbarBrand,
  NavbarToggler,
  Collapse,
  Nav,
  NavItem,
  NavLink,
} from 'reactstrap';

import Widget from '../../../components/Widget';

const NavbarExamples = () => {
  const [navs, setNavs] = useState([false, false, false, false]);

  const toggle = (id) => {
    setNavs((prevNavs) => {
      const newState = Array(4).fill(false);

      if (!prevNavs[id]) {
        newState[id] = true;
      }

      return newState;
    });
  };

  return (
      <div>
        <Row>
          <Col xs={12} lg={6}>
            <Widget
              title={<h5>Navbar <span className="fw-semi-bold">Example</span></h5>}
              close collapse
            >
              <p>Here’s what you need to know before getting started with the navbar:</p>
              <ul>
                <li>Navbars require a wrapping <code>&lt;Navbar&gt;</code> with <code>expand=&quot;*&quot;</code> for
                    responsive collapsing and color scheme classes.</li>
                <li>Navbars and their contents are fluid by default. Use optional containers
                  to limit their horizontal width.</li>
                <li>Use our spacing and flex utility classes for controlling spacing and alignment within navbars.</li>
                <li>Navbars are responsive by default, but you can easily modify them to change that. Responsive
                  behavior depends on our Collapse JavaScript plugin.</li>
                <li>Navbars are hidden by default when printing. Force them to be printed by adding <code>.d-print</code>
                to the <code>.navbar</code>. See the display utility class.</li>
              </ul>
              <Navbar className="pa-2 mt-lg" color="default" dark expand="md">
                <NavbarBrand href="/">Navbar</NavbarBrand>
                <NavbarToggler className="ms-auto" onClick={() => toggle(0)} />
                <Collapse isOpen={navs[0]} navbar>
                  <Nav className="ms-auto" navbar>
                    <NavItem>
                      <NavLink className="text-white">Home</NavLink>
                    </NavItem>
                    <NavItem>
                      <NavLink className="text-white">Features</NavLink>
                    </NavItem>
                    <NavItem>
                      <NavLink className="text-white">Pricing</NavLink>
                    </NavItem>
                    <NavItem>
                      <NavLink disabled>Disabled</NavLink>
                    </NavItem>
                  </Nav>
                </Collapse>
              </Navbar>
            </Widget>
          </Col>
          <Col xs={12} lg={6}>
            <Widget
              title={<h5>Navbar <span className="fw-semi-bold">Example</span></h5>}
              close collapse
            >
              <p>Theming the navbar has never been easier thanks to the combination of
                theming classes and background-color utilities. Choose from <code>color=&quot;light&quot;</code>
                for use with light background colors, or <code>color=&quot;dark&quot;</code> for dark background
                colors. Then, customize with <code>.bg-*</code> utilities.</p>
              <Navbar className="pa-2 mt-lg" color="inverse" dark expand="md">
                <NavbarBrand href="/" className="text-white">Navbar</NavbarBrand>
                <NavbarToggler className="ms-auto" onClick={() => toggle(1)} />
                <Collapse isOpen={navs[1]} navbar>
                  <Nav className="ms-auto" navbar>
                    <NavItem>
                      <NavLink className="text-white">Home</NavLink>
                    </NavItem>
                    <NavItem>
                      <NavLink className="text-white">Features</NavLink>
                    </NavItem>
                    <NavItem>
                      <NavLink className="text-white">Pricing</NavLink>
                    </NavItem>
                    <NavItem>
                      <NavLink disabled>Disabled</NavLink>
                    </NavItem>
                  </Nav>
                </Collapse>
              </Navbar>
              <Navbar className="pa-2 mt-lg" color="primary" dark expand="md">
                <NavbarBrand href="/">Navbar</NavbarBrand>
                <NavbarToggler className="ms-auto" onClick={() => toggle(2)} />
                <Collapse isOpen={navs[2]} navbar>
                  <Nav className="ms-auto" navbar>
                    <NavItem>
                      <NavLink className="text-white">Home</NavLink>
                    </NavItem>
                    <NavItem>
                      <NavLink className="text-white">Features</NavLink>
                    </NavItem>
                    <NavItem>
                      <NavLink className="text-white">Pricing</NavLink>
                    </NavItem>
                    <NavItem>
                      <NavLink disabled>Disabled</NavLink>
                    </NavItem>
                  </Nav>
                </Collapse>
              </Navbar>
              <Navbar className="pa-2 mt-lg" color="success" dark expand="md">
                <NavbarBrand href="/">Navbar</NavbarBrand>
                <NavbarToggler className="ms-auto" onClick={() => toggle(3)} />
                <Collapse isOpen={navs[3]} navbar>
                  <Nav className="ms-auto" navbar>
                    <NavItem>
                      <NavLink className="text-white">Home</NavLink>
                    </NavItem>
                    <NavItem>
                      <NavLink className="text-white">Features</NavLink>
                    </NavItem>
                    <NavItem>
                      <NavLink className="text-white">Pricing</NavLink>
                    </NavItem>
                    <NavItem>
                      <NavLink disabled>Disabled</NavLink>
                    </NavItem>
                  </Nav>
                </Collapse>
              </Navbar>
            </Widget>
          </Col>
        </Row>
      </div>
  );
};

export default NavbarExamples;
