/* 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 { shadows } from '../../../styles';
import Chart from './Chart';
import NoteIcon from './NoteIcon';
import Statistics from './Statistics';
import type { Styles } from './styles';
import themedStyles from './styles';

export const TrackAnalyticsPage = ({ theme, colors }: ThemeProps) => {
    const styles = (themedStyles as any)[theme] as Styles;
    return (
        <View style={[styles.bigRectangle, shadows.walkthroughShadow]}>
            <View style={styles.smallRectangleContainer}>
                <View
                    style={[shadows.walkthroughShadow, styles.smallRectangle]}
                >
                    <LinearGradient
                        style={styles.smallRectangleGradient}
                        colors={[
                            colors.walkthroughTileGradientStart,
                            colors.walkthroughTileGradientEnd
                        ]}
                        locations={[0, 1]}
                        useAngle={true}
                        angle={135}
                    >
                        <NoteIcon />
                    </LinearGradient>
                </View>
            </View>
            <Statistics />
            <View style={styles.chartContainer}>
                <View style={styles.horizontalTopLineSpace} />
                <View style={styles.horizontalLine} />
                <View style={styles.horizontalLineSpace} />
                <View style={styles.horizontalLine} />
                <View style={styles.horizontalLineSpace} />
                <View style={styles.horizontalLine} />
                <View style={styles.horizontalLineSpace} />
                <View style={styles.horizontalLine} />
                <View style={styles.horizontalLineSpace} />
                <View style={styles.horizontalBottomLine} />
                <View style={styles.chartImageContainer}>
                    <Chart />
                </View>
            </View>
        </View>
    );
};

export default withTheme(TrackAnalyticsPage);