import React, { useContext } from 'react';
import IconSources from '../Assets/icon.json';
import IconBankSources from '../Assets/icon_bank.json';
import { IconProps } from './types';
import { ApplicationContext, MiniAppContext } from '../Context';
import { Image } from '../Image';
import { StyleSheet } from 'react-native';
import { Colors } from '../Consts';

const Icon: React.FC<IconProps> = ({
  source = 'ic_back',
  size = 24,
  color,
  style = {},
  ...props
}) => {
  const { theme } = useContext(ApplicationContext);
  const context = useContext<any>(MiniAppContext);

  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;

  /**
   * get icon source maps or remote http
   */
  const getIconSource = (): any => {
    if (source && !source.includes('http')) {
      let icon: { [key: string]: { uri: string } } = IconSources;
      return icon[source] ?? icon.ic_warning;
    }
    return { uri: source };
  };

  const tintColorProps = color !== null && {
    tintColor: color ?? theme.colors.text.default,
  };

  return (
    <Image
      {...props}
      loading={false}
      source={getIconSource()}
      style={[
        style,
        { width: size, height: size },
        showBaseLineDebug && styles.debugBaseLine,
      ]}
      resizeMode="contain"
      {...tintColorProps}
    />
  );
};

const styles = StyleSheet.create({
  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
});

export { Icon, IconSources, IconBankSources };