import type { Meta, StoryObj } from '@storybook/react'

import Button from './Button.component';
import { IButton } from './Button.interface';
import Icon from '@/components/atoms/Icon';
import React from 'react';

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: 'Components/Button',
  component: Button,
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {
    href: { control: 'text' },
    variant: {
      options: ['primary', 'secondary', 'gray', 'ghost', 'link'],
      control: { type: 'inline-radio' }
    },
    theme: {
      options: ['dark', 'light'],
      control: { type: 'inline-radio' }
    },
    size: {
      options: ['small', 'normal', 'large'],
      control: { type: 'inline-radio' }
    },
    outlined: {
      control: { type: 'boolean' }
    },
    disabled: {
      control: { type: 'boolean' }
    },
    removeLabel: {
      control: { type: 'boolean' }
    },
    align: {
      options: ['left', 'center', 'right']
    },
    className: { control: 'text' }
  },
  args: {
    children: 'Button'
  }
} as Meta

export const Primary: StoryObj<IButton> = {
  render: args => <Button {...args} />,
  args: {}
}
export const Secondary: StoryObj<IButton> = {
  args: {
    ...Primary.args,
    variant: 'secondary'
  },
};

export const Outlined: StoryObj<IButton> = {
  args: {
    ...Primary.args,
    outlined: true
  },
};
export const IconButton: StoryObj<IButton> = {
  render: args => (
    <>
      <Button href={'/'}>
        <Icon icon="icon-arrow-forward" />
      </Button>
      <Button
        removeLabel={true}
        href={'/'}
        rightIcon={<Icon icon="icon-arrow-forward" />}
      >
        No label in mobile
      </Button>
    </>
  ),
  args: {}
}

export const LeftIcon: StoryObj<IButton> = {
  args: {
    ...Primary.args,
    leftIcon: <Icon icon="icon-arrow-forward" />
  },
};
export const RightIcon: StoryObj<IButton> = {
  args: {
    ...Primary.args,
    rightIcon: <Icon icon="icon-arrow-forward" />
  },
};
export const LeftIconOutlined: StoryObj<IButton> = {
  args: {
    ...Primary.args,
    outlined: true,
    leftIcon: <Icon icon="icon-arrow-forward" />
  },
};

export const TwoButtons: StoryObj<IButton> = {
  render: args => (
    <>
      <Button variant={'primary'} outlined={true}>
        Left Button
      </Button>
      <Button variant={'primary'} href={'/'}>
        Right Button
      </Button>
    </>
  ),
  args: {}
}

export const Link: StoryObj<IButton> = {
  render: args => (
    <Button
      {...args}
      variant="link"
      href={'https://www.youtube.com/watch?v=dMBYI7pTR4Q'}
      target={'_blank'}
    >
      Button Link
    </Button>
  ),
  args: {}
}
export const Disabled: StoryObj<IButton> = {
  args: {
    ...Primary.args,
    disabled: true
  },
};
export const All: StoryObj<IButton> = {
  render: args => (
    <>
      <Button {...args} variant={'primary'} outlined={true} href={'/'}>
        Primary Outlined
      </Button>
      <Button {...args} variant={'primary'} href={'/'}>
        Primary
      </Button>
      <Button {...args} variant={'secondary'} href={'/'}>
        Secondary
      </Button>
      <Button {...args} href={'/'}>
        <Icon icon="icon-arrow-forward" />
      </Button>
      <Button {...args} variant={'primary'} disabled href={'/'}>
        Disabled
      </Button>
      <Button {...args} theme={'light'} href={'/'}>
        Light
      </Button>
      <Button {...args} variant={'link'} href={'/'}>
        Link
      </Button>
    </>
  ),
  args: {}
}