import React from 'react';
import {ScrollView, View} from 'react-native';
import {Meta, StoryObj} from '@storybook/react';
import {Typography} from '@components/_core/Typography';
import {InputClassic, InputTextArea} from '@components/_HuGo/Inputs';

import {Stepper} from './index';
import {Step, StepperProps} from './interfaces';

const ExampleScene = () => {
  return (
    <ScrollView>
      {[1, 2, 3, 4, 5, 6, 7].map(item => (
        <View key={item}>
          <Typography>{`Input ${item}`}</Typography>
          <InputClassic />
        </View>
      ))}
      <InputTextArea />
    </ScrollView>
  );
};

const STORIES_STEPS: Step[] = [
  {id: '1', component: ExampleScene},
  {id: '2', component: ExampleScene},
  {id: '3', component: ExampleScene},
];

const RenderStepper = (args: StepperProps) => {
  const onClose = () => null;
  return <Stepper {...args} steps={STORIES_STEPS} onClose={onClose} />;
};

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

type Story = StoryObj<typeof Stepper>;

export const StepperComponent: Story = {
  args: {
    title: 'Stepper',
  },
};

export default meta;