import React from 'react';
import {StyleSheet, View} from 'react-native';
import {Meta, StoryObj} from '@storybook/react';
import Slot from '@components/_HuGo/Slot';
import {SPACING} from '@shared/theme';

import {TextInput} from '../TextInput';
import {ScrollViewWithFooter, ScrollViewWithFooterProps} from './index';

const styles = StyleSheet.create({
  container: {gap: SPACING.x1},
});

const slotArray = () => {
  const array = [];
  for (let i = 0; i < 20; i++) {
    array.push(i);
  }
  return array;
};

const meta: Meta<typeof ScrollViewWithFooter> = {
  title: 'HuGo/ScrollViewWithFooter',
  component: ScrollViewWithFooter,
  argTypes: {
    submitText: {control: 'text'},
    sticky: {control: 'boolean'},
  },
};

export const ScrollViewComponent: StoryObj<ScrollViewWithFooterProps> = {
  args: {
    submitText: 'Save',
    sticky: true,
  },
  render: ({submitText, ...args}) => (
    <ScrollViewWithFooter
      {...args}
      submitText={submitText}
      onSubmit={() => null}>
      <View style={styles.container}>
        <TextInput />
        {slotArray().map(item => (
          <Slot key={item} />
        ))}
      </View>
    </ScrollViewWithFooter>
  ),
};

export default meta;
