import { NavigationButtonProps } from '../types';
import React, { useContext } from 'react';
import { ApplicationContext, MiniAppContext } from '../../Context';
import { StyleSheet, TouchableOpacity, View, ViewStyle } from 'react-native';
import { Colors, Spacing } from '../../Consts';
import { Icon } from '../../Icon';
import { BadgeDot } from '../../Badge';

/**
 * default navigation button used header nav
 */
const NavigationButton: React.FC<NavigationButtonProps> = ({
  icon,
  tintColor,
  showBadge = false,
  ...props
}) => {
  const { theme } = useContext(ApplicationContext);
  let buttonStyle: ViewStyle = {};
  if (tintColor === Colors.black_01) {
    buttonStyle = {
      backgroundColor: '#00000099',
      borderColor: '#FFFFFF33',
    };
  }

  return (
    <View style={{ width: 28 }}>
      <TouchableOpacity
        {...props}
        style={[styles.navigationButton, buttonStyle]}
        hitSlop={{ top: 7, bottom: 7, left: 7, right: 7 }}
      >
        <Icon
          source={icon}
          color={tintColor ?? theme.colors.text.default}
          size={20}
        />
      </TouchableOpacity>
      {showBadge && <BadgeDot size={'small'} style={styles.badgeDot} />}
    </View>
  );
};

const styles = StyleSheet.create({
  navigationButton: {
    height: 28,
    width: 28,
    borderRadius: 14,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF99',
    borderColor: '#00000033',
    borderWidth: 0.2,
  },
  badgeDot: {
    position: 'absolute',
    top: -Spacing.XXS,
    right: -Spacing.XXS,
  },
  badgeDotAnimation: {
    position: 'absolute',
    top: -Spacing.XS,
    right: -Spacing.XS,
  },
  verifiedDot: {
    width: 4,
    height: 4,
    borderRadius: 2,
    backgroundColor: Colors.green_03,
    position: 'absolute',
    alignSelf: 'center',
  },
});

export { NavigationButton };