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: any;
  rightElement?: ReactNode;
  shouldClose?: boolean;
  textColor?: string;
};

export const Header: FC<Props> = ({
  label,
  rightElement,
  shouldClose,
  textColor = Colors.DARK_BLUE
}) => {
  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, { color: textColor }]} numberOfLines={1}>
        {label}
      </Text>
      {rightElement ? <View>{rightElement}</View> : <View style={styles.placeholder} />}
    </View>
  );
};
