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

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

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

      const listData = [
         {
            id: 'section#1',
            title: 'Sushi',
            data: listItems,
         },
         {
            id: 'section#2',
            title: 'Hamburguer',
            data: listItems,
         },
      ];

      return (
         <View style={{ flex: 1 }}>
            <Tabs ref={tabsRef} {...data} />
            <ListSection
               ref={ListSectionContainerRef}
               onChange={(section) => {
                  tabsRef.current.setTab(section);
               }}
               data={listData}
               renderItem={({ item }) => <CardSushi />}
               renderSectionHeader={(section) => {
                  return (
                     <TextNative
                        size={18}
                        bold
                        style={{ padding: 10, paddingVertical: 20, borderBottomColor: '#eee', borderBottomWidth: 1 }}
                     >
                        {section.title}
                     </TextNative>
                  );
               }}
            />
         </View>
      );
   }

   return <Component />;
});
