import { AiOutlineMergeCells, AiOutlineSplitCells } from "react-icons/ai";
import { BiCrop, BiSprayCan } from "react-icons/bi";
import {
    BsTools, BsSortNumericDown, BsArrowClockwise, BsFileEarmarkX, BsLayoutSplit, BsPalette, BsArrowUpSquare, Bs1Square, BsFileEarmarkPdf,
    BsArrowLeftRight, BsFileEarmarkImage, BsFileEarmark, BsFiletypeHtml, BsLink, BsFiletypeMd, BsFileEarmarkWord, BsFiletypePpt, BsFiletypeTxt,
    BsFiletypeXml, BsLock, BsUnlock, BsShieldLock, BsDroplet, BsAward, BsEraserFill, BsCardList, BsClipboardData, BsFile, BsFileEarmarkRichtext,
    BsFileZip, BsFiletypeJs, BsFonts, BsImages, BsInfoCircle, BsSearch, BsShieldCheck, BsVectorPen, BsWrench, BsArrowsCollapse, BsGrid, Bs123,
    BsArrowsFullscreen
} from "react-icons/bs";
import { MdOutlineScanner, MdOutlineBalance } from "react-icons/md";
import { IconType } from "react-icons";

import Container from "react-bootstrap/Container";
import Nav from "react-bootstrap/Nav";
import Navbar from "react-bootstrap/Navbar";
import NavDropdown from "react-bootstrap/NavDropdown";
import { LinkContainer } from "react-router-bootstrap";
import { useTranslation } from "react-i18next";

import LanguagePicker from "./toolbar/LanguagePicker";
import Logo from "../../public/stirling-pdf-logo.svg";
import "./NavBar.css";

interface NavInfoItem {
  displayText: string;
  icon: any;
  dest: string;
  tooltip?: string;
}
interface NavInfoSublist {
  displayText: string;
  icon: IconType;
  sublist: NavInfoItem[];
}

function convertToNavLink(item: NavInfoItem, index: number) {
    return <LinkContainer key={"nav-link-"+index} to={item.dest}><Nav.Link className="nav-icon" title={item.tooltip}><item.icon/><span>{item.displayText}</span></Nav.Link></LinkContainer>;
}
function convertToNavDropdownItem(item: NavInfoItem | null, index: number) {
    if (item == null)
        return <NavDropdown.Divider  key={"nav-dropdown-divider-"+index}/>;

    return (
        <LinkContainer to={item.dest} key={"nav-dropdown-item-"+index}>
            <NavDropdown.Item className="nav-icon" title={item.tooltip}>
                <item.icon/>
                <span>{item.displayText}</span>
            </NavDropdown.Item>
        </LinkContainer>
    );
}
function convertToNavDropdown(sublist: NavInfoSublist, index: number) {
    const myTitle = <>
        <span className="nav-icon">
            <sublist.icon/>
            <span>{sublist.displayText}</span>
        </span>
    </>;

    return (
        <NavDropdown title={myTitle} id="basic-nav-dropdown" key={"nav-dropdown-"+index}>
            {sublist.sublist.map((item, i) => convertToNavDropdownItem(item, i))}
        </NavDropdown>
    );
}

