import React from 'react';
import { StyleProp, Text, View, ViewStyle } 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';
import BlinkingDot from '../BlinkingDot';
import BanIcon from 'assets/icons/messages/ban.svg';

export const HorizontalTabView = ({
  index,
  setIndex,
  routes,
  renderScene,
  withMark,
  onDoubleClick,
  lazy = false,
  withNotification = false,
  maxTabHeight,
  tabBarStyle = {}
}: {
  index: number;
  setIndex: React.Dispatch<React.SetStateAction<number>>;
  routes: Route[];
  renderScene: (props: any) => React.ReactNode;
  withMark?: boolean;
  onDoubleClick?: () => void;
  lazy?: boolean;
  withNotification?: boolean;
  maxTabHeight?: number;
  tabBarStyle?: StyleProp<ViewStyle>;
}) => {
  const renderTabBar = (props: any) => (
    <TabBar
      {...props}
      renderLabel={({ route, focused }) => (
        <>
          <View style={[styles.tabLabelContainer, focused ? styles.tabLabelFocused : null]}>
            {route.icon === 'ban' ? (
              <BanIcon width={15} height={15} fill={focused ? Colors.WHITE : Colors.DARK_BLUE} />
            ) : (
              <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>
          {withNotification && route.key === 'received' ? <BlinkingDot diameter={10} /> : null}
        </>
      )}
      scrollEnabled={true}
      indicatorStyle={styles.indicator}
      style={[styles.tabBar, tabBarStyle]}
      activeColor={Colors.ORANGE}
      inactiveColor={Colors.DARK_BLUE}
      tabStyle={[styles.tabStyle, maxTabHeight ? { maxHeight: maxTabHeight } : {}]}
      pressColor={'transparent'}
    />
  );

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