import React, {PropsWithChildren} from "react";
import {
	Dimensions,
	GestureResponderEvent,
	Platform,
	Text,
	TouchableHighlight,
	TouchableNativeFeedback,
	View,
} from "react-native";
import themes from "../../assets/themes/themes";
import {helper} from "../../redux/store";
import {useColorScheme} from "react-native";
import {Invoice} from "thu-info-lib/dist/models/home/invoice";
import {paginatedRefreshListScreen} from "../../components/settings/paginatedRefreshListScreen";
import {RootNav} from "../../components/Root";
import {getStr} from "src/utils/i18n";
import Snackbar from "react-native-snackbar";

const InvoiceItem = ({
	invoice,
	onPress,
}: {
	invoice: Invoice;
	onPress: (event: GestureResponderEvent) => void;
}) => {
	const themeName = useColorScheme();
	const {colors} = themes(themeName);
	const content = (
		<View style={{padding: 8}}>
			<View
				style={{
					flexDirection: "row",
					justifyContent: "space-between",
				}}>
				<View
					style={{flexDirection: "column", flex: 3, alignItems: "flex-start"}}>
					<Text style={{fontSize: 13, marginHorizontal: 10, color: "grey"}}>
						{invoice.inv_no}
					</Text>
					<Text
						style={{fontSize: 17, marginHorizontal: 10, color: colors.text}}>
						{invoice.financial_item_name}
					</Text>
					<Text style={{fontSize: 14, marginHorizontal: 10, color: "grey"}}>
						{invoice.financial_dept_name}/{invoice.payment_item_type_name}
					</Text>
				</View>
				<View
					style={{flexDirection: "column", flex: 1, alignItems: "flex-end"}}>
					<Text style={{fontSize: 18, marginHorizontal: 6, color: colors.text}}>
						{invoice.inv_amount}
					</Text>
					<Text style={{fontSize: 12, marginHorizontal: 6, color: "grey"}}>
						{invoice.inv_date}
					</Text>
				</View>
			</View>
			<Text style={{fontSize: 14, marginHorizontal: 10, color: "grey"}}>
				{invoice.inv_note}
			</Text>
		</View>
	);
	return Platform.OS === "ios" ? (
		<TouchableHighlight underlayColor="#0002" onPress={onPress}>
			{content}
		</TouchableHighlight>
	) : (
		<TouchableNativeFeedback
			onPress={onPress}
			background={TouchableNativeFeedback.Ripple("#0002", false)}>
			{content}
		</TouchableNativeFeedback>
	);
};

export const InvoiceScreen = paginatedRefreshListScreen(
	(_: PropsWithChildren<{navigation: RootNav}>, page) =>
		helper.getInvoiceList(page),
	(invoice, _, {navigation}) => (
		<InvoiceItem
			invoice={invoice}
			onPress={() => {
				Snackbar.show({
					text: getStr("loading"),
					duration: Snackbar.LENGTH_SHORT,
				});
				helper.getInvoicePDF(invoice.bus_no).then((pdf) => {
					navigation.navigate("InvoicePDF", {
						base64: pdf,
						id: invoice.inv_no,
					});
				});
			}}
		/>
	),
	({bus_no}) => bus_no,
	undefined,
	undefined,
	() => {
		const themeName = useColorScheme();
		const {colors} = themes(themeName);
		return (
			<View
				style={{
					margin: 15,
					height: Dimensions.get("window").height * 0.6,
					justifyContent: "center",
					alignItems: "center",
				}}>
				<Text
					style={{
						fontSize: 18,
						fontWeight: "bold",
						alignSelf: "center",
						margin: 5,
						color: colors.text,
					}}>
					{getStr("noInvoice")}
				</Text>
			</View>
		);
	},
);