import React, { useState } from 'react';
import { useWindowDimensions } from 'react-native';
import { SceneMap, TabView } from 'react-native-tab-view';
import TabBar from './TabBar.js';

interface Props {
    /**
     * Object list of the render tab.
     */
    renderScene: Object,

    /**
     * Route details like name,
     */
    routes: Object
}

const Tabs = (props: Props) => {
  const layout = useWindowDimensions();
  
  const [index, setIndex ] = useState(props.tab || 0);

  const renderScene = props.renderScene;
  const routes = props.routes;

  if(!routes.length || routes.lenght <= 0) return;

  return (
    <TabView
      lazy
      renderTabBar={(props) => <TabBar item={props}/>}
      style={{flex: 1, width: layout.width}}
      navigationState={{ index, routes }}
      renderScene={SceneMap(renderScene)}
      onIndexChange={setIndex}
    />
  )
}

export default Tabs