import type { Meta, StoryObj } from '@storybook/react'
import { Typography } from '../Typography'
import { OrgSwitcher, type OrgOption } from './OrgSwitcher'

const meta: Meta<typeof OrgSwitcher> = {
  title: 'Blocks/OrgSwitcher',
  component: OrgSwitcher,
  argTypes: {
    organizations: {
      description: 'Array of organization options to display.',
      control: false,
      table: {
        type: { summary: 'OrgOption[]' },
      },
    },
    disabled: {
      description: 'Disables the component, preventing user interaction.',
      control: 'boolean',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: 'false' },
      },
    },
    defaultOpen: {
      description: 'Whether the select should be open by default.',
      control: 'boolean',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: 'false' },
      },
    },
    onValueChange: { control: false },
  },
  args: {
    disabled: false,
    defaultOpen: true,
    // open: true,
  },
} as Meta<typeof OrgSwitcher>

export default meta

const sampleOrganizations: OrgOption[] = [
  {
    value: 'chainlink-labs',
    label: 'Chainlink Labs',
    initials: 'CL',
  },
  {
    value: 'smartcontract-inc',
    label: 'Smartcontract Inc',
    initials: 'SC',
  },
]

const singleOrganization: OrgOption[] = [
  {
    value: 'chainlink-labs',
    label: 'Chainlink Labs',
    initials: 'CL',
  },
]

export const Default: StoryObj = {
  render: (args, context) => {
    const openProp = context.viewMode === 'story' ? { defaultOpen: true } : {}
    return (
      <div className="mt-40 flex justify-center">
        <OrgSwitcher
          {...args}
          {...openProp}
          organizations={sampleOrganizations}
        />
      </div>
    )
  },
}

export const WithNavigation: StoryObj = {
  render: (args, context) => {
    const openProp = context.viewMode === 'story' ? { defaultOpen: true } : {}

    // Native browser navigation for Storybook
    const handleOrgChange = (orgValue: string) => {
      // Navigate to a new route
      window.location.href = `/organizations/${orgValue}`
    }

    return (
      <div className="space-y-4">
        <div className="mt-40 flex justify-center">
          <OrgSwitcher
            {...args}
            {...openProp}
            organizations={sampleOrganizations}
            onValueChange={handleOrgChange}
          />
        </div>
        <div className="text-center">
          <Typography variant="body-s" color="muted">
            Will navigate to /organizations/[org] route
          </Typography>
        </div>
      </div>
    )
  },
}

export const SingleOrganization: StoryObj = {
  render: (args) => {
    // Native browser navigation for Storybook
    const handleOrgChange = (orgValue: string) => {
      // Navigate to a new route
      window.location.href = `/organizations/${orgValue}`
    }

    return (
      <div className="mt-40 flex justify-center">
        <OrgSwitcher
          {...args}
          organizations={singleOrganization}
          onValueChange={handleOrgChange}
        />
      </div>
    )
  },
}