import {
	Box,
	Button,
	IconButton,
	Typography,
	useMediaQuery,
	useTheme,
} from "@mui/material"
import ArrowBackIcon from "@mui/icons-material/ArrowBack"
import SectionWrapper from "@components/SectionWrapper"
import PaymentMethodCard from "./PaymentMethodCard"
import mastercardLogo from "../../assets/bank-logo/logo-mastercard.png"
import visaLogo from "../../assets/bank-logo/logo-visa.png"
import qiwiLogo from "../../assets/bank-logo/logo-qiwi.png"
import mirLogo from "../../assets/bank-logo/logo-mir.png"
import tinkoffLogo from "../../assets/bank-logo/logo-tinkoff.png"
import { cardShadow } from "@root/utils/theme"
import { useEffect, useLayoutEffect, useState } from "react"
import InputTextfield from "@root/components/InputTextfield"
import { sendPayment } from "@root/api/wallet"
import { getMessageFromFetchError } from "@frontend/kitui"
import { enqueueSnackbar } from "notistack"
import { currencyFormatter } from "@root/utils/currencyFormatter"
import { useLocation, useNavigate } from "react-router-dom"
import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker"

const paymentMethods = [
	{ name: "Mastercard", image: mastercardLogo },
	{ name: "Visa", image: visaLogo },
	{ name: "QIWI Кошелек", image: qiwiLogo },
	{ name: "Мир", image: mirLogo },
	{ name: "Тинькофф", image: tinkoffLogo },
] as const

type PaymentMethod = (typeof paymentMethods)[number]["name"];

export default function Payment() {
	const theme = useTheme()
	const upMd = useMediaQuery(theme.breakpoints.up("md"))
	const upSm = useMediaQuery(theme.breakpoints.up("sm"))
	const isTablet = useMediaQuery(theme.breakpoints.down(1000))

	const [selectedPaymentMethod, setSelectedPaymentMethod] =
    useState<PaymentMethod | null>(null)
	const [paymentValueField, setPaymentValueField] = useState<string>("0")
	const [paymentLink, setPaymentLink] = useState<string>("")
	const [fromSquiz, setIsFromSquiz] = useState<boolean>(false)
	const location = useLocation()

	const notEnoughMoneyAmount =
    (location.state?.notEnoughMoneyAmount as number) ?? 0

	const paymentValue = parseFloat(paymentValueField) * 100
	
	useLayoutEffect(() => {
		// eslint-disable-next-line react-hooks/exhaustive-deps
		setPaymentValueField((notEnoughMoneyAmount / 100).toString())
		const params = new URLSearchParams(window.location.search)
		const fromSquiz = params.get("action")
		if (fromSquiz === "squizpay") {
			setIsFromSquiz(true)
			setPaymentValueField((Number(params.get("dif") || "0") / 100).toString())
		}
		history.pushState(null, document.title, "/payment");
		console.log(fromSquiz)
	}, [])

	useEffect(() => {
		setPaymentLink("")
	}, [selectedPaymentMethod])

	async function handleChoosePaymentClick() {
		if (Number(paymentValueField) !== 0) {
			const [sendPaymentResponse, sendPaymentError] = await sendPayment({fromSquiz})

			if (sendPaymentError) {
				return enqueueSnackbar(sendPaymentError)
			}

			if (sendPaymentResponse) {
				setPaymentLink(sendPaymentResponse.link)
			}
		}
	}

	const handleCustomBackNavigation = useHistoryTracker()

	return (
		<SectionWrapper
			maxWidth="lg"
			sx={{
				mt: "25px",
				mb: "70px",
				px: isTablet ? (upMd ? "40px" : "18px") : "20px",
			}}
		>
			<Box
				sx={{
					mt: "20px",
					mb: "40px",
					display: "flex",
					gap: "10px",
				}}
			>
				{!upMd && (
					<IconButton
						onClick={handleCustomBackNavigation}
						sx={{ p: 0, height: "28px", width: "28px", color: "black" }}
					>
						<ArrowBackIcon />
					</IconButton>
				)}
				<Typography variant="h4">Способ оплаты</Typography>
			</Box>
			{!upMd && (
				<Typography variant="body2" mb="30px">
          Выберите способ оплаты
				</Typography>
			)}
			<Box
				sx={{
					backgroundColor: upMd ? "white" : undefined,
					display: "flex",
					flexDirection: upMd ? "row" : "column",
					borderRadius: "12px",
					boxShadow: upMd ? cardShadow : undefined,
				}}
			>
				<Box
					sx={{
						width: upMd ? "68.5%" : undefined,
						p: upMd ? "20px" : undefined,
						display: "flex",
						flexDirection: upSm ? "row" : "column",
						flexWrap: "wrap",
						gap: upMd ? "14px" : "20px",
						alignContent: "start",
					}}
				>
					{paymentMethods.map((method) => (
						<PaymentMethodCard
							isSelected={selectedPaymentMethod === method.name}
							key={method.name}
							name={method.name}
							image={method.image}
							onClick={() => setSelectedPaymentMethod(method.name)}
						/>
					))}
				</Box>
				<Box
					sx={{
						display: "flex",
						flexDirection: "column",
						justifyContent: "space-between",
						alignItems: "start",
						color: theme.palette.gray.dark,
						width: upMd ? "31.5%" : undefined,
						p: upMd ? "20px" : undefined,
						pl: upMd ? "33px" : undefined,
						mt: upMd ? undefined : "30px",
						borderLeft: upMd
							? `1px solid ${theme.palette.gray.main}`
							: undefined,
					}}
				>
					<Box
						sx={{
							display: "flex",
							flexDirection: "column",
							maxWidth: "85%",
						}}
					>
						{upMd && <Typography mb="56px">Выберите способ оплаты</Typography>}
						<Typography mb="20px">К оплате</Typography>
						{paymentLink ? (
							<Typography
								sx={{
									fontWeight: 500,
									fontSize: "20px",
									lineHeight: "48px",
									mb: "28px",
								}}
							>
								{currencyFormatter.format(paymentValue / 100)}
							</Typography>
						) : (
							<InputTextfield
								TextfieldProps={{
									placeholder: "К оплате",
									value: paymentValueField,
									type: "number",
								}}
								onChange={(e) => setPaymentValueField(e.target.value)}
								id="payment-amount"
								gap={upMd ? "16px" : "10px"}
								color={"#F2F3F7"}
								FormInputSx={{ mb: "28px" }}
							/>
						)}
					</Box>
					{paymentLink ? (
						<Button
							variant="pena-outlined-light"
							component="a"
							href={paymentLink}
							sx={{
								mt: "auto",
								color: "black",
								border: `1px solid ${theme.palette.purple.main}`,
								"&:hover": {
									backgroundColor: theme.palette.purple.dark,
									border: `1px solid ${theme.palette.purple.dark}`,
								},
							}}
						>
              Оплатить
						</Button>
					) : (
						<Button
							variant="pena-outlined-light"
							disabled={!isFinite(paymentValue)}
							onClick={handleChoosePaymentClick}
							sx={{
								mt: "auto",
								color: "black",
								border: `1px solid ${theme.palette.purple.main}`,
								"&:hover": {
									color: "white",
								},
								"&:active": {
									color: "white",
								},
							}}
						>
              Выбрать
						</Button>
					)}
				</Box>
			</Box>
		</SectionWrapper>
	)
}
