import type { Meta, StoryObj } from '@storybook/react'
import { Cat, Dog, Fish, Rabbit, Turtle } from 'lucide-react'
import {
  Select,
  SelectTrigger,
  SelectContent,
  SelectItem,
  SelectValue,
} from '../Select/Select'
import { MultiSelect } from './MultiSelect'

const options = [
  { label: 'React', value: 'react' },
  { label: 'Vue', value: 'vue' },
  { label: 'Angular', value: 'angular' },
  { label: 'Svelte', value: 'svelte' },
  { label: 'Ember', value: 'ember' },
]

const optionsWithIcons = [
  { label: 'Cat', value: 'cat', icon: Cat },
  { label: 'Dog', value: 'dog', icon: Dog },
  { label: 'Rabbit', value: 'rabbit', icon: Rabbit },
  { label: 'Turtle', value: 'turtle', icon: Turtle },
  { label: 'Fish', value: 'fish', icon: Fish },
]

const networkOptions = [
  {
    value: 'arbitrum',
    label: 'Arbitrum',
    icon: ({ className }: { className?: string }) => (
      <img
        src="https://d2f70xi62kby8n.cloudfront.net/bridge/icons/networks/arbitrum.svg?auto=compress%2Cformat"
        className={className}
        alt="Arbitrum"
      />
    ),
  },
  {
    value: 'avalanche',
    label: 'Avalanche',
    icon: ({ className }: { className?: string }) => (
      <img
        src="https://d2f70xi62kby8n.cloudfront.net/bridge/icons/networks/avalanche.svg?auto=compress%2Cformat"
        className={className}
        alt="Avalanche"
      />
    ),
  },
  {
    value: 'base',
    label: 'Base',
    icon: ({ className }: { className?: string }) => (
      <img
        src="https://d2f70xi62kby8n.cloudfront.net/bridge/icons/networks/base.svg?auto=compress%2Cformat"
        className={className}
        alt="Base"
      />
    ),
  },
  {
    value: 'ethereum',
    label: 'Ethereum',
    icon: ({ className }: { className?: string }) => (
      <img
        src="https://d2f70xi62kby8n.cloudfront.net/bridge/icons/networks/ethereum.svg?auto=compress%2Cformat"
        className={className}
        alt="Ethereum"
      />
    ),
  },
  {
    value: 'solana',
    label: 'Solana',
    icon: ({ className }: { className?: string }) => (
      <img
        src="https://d2f70xi62kby8n.cloudfront.net/bridge/icons/networks/solana.svg?auto=compress%2Cformat"
        className={className}
        alt="Solana"
      />
    ),
  },
  {
    value: 'polygon',
    label: 'Polygon',
    icon: ({ className }: { className?: string }) => (
      <img
        src="https://d2f70xi62kby8n.cloudfront.net/bridge/icons/networks/polygon.svg?auto=compress%2Cformat"
        className={className}
        alt="Polygon"
      />
    ),
  },
]

const groupedOptions = [
  {
    heading: 'Frontend',
    options: [
      { label: 'React', value: 'react' },
      { label: 'Vue', value: 'vue' },
      { label: 'Angular', value: 'angular' },
    ],
  },
  {
    heading: 'Backend',
    options: [
      { label: 'Node.js', value: 'node' },
      { label: 'Python', value: 'python' },
      { label: 'Go', value: 'go' },
    ],
  },
  {
    heading: 'Database',
    options: [
      { label: 'PostgreSQL', value: 'postgresql' },
      { label: 'MongoDB', value: 'mongodb' },
      { label: 'Redis', value: 'redis' },
    ],
  },
]

const meta = {
  title: 'Form/MultiSelect',
  component: MultiSelect,
  argTypes: {
    options: {
      control: 'object',
      description: 'Options to display',
    },
    defaultValue: {
      control: 'object',
      description: 'Default selected values',
    },
    placeholder: {
      control: 'text',
      description: 'Placeholder text',
    },
    maxCount: {
      control: 'number',
      description: 'Maximum number of items to display',
    },
    disabled: {
      control: 'boolean',
      description: 'Disable the component',
    },
    searchable: {
      control: 'boolean',
      description: 'Enable search functionality',
    },
    autoSize: {
      control: 'boolean',
      description: 'Auto size width',
    },
    size: {
      control: 'select',
      options: ['default', 'sm', 'xs'],
      description: 'Size of the component',
    },
    open: {
      control: 'boolean',
      description: 'Controlled open state',
    },
    defaultOpen: {
      control: 'boolean',
      description: 'Default open state',
    },
    onValueChange: { control: false },
  },
  args: {
    options,
    placeholder: 'Select frameworks',
    maxCount: 3,
    onValueChange: () => {},
  },
  decorators: [
    (Story, context) => (
      <div className="w-[300px] max-w-[300px]">
        <Story
          {...(context.viewMode === 'story'
            ? { args: { ...context.args, defaultOpen: true } }
            : {})}
        />
      </div>
    ),
  ],
} satisfies Meta<typeof MultiSelect>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    defaultValue: ['react'],
  },
}

export const WithIcons: Story = {
  args: {
    options: optionsWithIcons,
    placeholder: 'Select pets',
    defaultValue: ['cat', 'dog'],
  },
}

export const WithImages: Story = {
  args: {
    options: networkOptions,
    placeholder: 'Select networks',
    defaultValue: ['ethereum', 'arbitrum'],
  },
}

