import React, { FC, ReactNode } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { CommonActions, useNavigation } from '@react-navigation/native';

import { styles } from './style';

import ChevronLeft from '../../../assets/icons/chevron-left.svg';
import CloseSvg from '../../../assets/icons/close.svg';
import { NAVIGATION_PAGES } from 'src/types';
import { Colors } from 'src/theme';

type Props = {
  label: string;
  rightElement?: ReactNode;
  shouldClose?: boolean;
};

export const Header: FC<Props> = ({ label, rightElement, shouldClose }) => {
  const navigation = useNavigation();

  const handlePress = () => {
    if (shouldClose) {
      navigation.dispatch(
        CommonActions.reset({
          index: 1,
          routes: [{ name: NAVIGATION_PAGES.IN_APP }]
        })
      );
    } else {
      navigation.goBack();
    }
  };

  // navigation.setOptions() TODO

  return (
    <View style={styles.wrapper}>
      <TouchableOpacity onPress={handlePress}>
        <View style={styles.chevronWrapper}>{shouldClose ? <CloseSvg /> : <ChevronLeft fill={Colors.DARK_BLUE} />}</View>
      </TouchableOpacity>
      <Text style={styles.label}>{label}</Text>
      {rightElement ? <View>{rightElement}</View> : <View style={styles.placeholder} />}
    </View>
  );
};