import React from 'react'
import type { StoryFn, Meta } from '@storybook/react-webpack5'
import { YourContentHere } from '../__utils/docs'

import {
    LogoAdaptiveWork,
    LogoAdvisorExpress,
    LogoAdvisor,
    LogoAgilePlace,
    LogoBarometer,
    LogoChangePoint,
    LogoDaptiv,
    LogoEA,
    LogoIdeaPlace,
    LogoOKR,
    LogoPortfolios,
    LogoPPMPro,
    LogoPVAdmin,
    LogoRoadmaps,
    LogoProjectPlace,
    LogoHub,
    LogoViz,
    LogoPlanview,
    LogoProjectAdvantage,
    LogoReleaseAndVerify,
} from '../logos/'
import { NavigationBar } from '../navigation-bar'

export default {
    title: 'pv-toolbar/Product Logos',
    tags: ['hidden'],
    parameters: {
        viewMode: 'docs',
        previewTabs: {
            canvas: { hidden: true },
        },
    },
} satisfies Meta

export const Planview: StoryFn = () => (
    <NavigationBar logo={<LogoPlanview label="Planview" />}>
        <YourContentHere />
    </NavigationBar>
)
Planview.storyName = 'ProjectPlace'

export const AdaptiveWork: StoryFn = () => (
    <NavigationBar logo={<LogoAdaptiveWork label="Adaptive Work" />}>
        <YourContentHere />
    </NavigationBar>
)
AdaptiveWork.storyName = 'Adaptive Work'

export const AdvisorExpress: StoryFn = () => (
    <NavigationBar logo={<LogoAdvisorExpress label="Advisor Express" />}>
        <YourContentHere />
    </NavigationBar>
)
AdvisorExpress.storyName = 'Advisor Express'

export const Advisor: StoryFn = () => (
    <NavigationBar logo={<LogoAdvisor label="Advisor" />}>
        <YourContentHere />
    </NavigationBar>
)
Advisor.storyName = 'Advisor'

export const AgilePlace: StoryFn = () => (
    <NavigationBar logo={<LogoAgilePlace label="AgilePlace" />}>
        <YourContentHere />
    </NavigationBar>
)
AgilePlace.storyName = 'AgilePlace'

export const Barometer: StoryFn = () => (
    <NavigationBar logo={<LogoBarometer label="Barometer" />}>
        <YourContentHere />
    </NavigationBar>
)
Barometer.storyName = 'Barometer'

export const ChangePoint: StoryFn = () => (
    <NavigationBar logo={<LogoChangePoint label="ChangePoint" />}>
        <YourContentHere />
    </NavigationBar>
)
ChangePoint.storyName = 'ChangePoint'

export const Daptiv: StoryFn = () => (
    <NavigationBar logo={<LogoDaptiv label="Daptiv" />}>
        <YourContentHere />
    </NavigationBar>
)
Daptiv.storyName = 'Daptiv'

export const EA: StoryFn = () => (
    <NavigationBar logo={<LogoEA label="Enterprise Architecture" />}>
        <YourContentHere />
    </NavigationBar>
)
EA.storyName = 'Enterprise Architecture'

export const IdeaPlace: StoryFn = () => (
    <NavigationBar logo={<LogoIdeaPlace label="IdeaPlace" />}>
        <YourContentHere />
    </NavigationBar>
)
IdeaPlace.storyName = 'IdeaPlace'

export const OKR: StoryFn = () => (
    <NavigationBar logo={<LogoOKR label="OKR" />}>
        <YourContentHere />
    </NavigationBar>
)
OKR.storyName = 'OKR'

export const Portfolios: StoryFn = () => (
    <NavigationBar logo={<LogoPortfolios label="Portfolios" />}>
        <YourContentHere />
    </NavigationBar>
)
Portfolios.storyName = 'Portfolios'

export const PPMPro: StoryFn = () => (
    <NavigationBar logo={<LogoPPMPro label="PPM Pro" />}>
        <YourContentHere />
    </NavigationBar>
)
PPMPro.storyName = 'PPM Pro'

export const PVAdmin: StoryFn = () => (
    <NavigationBar logo={<LogoPVAdmin label="PV Admin" />}>
        <YourContentHere />
    </NavigationBar>
)
PVAdmin.storyName = 'PV Admin'

export const Roadmaps: StoryFn = () => (
    <NavigationBar logo={<LogoRoadmaps label="Roadmaps" />}>
        <YourContentHere />
    </NavigationBar>
)
Roadmaps.storyName = 'Roadmaps'

export const ProjectPlace: StoryFn = () => (
    <NavigationBar logo={<LogoProjectPlace label="ProjectPlace" />}>
        <YourContentHere />
    </NavigationBar>
)
ProjectPlace.storyName = 'ProjectPlace'

export const Hub: StoryFn = () => (
    <NavigationBar logo={<LogoHub label="Hub" />}>
        <YourContentHere />
    </NavigationBar>
)
Hub.storyName = 'Hub'

export const Viz: StoryFn = () => (
    <NavigationBar logo={<LogoViz label="Viz" />}>
        <YourContentHere />
    </NavigationBar>
)
Viz.storyName = 'Viz'

export const ProjectAdvantage: StoryFn = () => (
    <NavigationBar logo={<LogoProjectAdvantage label="Project Advantage" />}>
        <YourContentHere />
    </NavigationBar>
)
ProjectAdvantage.storyName = 'Project Advantage'

export const ReleaseAndVerify: StoryFn = () => (
    <NavigationBar logo={<LogoReleaseAndVerify label="Release and Verify" />}>
        <YourContentHere />
    </NavigationBar>
)
ReleaseAndVerify.storyName = 'Release and Verify'