import { ReactNode } from "react";

import Validators from "../Validators/Validators";
//import { IProps as IBaseFieldProps } from "../.";
import classes from "./classes.module.scss";
import BaseField, { IProps as IBaseFieldProps } from "../Elements/BaseField";

export type IProps = IBaseFieldProps & {
	large?: boolean;
};

export default class InputField extends BaseField<IProps> {
	public override render(): ReactNode {
		let pattern;

		if (this.props.type === "number") {
			pattern = "(^[0-9]*)(\\.{0,1})([0-9]*)$";
		}

		if (this.props.pattern) {
			pattern = this.props.pattern;
		}

		if (this.props.fieldRef) {
			this.fieldRef = this.props.fieldRef;
		}

		// we always need to control the input so we need to set the value as "" by default
		const value = this.state.value ?? "";

		if (this.props.large === true) {
			return (
				<textarea
					maxLength={this.props.maxLength}
					name={this.props.name}
					required={this.props.required}
					ref={this.props.fieldRef}
					rows={4}
					value={value}
					onChange={this.onChange}
					data-has-validation-errors={this.state.errors.length > 0}
					className={this.props.className ? [classes["textarea"], classes[this.props.className]].join(" ") : classes["textarea"]}
				/>
			);
		} else {
			return (
				<input
					{...this.getHtmlAttributes()}
					ref={this.props.fieldRef}
					pattern={pattern}
					onChange={this.onChange}
					value={value}
					data-has-validation-errors={this.state.errors.length > 0}
					className={this.props.className ? [classes["input"], classes[this.props.className]].join(" ") : classes["input"]}
				/>
			);
		}
	}

	// We filter the props we'll pass to the primitive input as they're useless for it
	// It also avoids the console warning because of passing useless props to a primitive DOM element
	private getHtmlAttributes() {
		const htmlAttributes = { ...this.props };

		delete htmlAttributes.disableValidation;
		delete htmlAttributes.onErrors;
		delete htmlAttributes.fieldRef;
		delete htmlAttributes.className;
		delete htmlAttributes.defaultValue;

		for (const validator in Validators) {
			delete (htmlAttributes as { [key: string]: any })[validator];
		}

		return htmlAttributes;
	}
}