import React from 'react';
import {Meta, StoryObj} from '@storybook/react';
import {Title} from '@components/_HuGo/Title';
import Slot from '@components/_HuGo/Slot';

import {Timeline} from './index';

const argTypes = {
  state: {
    control: 'radio',
    options: ['complete', 'current', 'disabled', 'error'],
  },
  continued: {control: 'boolean'},
  topText: {control: 'text'},
  title: {control: 'text'},
  description: {control: 'text'},
  pill: {
    control: 'object',
    description: 'Pill props',
  },
  onActionPress: {control: 'boolean', description: 'Show action button event'},
};

const meta: Meta<typeof Timeline> = {
  title: 'HuGo/Timeline',
  component: Timeline,
  argTypes,
};

type Story = StoryObj<typeof Timeline>;

export const TimelineComponent: Story = {
  args: {
    state: 'complete',
    continued: true,
    topText: 'Copetín',
    title: 'Title',
    description: 'Description',
    pill: {
      text: 'Information',
      variant: 'neutral',
    },
  },
  render: args => (
    <Timeline
      {...args}
      onActionPress={args.onActionPress ? () => {} : undefined}
    />
  ),
};

export const TimelineCustom: Story = {
  args: {
    state: 'complete',
  },
  render: args => (
    <Timeline {...args}>
      <Slot />
    </Timeline>
  ),
};

export const TimelineList: Story = {
  args: {},
  render: () => (
    <>
      <Timeline state="complete">
        <Slot />
      </Timeline>
      <Timeline state="complete">
        <Title title="Completed process" size="s" />
        <Slot />
        <Slot />
      </Timeline>
      <Timeline state="current" title="Current process" />
      <Timeline
        state="disabled"
        title="Disabled process"
        pill={{variant: 'info', text: 'Information'}}
      />
      <Timeline
        state="error"
        title="Error processing"
        pill={{variant: 'error', text: 'Press to retry'}}
        onActionPress={() => {}}
        continued={false}
      />
    </>
  ),
};

export default meta;