import { Column, Row, Text, useTheme } from 'native-base';
import ButtonBase from './UI/ButtonBase';
import { Translate, TranslationKey, translate } from '../i18n/i18n';
import { Play, Star1 } from 'iconsax-react-native';
import { useNavigation } from '../Navigation';

type ScoreModalProps = {
	songId: number;
	overallScore: number;
	precision: number;
	score: {
		missed: number;
		good: number;
		great: number;
		perfect: number;
		wrong: number;
		max_score: number;
		current_streak: number;
		max_streak: number;
	};
};

const ScoreModal = (props: ScoreModalProps) => {
	const navigation = useNavigation();
	const theme = useTheme();
	const score = (props.overallScore * 100) / props.score.max_score;
	const column1 = {
		perfect: [props.score.perfect, 'primary'],
		great: [props.score.great, 'secondary'],
		good: [props.score.good, 'success'],
	} as const;
	const column2 = {
		bestStreak: [props.score.max_streak, 'notification'],
		missed: [props.score.missed, 'alert'],
		wrong: [props.score.wrong, 'error'],
	} as const;

	return (
		<Column w="xl" space={4} style={{ alignItems: 'center' }}>
			<Row space={2} style={{ justifyContent: 'center' }}>
				{[1, 2, 3].map((index) => (
					<Star1
						color={theme.colors.primary[500]}
						key={index}
						variant={score >= (index * 100) / 4 ? 'Bold' : 'Outline'}
					/>
				))}
			</Row>
			<Text fontSize="3xl">{Math.max(score, 0).toFixed(2)}%</Text>
			<Row w="100%" style={{ justifyContent: 'space-between' }}>
				<Translate translationKey="precision" />
				<Text>{props.precision}%</Text>
			</Row>
			<Row w="100%" space={2}>
				{([column1, column2] as const).map((column, columnIndex) => (
					<Column w="50%" space={2} key={columnIndex}>
						{Object.entries(column).map(([key, [value, color]]) => {
							const translationKey = key as TranslationKey;

							return (
								<Row
									key={translationKey}
									style={{ justifyContent: 'space-between' }}
								>
									<Translate
										translationKey={translationKey}
										fontWeight={'bold'}
										color={`${color}.500`}
									/>
									<Text>x{value}</Text>
								</Row>
							);
						})}
					</Column>
				))}
			</Row>
			<Row w="100%" style={{ justifyContent: 'space-between' }}>
				<ButtonBase
					style={{}}
					icon={Play}
					type="outlined"
					title={translate('playAgain')}
					onPress={() => navigation.replace('Play', { songId: props.songId })}
				/>
				<ButtonBase
					style={{}}
					icon={Play}
					type="filled"
					title={translate('menuMusic')}
					onPress={() => {
						navigation.canGoBack()
							? navigation.goBack()
							: navigation.replace('Tabs', { screen: 'Home' });
					}}
				/>
			</Row>
		</Column>
	);
};

export default ScoreModal;