import React from "react";
import { withJsonFormsControlProps } from "@jsonforms/react";
import {
	rankWith,
	isDateControl,
	isTimeControl,
	isDateTimeControl,
	RankedTester
} from "@jsonforms/core";
import { withCustomInputWrapper, InputFieldContainer } from "./InputWrapper";

interface DateControlProps {
	data: any;
	handleChange(path: string, value: any): void;
	path: string;
	schema: any;
	uischema: any;
	enabled: boolean;
	id: string;
	errors: any;
	required?: boolean;
	rootSchema: any;
}

const DateTimeInputControl = (props: DateControlProps) => {
	const { handleChange, path, uischema } = props;

	let format = uischema?.options?.format ?? "date";
	if (format === "date-time") {
		format = "datetime-local";
	}

	return (
		<InputFieldContainer controlProps={props}>
			<input
				{...props}
				type={format}
				id={format}
				name={format}
				className={
					"mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
				}
				onChange={(event) => handleChange(path, event.target.value)}
			/>
		</InputFieldContainer>
	);
};

export const dateControlTester: RankedTester = rankWith(
	5, //increase rank as needed
	isDateControl
);

export const timeControlTester: RankedTester = rankWith(5, isTimeControl);

export const dateTimeControlTester: RankedTester = rankWith(
	5,
	isDateTimeControl
);

export default withJsonFormsControlProps(
	withCustomInputWrapper(DateTimeInputControl)
);
