import React, {useEffect} from 'react';
import {useNavigation} from '@react-navigation/native';
import _ from 'lodash';
import {IRoutes} from '@components/CoachMarkBottomTab/type';
import {state} from '@components/CoachMarkBottomTab/data';
import {SCAN} from '@constants/navigation/app-bottom-tab';
import {
  Container,
  Tab,
  Title,
  IconWrapper,
  Highlighter,
} from '@styles/components/coach-mark-bottom-tab';

interface IProps {
  onHide: () => void;
  setRoutes: (routes: IRoutes[]) => void;
}

const CoachMarkBottomTab: React.FC<IProps> = ({onHide, setRoutes}) => {
  const navigation: any = useNavigation();

  useEffect(() => {
    setRoutes(state.routes);
  });

  return (
    <Container>
      {state.routes.map((route: IRoutes, index: number) => {
        const label = route.tabBarLabel;

        const isFocused = state.index === index;

        const onPress = () => {
          onHide();
          navigation.navigate({name: route.name, merge: true});
        };

        const Icon = _.isFunction(route?.tabBarIcon) ? route?.tabBarIcon : null;

        const isScan = route.name === SCAN.SCREEN;

        return (
          <Tab
            key={label}
            accessibilityRole="button"
            accessibilityState={isFocused ? {selected: true} : {}}
            onPress={onPress}
            onLongPress={onPress}
            testID="chMrkBtmTb">
            {isFocused && <Highlighter />}
            {Icon && (
              <IconWrapper isScan={isScan}>
                <Icon fill={isFocused ? '#2BEAFB' : '#4F58CF'} />
              </IconWrapper>
            )}
            <Title isFocused={isFocused} isScan={isScan}>
              {label}
            </Title>
          </Tab>
        );
      })}
    </Container>
  );
};

export default CoachMarkBottomTab;