function NavBar() {
    const { t } = useTranslation();

    // TODO: Construct automatically by fetching local & server-side operators

    const navInfo = [
        {displayText: t("multiTool.title"), icon: BsTools, dest: "/nothing-here", tooltip: t("home.multiTool.desc")},
        {displayText: t("navbar.pageOps"), icon: BsFileEarmarkPdf, sublist: [
            { displayText: t("home.merge.title"), icon: AiOutlineMergeCells, dest: "/nothing-here", tooltip: t("home.merge.desc") },
            { displayText: t("home.split.title"), icon: AiOutlineSplitCells, dest: "/nothing-here", tooltip: t("home.split.desc") },
            { displayText: t("home.pdfOrganiser.title"), icon: BsSortNumericDown, dest: "/nothing-here", tooltip: t("home.pdfOrganiser.desc") },
            { displayText: t("home.rotate.title"), icon: BsArrowClockwise, dest: "/nothing-here", tooltip: t("home.rotate.desc") },
            { displayText: t("home.removePages.title"), icon: BsFileEarmarkX, dest: "/nothing-here", tooltip: t("home.removePages.desc") },
            { displayText: t("home.pageLayout.title"), icon: BsGrid, dest: "/page-operations/impose", tooltip: t("home.pageLayout.desc") },
            { displayText: t("home.scalePages.title"), icon: BsArrowsFullscreen, dest: "/nothing-here", tooltip: t("home.scalePages.desc") },
            { displayText: t("home.autoSplitPDF.title"), icon: BsLayoutSplit, dest: "/nothing-here", tooltip: t("home.autoSplitPDF.desc") },
            { displayText: t("home.adjust-contrast.title"), icon: BsPalette, dest: "/nothing-here", tooltip: t("home.adjust-contrast.desc") },
            { displayText: t("home.crop.title"), icon: BiCrop, dest: "/nothing-here", tooltip: t("home.crop.desc") },
            { displayText: t("home.extractPage.title"), icon: BsArrowUpSquare, dest: "/nothing-here", tooltip: t("home.extractPage.desc") },
            { displayText: t("home.PdfToSinglePage.title"), icon: Bs1Square, dest: "/nothing-here", tooltip: t("home.PdfToSinglePage.desc") },
        ]},
        {displayText: t("navbar.convert"), icon: BsArrowLeftRight, sublist: [
            { displayText: t("home.imageToPdf.title"), icon: BsFileEarmarkImage, dest: "/dashboard", tooltip: t("home.imageToPdf.desc") },
            { displayText: t("home.fileToPDF.title"), icon: BsFileEarmark, dest: "/convert/file-to-pdf", tooltip: t("home.fileToPDF.desc") },
            { displayText: t("home.HTMLToPDF.title"), icon: BsFiletypeHtml, dest: "/nothing-here", tooltip: t("home.HTMLToPDF.desc") },
            { displayText: t("home.URLToPDF.title"), icon: BsLink, dest: "/nothing-here", tooltip: t("home.URLToPDF.desc") },
            { displayText: t("home.MarkdownToPDF.title"), icon: BsFiletypeMd, dest: "/nothing-here", tooltip: t("home.MarkdownToPDF.desc") },
            null,
            { displayText: t("home.pdfToImage.title"), icon: BsFileEarmarkImage, dest: "/nothing-here", tooltip: t("home.pdfToImage.desc") },
            { displayText: t("home.PDFToWord.title"), icon: BsFileEarmarkWord, dest: "/nothing-here", tooltip: t("home.PDFToWord.desc") },
            { displayText: t("home.PDFToPresentation.title"), icon: BsFiletypePpt, dest: "/nothing-here", tooltip: t("home.PDFToPresentation.desc") },
            { displayText: t("home.PDFToText.title"), icon: BsFiletypeTxt, dest: "/nothing-here", tooltip: t("home.PDFToText.desc") },
            { displayText: t("home.PDFToHTML.title"), icon: BsFiletypeHtml, dest: "/nothing-here", tooltip: t("home.PDFToHTML.desc") },
            { displayText: t("home.PDFToXML.title"), icon: BsFiletypeXml, dest: "/nothing-here", tooltip: t("home.PDFToXML.desc") },
            { displayText: t("home.pdfToPDFA.title"), icon: BsFileEarmarkPdf, dest: "/nothing-here", tooltip: t("home.pdfToPDFA.desc") },
        ]},
        {displayText: t("navbar.security"), icon: BsShieldCheck, sublist: [
            { displayText: t("home.addPassword.title"), icon: BsLock, dest: "/dashboard", tooltip: t("home.addPassword.desc") },
            { displayText: t("home.removePassword.title"), icon: BsUnlock, dest: "/nothing-here", tooltip: t("home.removePassword.desc") },
            { displayText: t("home.permissions.title"), icon: BsShieldLock, dest: "/nothing-here", tooltip: t("home.permissions.desc") },
            { displayText: t("home.watermark.title"), icon: BsDroplet, dest: "/nothing-here", tooltip: t("home.watermark.desc") },
            { displayText: t("home.certSign.title"), icon: BsAward, dest: "/nothing-here", tooltip: t("home.certSign.desc") },
            { displayText: t("home.sanitizePdf.title"), icon: BiSprayCan, dest: "/nothing-here", tooltip: t("home.sanitizePdf.desc") },
            { displayText: t("home.autoRedact.title"), icon: BsEraserFill, dest: "/nothing-here", tooltip: t("home.autoRedact.desc") },
        ]},
        {displayText: t("navbar.other"), icon: BsCardList, sublist: [
            { displayText: t("home.ocr.title"), icon: BsSearch, dest: "/dashboard", tooltip: t("home.ocr.desc") },
            { displayText: t("home.addImage.title"), icon: BsFileEarmarkRichtext, dest: "/nothing-here", tooltip: t("home.addImage.desc") },
            { displayText: t("home.compressPdfs.title"), icon: BsFileZip, dest: "/nothing-here", tooltip: t("home.compressPdfs.desc") },
            { displayText: t("home.extractImages.title"), icon: BsImages, dest: "/nothing-here", tooltip: t("home.extractImages.desc") },
            { displayText: t("home.changeMetadata.title"), icon: BsClipboardData, dest: "/nothing-here", tooltip: t("home.changeMetadata.desc") },
            { displayText: t("home.ScannerImageSplit.title"), icon: MdOutlineScanner, dest: "/nothing-here", tooltip: t("home.ScannerImageSplit.desc") },
            { displayText: t("home.sign.title"), icon: BsVectorPen, dest: "/nothing-here", tooltip: t("home.sign.desc") },
            { displayText: t("home.flatten.title"), icon: BsArrowsCollapse, dest: "/nothing-here", tooltip: t("home.flatten.desc") },
            { displayText: t("home.repair.title"), icon: BsWrench, dest: "/nothing-here", tooltip: t("home.repair.desc") },
            { displayText: t("home.removeBlanks.title"), icon: BsFile, dest: "/nothing-here", tooltip: t("home.removeBlanks.desc") },
            { displayText: t("home.compare.title"), icon: MdOutlineBalance, dest: "/nothing-here", tooltip: t("home.compare.desc") },
            { displayText: t("home.add-page-numbers.title"), icon: Bs123, dest: "/nothing-here", tooltip: t("home.add-page-numbers.desc") },
            { displayText: t("home.auto-rename.title"), icon: BsFonts, dest: "/nothing-here", tooltip: t("home.auto-rename.desc") },
            { displayText: t("home.getPdfInfo.title"), icon: BsInfoCircle, dest: "/nothing-here", tooltip: t("home.getPdfInfo.desc") },
            { displayText: t("home.showJS.title"), icon: BsFiletypeJs, dest: "/nothing-here", tooltip: t("home.showJS.desc") },
        ]},
    ] as (NavInfoItem | NavInfoSublist)[];
  
  
  
    return (
        <Navbar expand="lg" className="bg-light">
            <Container>
                <LinkContainer to="/home">
                    <Navbar.Brand className="nav-icon">
                        <img src={Logo} alt="Image" className="main-icon" />
                        <span className="icon-text">Stirling PDF</span>
                    </Navbar.Brand>
                </LinkContainer>
                <Navbar.Toggle aria-controls="basic-navbar-nav"/>
                <Navbar.Collapse id="basic-navbar-nav">
          
                    <Nav>
                        {navInfo.map((ni, idx) => {
                            let element;
                            if ("dest" in ni) {
                                element = convertToNavLink(ni, idx);
                            } else {
                                element = convertToNavDropdown(ni, idx);
                            }
                            const out: JSX.Element[] = [];
                            if (idx >= 1 ) {
                                out.push( <div className="nav-item nav-item-separator" key={"nav-item-separator-"+idx}></div> );
                            }
                            out.push(element);
                            return out;
                        })}
                    </Nav>

                    <div className="flex-fill-remaining-space"></div>

                    <Nav>
                        <LanguagePicker />
                    </Nav>

                </Navbar.Collapse>
            </Container>
        </Navbar>
    );
}

export default NavBar;