import * as React from 'react'
import type { StoryFn, Meta } from '@storybook/react-webpack5'
import { ProductSwitcher } from '.'
import { STUB_DATA } from './stub'
import { NavigationBar } from '..'
import { Avatar } from '@planview/pv-uikit'

export default {
    title: 'pv-toolbar/NavigationBar/ProductSwitcher',
    component: ProductSwitcher,
    tags: ['autodocs'],
    parameters: {
        badges: ['intl'],
    },
    args: {
        products: STUB_DATA,
    },
    argTypes: {
        products: {
            control: {
                type: 'radio',
            },
            options: ['With products', 'Without products'],
            mapping: {
                'With products': STUB_DATA,
                'Without products': [],
            },
        },
        organization: {
            control: {
                type: 'radio',
            },
            options: ['With organization', 'Without organization'],
            mapping: {
                'With organization': {
                    name: 'Nexagon',
                    domain: 'nexagon',
                    avatar: {
                        light: 'assets/nexagon-logo-light.png',
                        dark: 'assets/nexagon-logo-dark.png',
                    },
                },
                'Without organization': undefined,
            },
        },
    },
} satisfies Meta<typeof ProductSwitcher>

const Template: StoryFn<typeof ProductSwitcher> = (args) => (
    <NavigationBar
        productSwitcher={<ProductSwitcher {...args} />}
        showLogoSeparator={false}
    >
        <></>
    </NavigationBar>
)

export const Default = Template.bind({})

export const WithoutPlanviewMe = Template.bind({})
WithoutPlanviewMe.args = {
    products: STUB_DATA.filter((p) => p.name !== 'planview_me'),
}

export const WithOrgBranding = Template.bind({})
WithOrgBranding.args = {
    organization: 'With organization' as any,
}

export const WithLongOrgBranding = Template.bind({})
WithLongOrgBranding.args = {
    organization: {
        name: 'Special Company Financial Services Department of Importance',
        domain: 'special-company-financial-services-department-of-importance',
        avatar: {
            light: <Avatar initials="SC" />,
            dark: <Avatar initials="SC" />,
        },
    },
}

export const Loading = Template.bind({})

Loading.args = {
    products: [],
}