import React, {FC, useState} from 'react';
import {Modal} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import {IRoutes} from '@components/CoachMarkBottomTab/type';
import CoachMarkBottomTab from '@components/CoachMarkBottomTab';
import DoubleArrowIcon from '@assets/svg/DoubleArrowIcon';
import {
  Overlay,
  Wrapper,
  Message,
  Arrow,
  SkipWrapper,
  SkipText,
  HideTabBar,
  HideTab,
  ActiveTab,
} from '@styles/components/coach-mark-modal';

interface IProps {
  onHide: () => void;
  visible?: boolean;
}

const CoachMarkModal: FC<IProps> = ({visible, onHide}) => {
  const navigation = useNavigation();
  const [routes, setRoutes] = useState<IRoutes[]>();

  return (
    <Modal
      animationType="fade"
      transparent={true}
      visible={visible}
      onRequestClose={onHide}
      testID="chMrk">
      <Overlay onPress={onHide} activeOpacity={1} />
      <Wrapper>
        <Message>You can view all your pending requests here!</Message>
        <SkipWrapper onPress={onHide} testID="skpBtn">
          <SkipText>Skip</SkipText>
          <DoubleArrowIcon />
        </SkipWrapper>
        <Arrow />
      </Wrapper>
      <CoachMarkBottomTab
        onHide={onHide}
        setRoutes={(values: IRoutes[]) => setRoutes(values)}
      />

      <HideTabBar>
        {routes?.map((route, index) =>
          index === 1 ? (
            <ActiveTab
              onPress={() => {
                onHide();
                navigation.navigate({name: route.name, merge: true});
              }}
            />
          ) : (
            <HideTab />
          ),
        )}
      </HideTabBar>
    </Modal>
  );
};

export default CoachMarkModal;