//@ts-nocheck
import React from 'react';
import { Linking, TouchableOpacity, View } from 'react-native';
import { Call, CloseIcon, IconBackWhite } from '../assets/icons';
import { MText } from './MText';
import LinearGradient from 'react-native-linear-gradient';
import {
  useNavigation,
  StackActions,
  CommonActions,
} from '@react-navigation/native';
import appStore from '../AppStore';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

interface IProps {
  title?: string;
  onBack?: () => void;
}

export default function MHeader({ title, onBack }: IProps) {
  const navigation = useNavigation();
  const insets = useSafeAreaInsets();
  return (
    <LinearGradient
      colors={['#FF8E4F', '#EF592E']}
      style={{
        zIndex: 10000,
      }}
    >
      <View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          paddingTop: insets.top + 16,
          paddingBottom: 8,
          justifyContent: 'space-between',
          paddingHorizontal: 16,
          zIndex: 10000,
        }}
      >
        <View
          style={{
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
          }}
        >
          {onBack && (
            <TouchableOpacity
              onPress={() => {
                if (onBack) onBack();
              }}
              style={{
                width: 32,
                height: 32,
                justifyContent: 'center',
              }}
            >
              <IconBackWhite />
            </TouchableOpacity>
          )}
          <MText
            style={{
              fontWeight: 'bold',
              color: 'white',
              fontSize: 14,
            }}
          >
            {title}
          </MText>
        </View>
        <View
          style={{
            borderWidth: 1,
            borderColor: 'white',
            flexDirection: 'row',
            borderRadius: 16,
            height: 30,
            alignItems: 'center',
          }}
        >
          <TouchableOpacity
            style={{
              paddingHorizontal: 10,
            }}
            onPress={() => {
              Linking.openURL(`tel:1900633688`);
            }}
          >
            <Call />
          </TouchableOpacity>
          <View style={{ width: 1, height: 30, backgroundColor: 'white' }} />
          <TouchableOpacity
            style={{
              paddingHorizontal: 10,
            }}
            onPress={() => {
              navigation.navigate('MyBank.Main');
            }}
          >
            <CloseIcon />
          </TouchableOpacity>
        </View>
      </View>
    </LinearGradient>
  );
}
