import React, { forwardRef, FocusEvent, FormEvent } from 'react';
import { createComponent } from '@lit/react';
import { MdFilledTextField as MdFilledTextFieldWebComponent } from '@material/web/textfield/filled-text-field';
import { MdOutlinedTextField as MdOutlinedTextFieldWebComponent } from '@material/web/textfield/outlined-text-field';
import { AriaProps } from '../types/aria';

const MdFilledTextField = createComponent({
	react: React,
	tagName: 'md-filled-text-field',
	elementClass: MdFilledTextFieldWebComponent,
});

const MdOutlinedTextField = createComponent({
	react: React,
	tagName: 'md-outlined-text-field',
	elementClass: MdOutlinedTextFieldWebComponent,
});

type TextFieldProps = AriaProps & {
	variant?: 'filled' | 'outlined';
	error?: boolean;
	errorText?: string;
	label?: string;
	noAsterisk?: boolean;
	required?: boolean;
	value?: string;
	defaultValue?: string;
	prefixText?: string;
	suffixText?: string;
	supportingText?: string;
	textDirection?: "ltr" | "rtl";
	type?: 'text' | 'textarea' | 'number' | 'email' | 'password' | 'tel' | 'search' | 'url';
	rows?: number;
	cols?: number;
	maxLength?: number;
	minLength?: number;
	noSpinner?: boolean;
	pattern?: string;
	placeholder?: string;
	readOnly?: boolean;
	disabled?: boolean;
	name?: string;
	selectionDirection?: "none" | "forward" | "backward";
	selectionEnd?: number;
	selectionStart?: number;
	valueAsNumber?: number;
	valueAsDate?: Date;

	className?: string;
	style?: React.CSSProperties;
	id?: string;
	onChange?: (e: FormEvent<MdFilledTextFieldWebComponent | MdOutlinedTextFieldWebComponent>) => void;
	onInput?: (e: FormEvent<MdFilledTextFieldWebComponent | MdOutlinedTextFieldWebComponent>) => void;
	onFocus?: (e: FocusEvent<MdFilledTextFieldWebComponent | MdOutlinedTextFieldWebComponent>) => void;
	onBlur?: (e: FocusEvent<MdFilledTextFieldWebComponent | MdOutlinedTextFieldWebComponent>) => void;
};

type FilledTextFieldProps = TextFieldProps & {
	variant?: 'filled';
};

type OutlinedTextFieldProps = TextFieldProps & {
	variant?: 'outlined';
};

export const TextField = forwardRef<MdFilledTextFieldWebComponent | MdOutlinedTextFieldWebComponent, TextFieldProps>(({
	variant = 'filled',
	...rest
}, ref) => {
	if (variant === 'filled') {
		return <MdFilledTextField {...rest as FilledTextFieldProps} ref={ref as React.Ref<MdFilledTextFieldWebComponent>} />;
	}
	return <MdOutlinedTextField {...rest as OutlinedTextFieldProps} ref={ref as React.Ref<MdOutlinedTextFieldWebComponent>} />;
});