import axios from "axios"
import { Box, IconButton, SxProps, Theme, Typography, useTheme } from "@mui/material"
import { Document, Page } from "react-pdf"
import { Buffer } from "buffer"
import { downloadFileToDevice } from "@root/utils/downloadFileToDevice"
import EditIcon from "@mui/icons-material/Edit"
import { ChangeEvent, useRef } from "react"
import { SendDocumentsArgs, Verification } from "@root/model/auth"
import makeRequest from "@api/makeRequest"
import { jsonToFormdata } from "@utils/jsonToFormdata"
import { parseAxiosError } from "@utils/parse-error"
import { readFile } from "@root/utils/readFile"
import { enqueueSnackbar } from "notistack"

type KeyNames =
	"inn" |
	"rule" |
	"certificate"
interface Props {
	text: string;
	documentUrl: string;
	sx?: SxProps<Theme>;
	keyName: KeyNames
}


export default function DocumentItem({ text, documentUrl = "", sx, keyName }: Props) {
	const theme = useTheme()

	const fileInputRef = useRef<HTMLInputElement>(null)

	function handleChooseFileClick() {
		fileInputRef.current?.click()
	}

	const downloadFile = async () => {
		const { data } = await axios.get<ArrayBuffer>(documentUrl, {
			responseType: "arraybuffer",
		})

		if (!data) {
			return
		}

		downloadFileToDevice(
			`${documentUrl.split("/").pop()?.split(".")?.[0] || "document"}.pdf`,
			Buffer.from(data)
		)

		return
	}

	async function sendDocument(
		e: ChangeEvent<HTMLInputElement>
	) {
		const target = e.target as HTMLInputElement;
		const file = target?.files?.[0] || null;
		if (file !== null) {
			const readedFile = await readFile(file, "binary")
			try {
				await makeRequest<FormData, Verification>({
					url: process.env.REACT_APP_DOMAIN + "/verification" + "/verification",
					method: "PATCH",
					useToken: true,
					withCredentials: true,
					body: jsonToFormdata({ [keyName]: readedFile }),
				})

				enqueueSnackbar("Данные обновлены")
			} catch (nativeError) {
				const [error] = parseAxiosError(nativeError)

				enqueueSnackbar(`Ошибка отправки документов. ${error}`)
			}
		}
	}

	return (
		<Box
			sx={{
				display: "flex",
				flexDirection: "column",
				alignItems: "start",
				gap: "10px",
				...sx,
			}}
		>
			<Typography
				sx={{
					color: "#4D4D4D",
					fontWeight: 500,
					fontVariantNumeric: "tabular-nums",
				}}
			>
				{text}
			</Typography>
			{documentUrl && (
				<>
					<Box sx={{ display: "flex", alignItems: "center" }}>
						<Typography
							sx={{ color: theme.palette.purple.main, cursor: "pointer" }}
							onClick={downloadFile}
						>
							{documentUrl.split("/").pop()?.split(".")?.[0]}
						</Typography>
						<IconButton
							onClick={handleChooseFileClick}
						>
							<EditIcon sx={{ color: theme.palette.purple.main }} />
						</IconButton>
						<input
							ref={fileInputRef}
							style={{ display: "none" }}
							onChange={sendDocument}
							type="file"
							id="image-file"
							multiple
							accept={"application/pdf"}
						/>
					</Box>

					<Document file={documentUrl}>

						<Page
							pageNumber={1}
							width={200}
							renderTextLayer={false}
							renderAnnotationLayer={false}
						/>
					</Document>
				</>
			)}
		</Box>
	)
}