/* eslint-disable @typescript-eslint/no-explicit-any */

import React from 'react';
import type { ViewStyle } from 'react-native';
import { View, Text } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { withTheme } from '../../../../branding';
import type { ThemeProps } from '../../../../branding/hoc/types';
import type { Styles } from './styles';
import themedStyles from './styles';
import { shadows } from '../../../../styles';
import WalkthroughUserIcon from '../../../../components/Icons/WalkthroughUserIcon';

export interface Props {
    small: boolean;
    style?: ViewStyle;
    titleWidth: number;
    subtitleWidth: number;
}

export const Notification = ({
    small,
    style,
    titleWidth,
    subtitleWidth,
    theme,
    colors
}: Props & ThemeProps) => {
    const styles = (themedStyles as any)[theme] as Styles;
    const containerStyle = small ? styles.smallContainer : styles.container;
    const userCircleStyle = small ? styles.smallUserCircle : styles.userCircle;
    const titleStyle = small ? styles.smallTitle : styles.title;
    const subtitleStyle = small ? styles.smallSubtitle : styles.subtitle;
    return (
        <View style={[shadows.walkthroughShadow, containerStyle, style]}>
            <View style={[shadows.walkthroughShadow, userCircleStyle]}>
                <LinearGradient
                    style={userCircleStyle}
                    colors={[
                        colors.walkthroughTileGradientStart,
                        colors.walkthroughTileGradientEnd
                    ]}
                    locations={[0, 1]}
                    useAngle={true}
                    angle={135}
                >
                    {!small && <WalkthroughUserIcon size={60} />}
                </LinearGradient>
            </View>
            <View style={styles.textContainer}>
                {small ? (
                    <View style={[titleStyle, { width: titleWidth }]} />
                ) : (
                    <Text style={styles.titleText}>
                        Your Artist has spiked!
                    </Text>
                )}
                <View style={[subtitleStyle, { width: subtitleWidth }]} />
            </View>
        </View>
    );
};

export default withTheme(Notification) as React.FC<Props>;