import React from 'react';
// import { TouchableWithoutFeedback } from 'react-native';
import { Icon } from '../../common/components/icon';
import { SBox } from '../../common/s-components/layout/s-box';
import { SLine } from '../../common/s-components/s-line';
import { STabButtonGradient } from '../s-components/s-tab-button-gradient';
import { theme } from '../theme';
// import { navigate } from '../../common/utils/navigation-service';
import NotificationsIndicator from '../../notifications/containers/notifications-indicator';
import { TIconName } from '../../common/types';
import { fp as _ } from '../../common/utils/fp';
import { ROUTES_TAB } from '../constants';

type TProps = {
  routeName: string;
  focused: boolean;
  pressed: boolean;
};

export const BottomTabButton: React.FC<TProps> = props => {
  const { routeName, focused, pressed } = props;
  // const { pressed } = this.state;

  let icon: TIconName;
  switch (_.toLower(routeName)) {
    case 'hometab':
      icon = 'daily-digest';
      break;
    case 'starredtab':
      icon = 'star-outlined';
      break;
    case 'searchtab':
      icon = 'search1';
      break;
    case 'notificationstab':
      icon = 'notifications';
      break;
    case 'profiletab':
      icon = 'profile';
      break;
    default:
      icon = 'daily-digest';
  }

  return (
    <SBox
      testID="tab-button"
      width={1}
      height="100%"
      position="relative"
      alignItems="center"
      // justifyContent="center"
      pt={10}
    >
      {focused ? (
        <STabButtonGradient colors={theme.gradients.tabButton} />
      ) : null}
      {focused ? <SLine top={-2} /> : null}
      {routeName === ROUTES_TAB.notifications ? (
        <NotificationsIndicator focused={focused} />
      ) : null}
      <Icon
        name={icon}
        size={30}
        color={focused ? 'white' : pressed ? 'martinique2' : 'eastBay'}
      />
    </SBox>
  );
};