import React from 'react';
import { ButtonGroup } from 'react-bootstrap';
import ChatIcon from '@mui/icons-material/Chat';
import MapIcon from '@mui/icons-material/Map';
import StorageIcon from '@mui/icons-material/Storage';
import Layout from '../components/Layout';
import { NavLink, Outlet, useLocation } from 'react-router';
import { MeshCoreDataProvider } from './meshcore/MeshCoreData';
import type { NavLinkItem } from '../types/layout.types';
import './MeshCore.scss';

interface Props {
  navLinks?: NavLinkItem[];
}

const MeshCore: React.FC<Props> = ({ navLinks = [] }) => {
  const location = useLocation();

  const viewButtons = (
    <ButtonGroup className="meshcore-view-switch" size="sm" aria-label="MeshCore view switch">
      <NavLink
        to="/meshcore/packets"
        className={`btn btn-sm btn-icon ${location.pathname.startsWith('/meshcore/packets') ? 'btn-primary' : 'btn-outline-light'}`}
        title="Packets"
      >
        <StorageIcon className="icon" />
        <span className="ms-1 d-none d-lg-inline">Packets</span>
      </NavLink>
      <NavLink
        to="/meshcore/groupchat"
        className={`btn btn-sm btn-icon ${location.pathname.startsWith('/meshcore/groupchat') ? 'btn-primary' : 'btn-outline-light'}`}
        title="Group Chat"
      >
        <ChatIcon className="icon" />
        <span className="ms-1 d-none d-lg-inline">Chat</span>
      </NavLink>
      <NavLink
        to="/meshcore/map"
        className={`btn btn-sm btn-icon ${location.pathname.startsWith('/meshcore/map') ? 'btn-primary' : 'btn-outline-light'}`}
        title="Map"
      >
        <MapIcon className="icon" />
        <span className="ms-1 d-none d-lg-inline">Map</span>
      </NavLink>
    </ButtonGroup>
  );

  return (
    <MeshCoreDataProvider>
      <Layout navLinks={navLinks} buttonGroup={viewButtons}>
        <Outlet />
      </Layout>
    </MeshCoreDataProvider>
  );
};

export default MeshCore;
