import React from 'react';
import { StoryObj, Meta } from '@storybook/react';
import AUButtonComponent from '../src/components/AUButtonComponent';
import { ThemeWrapper } from './lib/helpers';

export default {
  title: 'Delphinus/Button',
  component: AUButtonComponent,
  argTypes: {
    type: {
      control: {
        type: 'radio',
      },
      options: [
        'default',
        'text',
        'dimmed',
      ]
    },
    size: {
      control: {
        type: 'radio',
      },
      options: [
        'small',
        'default',
        'large',
      ]
    },
    icon: {
      control: {
        type: 'select',
      },
      options: ['add', 'attachment', 'award', 'bike', 'bookmark', 'brand-linkedin', 'brand-mendeley', 'brand-orcid', 'brand-researchgate', 'brand-twitter', 'calendar', 'camera', 'car', 'class', 'close', 'collapse', 'confirm', 'confirm-circle', 'context-menu', 'copy', 'current-semester', 'dark-mode', 'delphinus', 'delete', 'design', 'download', 'edit', 'email', 'exam', 'expand', 'failed', 'failed-circle', 'file', 'filter', 'finish', 'heart', 'hide', 'infinity', 'info', 'info-circle', 'instructor', 'instructor-with-class', 'language', 'location', 'link-chain', 'link-internal', 'link-external', 'link-external-square', 'lms-course-common', 'lms-course-sections', 'lms-course-additional', 'lms-course-merge-with', 'lms-course-merged', 'mailbox', 'menu', 'news', 'next', 'note', 'notifications', 'passed-exemption', 'phone', 'phone-landline', 'previous', 'print', 'public-transport', 'receipt', 'refresh', 'reorder', 'replay', 'route', 'search', 'season-autumn', 'season-christmas', 'season-easter', 'season-halloween', 'season-spring', 'season-summer', 'season-winter', 'send', 'settings', 'source-system', 'student-place-accepted', 'student-place-not-offered', 'student-place-offered', 'student-place-rejected', 'student-place-standby', 'sign-in', 'sign-out', 'spock', 'sync', 'theme-chooser', 'tip', 'tools', 'tooltip', 'upload', 'user-profile', 'user-impersonation', 'view', 'viewport-default', 'viewport-medium', 'viewport-wide', 'walking', 'warning', 'warning-triangle'],
    },
    iconPosition: {
      control: {
        type: 'select',
      },
      options: [
        'left',
        'right',
      ],
      if: {
        arg: 'icon',
      }
    },
    hideLabel: {
      control: {
        type: 'boolean',
      },
      if: {
        arg: 'icon',
      },
    },
    mode: {
      table: {
        disable: true,
      }
    },
  },
  decorators: [
    (Story, context) => (
      <ThemeWrapper theme={context.globals.theme}>
        {Story()}
      </ThemeWrapper>
    )
  ],
} as Meta<typeof AUButtonComponent>;

type Story = StoryObj<typeof AUButtonComponent>;

export const Default: Story = {
  args: {
    label: 'Button',
    type: 'default',
    size: 'default',
    mode: 'none',
  },
  render: (args) => <AUButtonComponent {...args} />,
};

export const With_Icon = {
  args: {
    label: 'Button',
    type: 'default',
    size: 'default',
    mode: 'none',
    icon: 'delphinus',
    iconPosition: 'left',
    hideLabel: false,
  },
  render: (args) => <AUButtonComponent {...args} />,
};

export const Icon_Only = {
  args: {
    label: 'Button',
    type: 'default',
    size: 'default',
    mode: 'none',
    icon: 'delphinus',
    iconPosition: 'left',
    hideLabel: true,
  },
  render: (args) => <AUButtonComponent {...args} />,
};

export const Irreversible_Action = {
  args: {
    label: 'Button',
    type: 'default',
    size: 'default',
    mode: 'irreversible-action',
    icon: 'delphinus',
  },
  render: (args) => <AUButtonComponent {...args} />,
};

export const Confirmable_Action = {
  args: {
    label: 'Button',
    type: 'default',
    size: 'default',
    mode: 'confirmable-action',
    icon: 'delphinus',
  },
  render: (args) => <AUButtonComponent {...args} />,
};

export const Processing = {
  args: {
    label: 'Button',
    type: 'default',
    size: 'default',
    mode: 'processing',
  },
  render: (args) => <AUButtonComponent {...args} />,
};