import React, { useCallback, useMemo, useRef, useState } from 'react';
import { View } from 'react-native';
import { storiesOf } from '@storybook/react-native';
import { CreateRange } from '../../../services';
import { IPropsTabs, ITabsRef, Tabs } from '../../Tabs/native';
import { TextNative } from '../../TextNative';
import { CardHamburguer, CardSushi } from './__mocks__';
import { ScrollViewSection, ScrollViewSectionContainer } from './ScrollViewSection';

storiesOf('Components/PageListing', module).add('default', () => {
   function Component(): any {
      const listItems = useRef(CreateRange(10)).current;
      const ScrollViewSectionContainerRef = useRef<any>();
      const tabsRef = useRef<ITabsRef>();

      const data: IPropsTabs = {
         options: [
            {
               id: 'section#1',
               name: 'Sushi',
            },
            {
               id: 'section#2',
               name: 'Hamburguer',
            },
         ],
         onSelect: (tab) => {
            ScrollViewSectionContainerRef.current.setSection(tab.id);
         },
      };

      return (
         <View>
            <Tabs ref={tabsRef} {...data} />
            <ScrollViewSectionContainer
               ref={ScrollViewSectionContainerRef}
               onChange={(section) => {
                  tabsRef.current.setTab(section);
               }}
            >
               <ScrollViewSection name="section#1">
                  <TextNative
                     size={18}
                     bold
                     style={{ padding: 10, paddingVertical: 20, borderBottomColor: '#eee', borderBottomWidth: 1 }}
                  >
                     Sushi
                  </TextNative>

                  {listItems.map((i) => (
                     <CardSushi key={i} />
                  ))}
               </ScrollViewSection>
               <ScrollViewSection name="section#2">
                  <TextNative
                     size={18}
                     bold
                     style={{ padding: 10, paddingVertical: 20, borderBottomColor: '#eee', borderBottomWidth: 1 }}
                  >
                     Hamburguer
                  </TextNative>
                  {listItems.map((i) => (
                     <CardHamburguer key={i} />
                  ))}
               </ScrollViewSection>
            </ScrollViewSectionContainer>
         </View>
      );
   }

   return <Component />;
});
