import { Autocomplete, Button, TextField } from "@mui/material";
import { getLocalizedString } from "@olenbetong/appframe-core";
import { useEffect, useRef, useState } from "react";

export type DescriptionInputType = {
	Description?: string | null;
	Cause?: string | null;
	Action?: string | null;
	Date?: Date;
};

type DescriptionInputProps = {
	value?: DescriptionInputType | null;
	defaultValue?: DescriptionInputType | null;
	descriptionOptions?: string[];
	storageNamespace?: string;
	onCopyPrevDamage?: (value: DescriptionInputType) => void;
	onChange?: (value: DescriptionInputType) => void;
};

export function DescriptionInput({
	value,
	defaultValue,
	descriptionOptions = [
		getLocalizedString("Tear in element"),
		getLocalizedString("Damage around lifting anchor"),
		getLocalizedString("Damage on underside"),
	],
	storageNamespace = "ElementDamage",
	onCopyPrevDamage,
	onChange,
}: DescriptionInputProps) {
	let initializedRef = useRef<boolean>(false);

	let [input, setInput] = useState<DescriptionInputType | null>(defaultValue ?? null);
	let inputValue = value === undefined ? input : value;

	// biome-ignore lint: intentionally skipping "value" dependency as this shouldn't run when "value" changes
	useEffect(() => {
		if (initializedRef.current) {
			return;
		}

		if (value === undefined && defaultValue) {
			setInput(defaultValue);
			initializedRef.current = true;
		}
	}, [defaultValue]);

	function handleCopyPrevDamage() {
		let description = localStorage.getItem(`${storageNamespace}_Description`) ?? "";
		let cause = localStorage.getItem(`${storageNamespace}_Cause`) ?? "";
		let action = localStorage.getItem(`${storageNamespace}_Action`) ?? "";

		onCopyPrevDamage?.({
			Description: description,
			Cause: cause,
			Action: action,
		});
		setInput({
			...inputValue,
			Description: description,
			Cause: cause,
			Action: action,
		});
	}

	function handleOnChange(value: DescriptionInputType) {
		onChange?.(value);
		setInput(value);
	}

	return (
		<>
			<TextField
				name="Date"
				type="date"
				value={(inputValue?.Date ?? new Date()).toISOString().split("T")[0]}
				onChange={(event) => handleOnChange({ ...inputValue, Date: new Date(event.target.value) })}
				id="NewElementDamage_Date"
				label={getLocalizedString("Date")}
				fullWidth
				required
				slotProps={{ inputLabel: { shrink: true } }}
			/>

			<Button variant="contained" onClick={handleCopyPrevDamage}>
				{getLocalizedString("Copy previous damage")}
			</Button>

			<Autocomplete
				value={inputValue?.Description ?? ""}
				onChange={(_event, value) => handleOnChange({ ...inputValue, Description: value ?? "" })}
				options={descriptionOptions}
				freeSolo
				renderInput={(params) => (
					<TextField name="Description" required {...(params as any)} label={getLocalizedString("Description")} />
				)}
			/>

			<TextField
				name="Cause"
				id="NewElementDamage_Cause"
				value={inputValue?.Cause ?? ""}
				onChange={(event) => handleOnChange({ ...inputValue, Cause: event.currentTarget.value })}
				label={getLocalizedString("Cause")}
				fullWidth
			/>

			<TextField
				name="Action"
				id="NewElementDamage_Action"
				value={inputValue?.Action ?? ""}
				onChange={(event) => handleOnChange({ ...inputValue, Action: event.currentTarget.value })}
				label={getLocalizedString("Action")}
				fullWidth
			/>
		</>
	);
}