import React, {useEffect} from 'react';
import {StyleSheet, TextStyle, View, ViewStyle, LogBox} from 'react-native';
import DianpingIcon from './icon-setup';
import {IconNameTypes} from './name-types';
import {$Colors} from '../style';

export type {IconNameTypes};

interface IconProps {
    // @ts-ignore
    name: IconNameTypes;
    size?: number;
    color?: string;
    wrapStyle?: ViewStyle;
    style?: TextStyle | TextStyle[];
    dot?: boolean;
    dotColor?: string;
}
const Icon: React.FC<IconProps> = (props) => {
    const {color, size, name, style, dot, dotColor, wrapStyle} = props;
    const $color = color || $Colors.normalText;
    const $size = size || 14;

    const $dotColor = dotColor || $Colors.primary;

    const IconStyle = StyleSheet.create({
        wrap: {
            position: 'relative',
        },
        icon: {
            color: $color,
            fontSize: $size,
        },
        dot: {
            width: 8,
            height: 8,
            backgroundColor: $dotColor,
            borderRadius: 8,
            position: 'absolute',
            right: 0,
            top: -2,
        },
    });
    useEffect(() => {
        LogBox.ignoreLogs([
            'Constants.installationId has been deprecated',
            'Constants.deviceId has been deprecated',
            'Constants.manifest is null',
            'Constants.linkingUrl has been renamed',
        ]);
    }, []);

    return (
        <View style={[IconStyle.wrap, wrapStyle]}>
            <DianpingIcon name={name as never} style={[IconStyle.icon, style]} />
            {dot ? <View style={IconStyle.dot} /> : null}
        </View>
    );
};

export default Icon;