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

import React from 'react';
import { View } 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 SpotifyIcon from './SpotifyIcon';
import NoteIcon from './NoteIcon';

export const RecentPlacementsPage = ({ theme, colors }: ThemeProps) => {
    const styles = (themedStyles as any)[theme] as Styles;
    const gradientColors = [
        colors.walkthroughTileGradientStart,
        colors.walkthroughTileGradientEnd
    ];
    const gradientLocations = [0, 1];
    return (
        <View style={styles.container}>
            <View style={[shadows.walkthroughShadow, styles.topLeftRectangle]}>
                <LinearGradient
                    style={styles.rectangleGradient}
                    colors={gradientColors}
                    locations={gradientLocations}
                    useAngle={true}
                    angle={135}
                >
                    <SpotifyIcon size={110} />
                </LinearGradient>
            </View>
            <View style={[shadows.walkthroughShadow, styles.topRightRectangle]}>
                <LinearGradient
                    style={styles.rectangleGradient}
                    colors={gradientColors}
                    locations={gradientLocations}
                    useAngle={true}
                    angle={135}
                >
                    <SpotifyIcon size={62} />
                </LinearGradient>
            </View>
            <View
                style={[shadows.walkthroughShadow, styles.bottomLeftRectangle]}
            >
                <LinearGradient
                    style={styles.rectangleGradient}
                    colors={gradientColors}
                    locations={gradientLocations}
                    useAngle={true}
                    angle={135}
                >
                    <SpotifyIcon size={62} />
                </LinearGradient>
            </View>
            <View
                style={[shadows.walkthroughShadow, styles.bottomRightRectangle]}
            >
                <LinearGradient
                    style={styles.rectangleGradient}
                    colors={gradientColors}
                    locations={gradientLocations}
                    useAngle={true}
                    angle={135}
                >
                    <NoteIcon />
                </LinearGradient>
            </View>
        </View>
    );
};

export default withTheme(RecentPlacementsPage);