import React from "react"
import type { Meta, StoryFn } from "@storybook/react-webpack5"
import { Header } from "./Header"
import type { HeaderProps } from "./Header"
import HeaderBanner from "./HeaderBanner"
import { Nav, NavDropdown } from "react-bootstrap"
import Search from "../../molecules/Search/Search"
import { Icon } from "@foundations/Icons/Icons"

export default {
    title: "organisms/Header",
    component: Header,
} as Meta<typeof Header>

const DropdownItem = () => {
    return (
        <NavDropdown title="Data">
            <NavDropdown.Item href="https://pacificdata.org/data">Datasets</NavDropdown.Item>
            <NavDropdown.Item href="https://pacificdata.org/data/group">Groups</NavDropdown.Item>
            <NavDropdown.Item href="https://pacificdata.org/data/organization" active={true}>
                Organizations
            </NavDropdown.Item>
        </NavDropdown>
    )
}

const PrimaryItems = [
    <Nav.Link active={true} href="#">
        Home
    </Nav.Link>,
    <Nav.Link href="#">Topics</Nav.Link>,
    <Nav.Link href="#">Dashboards</Nav.Link>,
    <Nav.Link href="#">Tools</Nav.Link>,
    <Nav.Link href="#">Portals</Nav.Link>,
    <DropdownItem />,
    <Nav.Link>
        <Icon name="person-circle" color="white" />
        <span className="d-lg-none">Login</span>
    </Nav.Link>,
    <Nav.Link>
        <Icon name="question-circle" color="white" />
        <span className="d-lg-none">Help</span>
    </Nav.Link>,
].map((item, index) => {
    return <Nav.Item key={index}>{item}</Nav.Item>
})

const SecondaryItems = [
    <Nav.Item>
        <Nav.Link>About Us</Nav.Link>
    </Nav.Item>,
    <Nav.Item>
        <Nav.Link>Contact Us</Nav.Link>
    </Nav.Item>,
]

const DefaultTemplate: StoryFn<HeaderProps> = (args) => {
    return <Header {...args} />
}

const defaultArgs: Partial<HeaderProps> = {
    breakpoint: "lg",
    className: "mb-5",
    PrimaryItems: PrimaryItems,
    alignNav: "center",
}

export const _Header = DefaultTemplate.bind({})
_Header.args = {
    ...defaultArgs,
}

export const _HeaderWithSearch = DefaultTemplate.bind({})
_HeaderWithSearch.args = {
    ...defaultArgs,
    SearchComponent: <Search className="search-muted search-in-header" />,
}

export const _HeaderWithSecondaryNav = DefaultTemplate.bind({})
_HeaderWithSecondaryNav.args = { ...defaultArgs, SecondaryItems: SecondaryItems }

export const _TallHeader = DefaultTemplate.bind({})
_TallHeader.args = { ...defaultArgs, className: "pdh-header-large mb-5", BannerComponent: HeaderBanner }