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

export default {
  title: 'Delphinus/Error',
  component: AUErrorComponent,
  argTypes: {
    error: {
      table: {
        disable: true,
      }
    },
    fetchError: {
      table: {
        disable: true,
      }
    },
    serializedError: {
      table: {
        disable: true,
      }
    },
  },
  decorators: [
    (Story, context) => (
      <ThemeWrapper theme={context.globals.theme}>
        {Story()}
      </ThemeWrapper>
    )
  ],
} as Meta<typeof AUErrorComponent>;

type Story = StoryObj<typeof AUErrorComponent>;

export const AU_Error: Story = {
  args: {
    error: {
      header: 'Our own custom error',
      message: 'With a nice header and descriptive error message',
      status: 500,
    },
    withStatus: false,
  },
  render: (args) => <AUErrorComponent {...args} />,
};

export const AU_Error_With_Status: Story = {
  args: {
    error: {
      header: 'Our own custom error',
      message: 'With a nice header and descriptive error message',
      status: 500,
    },
    withStatus: true,
  },
  render: (args) => <AUErrorComponent {...args} />,
};

export const Fetch_Error: Story = {
  args: {
    fetchError: {
      error: 'Something horrible has happened on the server...',
      status: 'FETCH_ERROR',
    },
    withStatus: false,
  },
  render: (args) => <AUErrorComponent {...args} />,
};

export const Fetch_Error_With_Status: Story = {
  args: {
    fetchError: {
      error: 'Something horrible has happened on the server...',
      status: 'FETCH_ERROR',
    },
    withStatus: true,
  },
  render: (args) => <AUErrorComponent {...args} />,
};

export const Fetch_Error_With_Data: Story = {
  args: {
    fetchError: {
      data: {
        status: 'Error',
        message: 'This could be anything...',
        somethingElse: 'Even this...',
      },
      status: 500,
    },
    withStatus: false,
  },
  render: (args) => <AUErrorComponent {...args} />,
};

export const Fetch_Error_With_Data_And_Status: Story = {
  args: {
    fetchError: {
      data: {
        status: 'Error',
        message: 'This could be anything...',
        somethingElse: 'Even this...',
      },
      status: 500,
    },
    withStatus: true,
  },
  render: (args) => <AUErrorComponent {...args} />,
};

export const Serialized_Error: Story = {
  args: {
    serializedError: {
      message: 'Something funky has happened in the code...',
      code: '500',
    },
    withStatus: false,
  },
  render: (args) => <AUErrorComponent {...args} />,
};

export const Serialized_Error_With_Code: Story = {
  args: {
    serializedError: {
      message: 'Something funky has happened in the code...',
      code: '500',
    },
    withStatus: true,
  },
  render: (args) => <AUErrorComponent {...args} />,
};