export const Grouped: Story = {
  args: {
    options: groupedOptions,
    placeholder: 'Select technologies',
    defaultValue: ['react', 'node'],
  },
}

export const Disabled: Story = {
  args: {
    options,
    defaultValue: ['react'],
    disabled: true,
  },
}

export const EmptyIndicator: Story = {
  args: {
    options,
    placeholder: 'Search for "ruby"',
  },
}

export const Responsive: Story = {
  parameters: {
    viewport: {
      defaultViewport: 'mobile1',
    },
  },
  args: {
    options,
    defaultValue: ['react', 'vue', 'angular', 'svelte'],
    responsive: true,
  },
}

export const Sizes: Story = {
  render: () => (
    <div className="flex flex-row items-start gap-8">
      <div className="flex w-[250px] flex-col gap-2">
        <h3 className="text-sm font-medium">Default</h3>
        <MultiSelect
          options={networkOptions}
          defaultValue={['ethereum']}
          size="default"
          open={true}
          modalPopover={false}
          onValueChange={() => {}}
        />
      </div>
      <div className="flex w-[250px] flex-col gap-2">
        <h3 className="text-sm font-medium">Small</h3>
        <MultiSelect
          options={networkOptions}
          defaultValue={['ethereum']}
          size="sm"
          open={true}
          modalPopover={false}
          onValueChange={() => {}}
        />
      </div>
      <div className="flex w-[250px] flex-col gap-2">
        <h3 className="text-sm font-medium">Extra Small</h3>
        <MultiSelect
          options={networkOptions}
          defaultValue={['ethereum']}
          size="xs"
          open={true}
          modalPopover={false}
          onValueChange={() => {}}
        />
      </div>
    </div>
  ),
  decorators: [
    (Story) => (
      <div className="min-h-[600px] w-full p-8">
        <Story />
      </div>
    ),
  ],
}

export const WidthConstraints: Story = {
  render: (_args, _context) => (
    <div className="flex flex-col gap-8">
      <div className="flex flex-col gap-2">
        <MultiSelect
          options={options}
          placeholder="Select frameworks"
          minWidth="200px"
          maxWidth="350px"
          defaultValue={['react']}
          onValueChange={() => {}}
        />
      </div>
    </div>
  ),
  decorators: [
    (Story, context) => (
      <div className="w-fit">
        <Story
          {...(context.viewMode === 'story'
            ? { args: { ...context.args, defaultOpen: true } }
            : {})}
        />
      </div>
    ),
  ],
}

export const SizeComparison: Story = {
  render: (_args, context) => {
    const openProp = context.viewMode === 'story' ? { defaultOpen: true } : {}
    const width = 'w-64 max-w-full'

    return (
      <div className="flex flex-col gap-12 p-8">
        {/* MultiSelect Variants */}
        <div className="flex flex-col gap-4">
          <h2 className="text-lg font-semibold">MultiSelect</h2>
          <div className="flex flex-col gap-4">
            <div className="flex flex-col gap-2">
              <h3 className="text-sm font-medium">Default</h3>
              <div className={width + ' overflow-hidden'}>
                <MultiSelect
                  options={options}
                  defaultValue={['react']}
                  size="default"
                  placeholder="Select frameworks"
                  onValueChange={() => {}}
                  {...openProp}
                />
              </div>
            </div>
            <div className="flex flex-col gap-2">
              <h3 className="text-sm font-medium">Small (sm)</h3>
              <div className={width + ' overflow-hidden'}>
                <MultiSelect
                  options={options}
                  defaultValue={['react']}
                  size="sm"
                  placeholder="Select frameworks"
                  onValueChange={() => {}}
                  {...openProp}
                />
              </div>
            </div>
            <div className="flex flex-col gap-2">
              <h3 className="text-sm font-medium">Extra Small (xs)</h3>
              <div className={width + ' overflow-hidden'}>
                <MultiSelect
                  options={options}
                  defaultValue={['react']}
                  size="xs"
                  placeholder="Select frameworks"
                  onValueChange={() => {}}
                  {...openProp}
                />
              </div>
            </div>
          </div>
        </div>

        {/* Select Variants */}
        <div className="flex flex-col gap-4">
          <h2 className="text-lg font-semibold">Select</h2>
          <div className="flex flex-col gap-4">
            <div className="flex flex-col gap-2">
              <h3 className="text-sm font-medium">Default</h3>
              <div className={width + ' overflow-hidden'}>
                <Select {...openProp}>
                  <SelectTrigger className="!w-full !max-w-full md:!w-full">
                    <SelectValue placeholder="Select an option" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="react">React</SelectItem>
                    <SelectItem value="vue">Vue</SelectItem>
                    <SelectItem value="angular">Angular</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div className="flex flex-col gap-2">
              <h3 className="text-sm font-medium">Small (sm)</h3>
              <div className={width + ' overflow-hidden'}>
                <Select size="sm" {...openProp}>
                  <SelectTrigger className="!w-full !max-w-full md:!w-full">
                    <SelectValue placeholder="Select an option" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="react">React</SelectItem>
                    <SelectItem value="vue">Vue</SelectItem>
                    <SelectItem value="angular">Angular</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  },
  decorators: [
    (Story, context) => (
      <div className="w-full overflow-hidden">
        <Story
          {...(context.viewMode === 'story'
            ? { args: { ...context.args, defaultOpen: true } }
            : {})}
        />
      </div>
    ),
  ],
}