import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { Route, TabBar, TabView } from 'react-native-tab-view';

import { styles } from './styles';
import { Colors } from 'src/theme';

import MarkToUpIcon from '../../../assets/icons/mark-to-up.svg';

export const HorizontalTabView = ({
  index,
  setIndex,
  routes,
  renderScene,
  withMark,
  onDoubleClick,
  lazy = false
}: {
  index: number;
  setIndex: React.Dispatch<React.SetStateAction<number>>;
  routes: Route[];
  renderScene: (props: any) => React.ReactNode;
  withMark?: boolean;
  onDoubleClick?: () => void;
  lazy?: boolean;
}) => {
  const renderTabBar = (props: any) => (
    <TabBar
      {...props}
      renderLabel={({ route, focused }) => (
        <View style={[styles.tabLabelContainer, focused ? styles.tabLabelFocused : null]}>
          <Text style={[styles.label, focused ? styles.labelFocused : null]}>{route.title}</Text>
          {withMark ? (
            <MarkToUpIcon
              height={16}
              width={16}
              style={styles.icon}
              stroke={focused ? Colors.WHITE : Colors.DARK_BLUE}
            />
          ) : null}
        </View>
      )}
      scrollEnabled={true}
      indicatorStyle={styles.indicator}
      style={styles.tabBar}
      activeColor={Colors.ORANGE}
      inactiveColor={Colors.DARK_BLUE}
      tabStyle={styles.tabStyle}
      pressColor={'transparent'}
    />
  );

  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      animationEnabled={true}
      swipeEnabled={true}
      style={styles.tabView}
      renderTabBar={renderTabBar}
      lazy={lazy}
    />
  );
};