import React from "react";
import { ScrollView, StyleSheet, Text, View } from "react-native";
import {
	graph_data_two_measures,
	mock_session_details,
} from "../../../test/mock/charts/mock-data";
import BarGraph from "../../component/charts/bar-graph/bar-graph";
import ChartContainer from "../../component/charts/container/chart-container";
import ImageWithFallback from "../../component/image/image-with-fallback";
import StatList from "../../component/video-details/video-stat-list";

// TODO: #134 remove Session when data piped through
// Splash should be an asset we use if an Image failed to load
import Session from "../../assets/sample_session.png";
import Splash from "../../assets/splash.png";
import BackHeader from "../../component/headers/back-header";
import SessionHeader from "../../component/video-details/video-details-header";
import { borders, colors } from "../../styles";

export default function VideoDetails({ navigation }) {
	// TODO: #134 Remove mock destructure block when data is piped through from BE
	const {
		sessionTitle,
		date,
		timePlayed,
		medianRun,
		makeRate,
		shotPacing,
		gameType,
		notes,
	} = mock_session_details;

	const leftColumnStats = [
		{ title: "TIME PLAYED", value: timePlayed },
		{ title: "MAKE RATE", value: makeRate },
	];

	const rightColumnStats = [
		{ title: "MEDIAN RUN", value: medianRun },
		{ title: "SHOT PACING", value: shotPacing },
	];
	// End mock destructure

	return (
		<>
			<BackHeader navigation={navigation} title="Go Back" />
			<ScrollView
				showsVerticalScrollIndicator={false}
				contentContainerStyle={styles.scrollContainer}
			>
				<SessionHeader sessionTitle={sessionTitle} date={date} />
				<ImageWithFallback
					// TODO: #134 when data comes from be needs to be passed as source={{ uri: image }}
					source={Session}
					fallbackSource={Splash}
					style={styles.image}
				/>
				<View style={styles.statsContainer}>
					<StatList items={leftColumnStats} style={styles.statColumn} />
					<StatList items={rightColumnStats} style={styles.statColumn} />
				</View>
				<View style={styles.horizontalDivider} />
				<View style={styles.textContainer}>
					<Text style={styles.title}>Game Type</Text>
					<Text style={styles.text}>{gameType}</Text>
					<Text style={styles.title}>Notes</Text>
					<Text style={styles.text}>{notes}</Text>
				</View>
				<View style={[styles.horizontalDivider, { marginVertical: 21 }]} />
				<ChartContainer
					data={graph_data_two_measures}
					ChartComponent={BarGraph}
				/>
			</ScrollView>
		</>
	);
}

// TODO: #130 scaled styles + maintain consistency with video-feed styles
const styles = StyleSheet.create({
	scrollContainer: {
		backgroundColor: "white", // TODO #125 -- this color should not be set but implicitly inherit from theme
		paddingBottom: 20, // guarantees some space at bottom of scrollable views
	},
	image: {
		width: "100%",
		height: 248,
	},
	statsContainer: {
		flexDirection: "row",
		justifyContent: "space-between",
		paddingLeft: 45,
		paddingTop: 42,
		paddingBottom: 38,
	},
	statColumn: {
		flex: 1,
		padding: 5,
	},
	horizontalDivider: {
		width: "92%",
		alignSelf: "center",
		...borders.dottedBottomBorder,
	},
	textContainer: {
		paddingHorizontal: 38,
	},
	title: {
		fontSize: 16,
		color: colors.text.greyText,
		paddingTop: 16,
	},
	text: {
		fontSize: 18,
		textAlign: "left",
		paddingTop: 6,
		fontWeight: "400",
	},
});