import React from "react"
import type { Meta, StoryFn } from "@storybook/react-webpack5"
import { Navbar, NavbarProps } from "./Navbar"

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

const DefaultTemplate: StoryFn<NavbarProps> = (args) => {
    return (
        <div className={"mb-5"}>
            <Navbar Brand={<Navbar.Link className={"fs-2"}>Brand</Navbar.Link>} {...args}>
                <Navbar.Link href="#" active={true}>
                    Home
                </Navbar.Link>
                <Navbar.Link href="#">Link</Navbar.Link>
                <Navbar.Dropdown title="Dropdown">
                    <Navbar.Link href="#">A first item</Navbar.Link>
                    <Navbar.Link href="#">A second item</Navbar.Link>
                    <Navbar.Link href="#" active={true}>
                        An active item
                    </Navbar.Link>
                    <Navbar.Divider />
                    <Navbar.Link href="">Below Divider</Navbar.Link>
                </Navbar.Dropdown>
                <Navbar.Link href="" disabled={true}>
                    Disabled
                </Navbar.Link>
            </Navbar>
        </div>
    )
}

export const _Navbar = DefaultTemplate.bind({})
_Navbar.args = {}

// const CollapsedTemplate: StoryFn<NavbarProps> = (args) => {
//     return (
//         <div className={"mb-5"}>
//             <Navbar expand={false} Brand={<Navbar.Link className={"fs-1"}>Brand</Navbar.Link>} {...args}>
//                 <Navbar.Link href="">Link</Navbar.Link>
//                 <Navbar.Dropdown title="Dropdown">
//                     <Navbar.Link href="">Above Divider</Navbar.Link>
//                     <Navbar.Divider />
//                     <Navbar.Link href="">Below Divider</Navbar.Link>
//                 </Navbar.Dropdown>
//                 <Navbar.Link href="" disabled={true}>
//                     Disabled
//                 </Navbar.Link>
//             </Navbar>
//         </div>
//     )
// }

// export const _CollapsedNavbar = CollapsedTemplate.bind({})
// _CollapsedNavbar.args = {}