import CloudUploadIcon from "@mui/icons-material/CloudUpload";
import {
	Box,
	Button,
	FormLabel,
	styled,
	TextareaAutosize,
	TextField,
} from "@mui/material";
import { DatePicker } from "@mui/x-date-pickers";
import { createFileRoute } from "@tanstack/react-router";
import type { ChangeEvent } from "react";

const VisuallyHiddenInput = styled("input")({
	clip: "rect(0 0 0 0)",
	clipPath: "inset(50%)",
	height: 1,
	overflow: "hidden",
	position: "absolute",
	bottom: 0,
	left: 0,
	whiteSpace: "nowrap",
	width: 1,
});

export const Route = createFileRoute("/add/")({
	component: RouteComponent,
});

function RouteComponent() {
	return (
		<Box
			component="form"
			enctype="multipart/form-data"
			action="/api/announcements"
			method="POST"
			sx={{
				display: "flex",
				flexDirection: "column",
				"& > :not(style)": { m: 1, width: "25ch" },
			}}
			noValidate
			autoComplete="off"
		>
			<TextField name="title" label="Title"></TextField>
			<FormLabel>Text:</FormLabel>
			<TextareaAutosize name="text" minRows={6}></TextareaAutosize>
			<DatePicker name="publication_date" />
			<Button
				component="label"
				variant="contained"
				tabIndex={-1}
				startIcon={<CloudUploadIcon />}
			>
				Upload files
				<VisuallyHiddenInput
					type="file"
					name="image"
					onChange={(event: ChangeEvent<HTMLInputElement>) =>
						console.log(event.target.files)
					}
				/>
			</Button>
			<Button variant="contained" type="submit">
				Submit
			</Button>
		</Box>
	);
}