import React, { useEffect, useRef, useState } from 'react';
import { View } from 'react-native';
import { storiesOf } from '@storybook/react-native';
import { IPropsTabs, Tabs } from '.';

const data: IPropsTabs = {
   options: [
      {
         id: 1,
         name: 'AAA',
      },
      {
         id: 2,
         name: 'BBB',
      },
      {
         id: 3,
         name: 'CCC',
      },
      {
         id: 4,
         name: 'DDD',
      },
   ],
   onSelect: (tab) => {
      // console.log(tab);
   },
};

storiesOf('Select', module)
   .add('default', () => {
      return (
         <View style={{ padding: 10 }}>
            <Tabs {...data} />
         </View>
      );
   })
   .add('with skeleton', () => {
      return (
         <View style={{ padding: 10 }}>
            <Tabs {...data} skeleton />
         </View>
      );
   })
   .add('with scroll', () => {
      const data: IPropsTabs = {
         options: [
            {
               id: 1,
               name: 'AAA',
            },
            {
               id: 2,
               name: 'BBB',
            },
            {
               id: 3,
               name: 'CCC',
            },
            {
               id: 4,
               name: 'DDD',
            },
            {
               id: 5,
               name: 'DDD',
            },
            {
               id: 6,
               name: 'DDD',
            },
            {
               id: 7,
               name: 'DDD',
            },
            {
               id: 8,
               name: 'DDD',
            },
         ],
         onSelect: (tab) => {
            // console.log(tab);
         },
      };

      return (
         <View style={{ padding: 10 }}>
            <Tabs {...data} />
         </View>
      );
   })
   .add('with default', () => {
      return (
         <View style={{ padding: 10 }}>
            <Tabs {...data} defaultTab={3} />
         </View>
      );
   });
