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

export default {
  title: 'Delphinus/Notification',
  component: AUNotificationComponent,
  argTypes: {
    type: {
      control: {
        type: 'radio',
      },
      options: [
        'default',
        'warning',
        'attention',
        'confirm',
      ],
    },
    header: {
      table: {
        disable: true,
      }
    },
    content: {
      table: {
        disable: true,
      }
    },
    actions: {
      table: {
        disable: true,
      }
    },
    classNames: {
      table: {
        disable: true,
      }
    },
  },
  decorators: [
    (Story, context) => (
      <ThemeWrapper theme={context.globals.theme}>
        {Story()}
      </ThemeWrapper>
    )
  ],
} as Meta<typeof AUNotificationComponent>;

type Story = StoryObj<typeof AUNotificationComponent>;

export const Default: Story = {
  args: {
    header: 'This is a notification',
    content: [
      <p>This might be of importance...</p>
    ],
  },
  render: (args) => <AUNotificationComponent {...args} />,
};

export const Warning: Story = {
  args: {
    header: 'Oops! An error has occurred',
    type: 'warning',
    content: [
      <p>Shit's fucked, yo!</p>
    ],
  },
  render: (args) => <AUNotificationComponent {...args} />,
};

export const Attention: Story = {
  args: {
    header: 'Please read this',
    type: 'attention',
    content: [
      <p>We really want you to read this.</p>
    ],
  },
  render: (args) => <AUNotificationComponent {...args} />,
};

export const Confirm: Story = {
  args: {
    header: 'Great success',
    type: 'confirm',
    content: [
      <p>You the man now, dawg!</p>
    ],
  },
  render: (args) => <AUNotificationComponent {...args} />,
};

export const Single_Action: Story = {
  args: {
    header: 'Do you want to do this?',
    type: 'attention',
    content: [
      <p>Please confirm.</p>
    ],
    actions: [
      <AUButtonComponent
        label="Ok"
      />
    ],
  },
  render: (args) => <AUNotificationComponent {...args} />,
};

export const Multiple_Actions: Story = {
  args: {
    header: 'Do you want to do this?',
    type: 'attention',
    content: [
      <p>Please confirm.</p>
    ],
    actions: [
      <div className="button-container">
        <AUButtonComponent
          label="Ok"
        />
        <AUButtonComponent
          label="Cancel"
          type="text"
        />
      </div>,
    ],
  },
  render: (args) => <AUNotificationComponent {...args} />,
};

export const No_Header: Story = {
  args: {
    content: [
      <p>This might be of importance...</p>
    ],
  },
  render: (args) => <AUNotificationComponent {...args} />,
};

export const Constrained_Width: Story = {
  args: {
    header: 'This is a notification',
    content: [
      <p>This might be of importance...</p>
    ],
  },
  render: (args) => <AUNotificationComponent {...args} />,
};