import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import { ReactNode } from "react";

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

export type IProps = IBaseFieldProps & {
	fakeplaceholder: string;
	textarea?: boolean;
};

// @ts-ignore TODO: typing error on IProps (validator class?? cf Massi 22/02/23)
export default class InputField extends BaseField<IProps> {
	static override defaultProps: Partial<IBaseFieldProps> = {
		...BaseField.defaultProps,
		required: true,
	};

	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.textarea === true) {
			return (
				<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
					<div className={classes["root"]}>
						<textarea
							maxLength={this.props.maxLength}
							name={this.props.name}
							required={this.props.required}
							ref={this.props.fieldRef}
							rows={4}
							data-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"]
							}
							value={value}
							readOnly={this.props.readOnly}>
							{value.toString()}
						</textarea>
						<div className={classes["fake-placeholder"]}>
							{this.props.fakeplaceholder} {!this.props.required && " (Facultatif)"}
						</div>
					</div>
				</Typography>
			);
		} else {
			return (
				<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
					<div className={classes["root"]}>
						<input
							{...this.getHtmlAttributes()}
							ref={this.props.fieldRef}
							pattern={pattern}
							onChange={this.onChange}
							onBlur={this.onBlur}
							data-value={value}
							data-has-validation-errors={this.state.errors.length > 0}
							className={
								this.props.className ? [classes["input"], classes[this.props.className]].join(" ") : classes["input"]
							}
							value={value}
						/>
						<div className={classes["fake-placeholder"]}>
							{this.props.fakeplaceholder} {!this.props.required && " (Facultatif)"}
						</div>
					</div>
				</Typography>
			);
		}
	}

	public override componentDidMount() {
		this.setState({
			value: this.props.defaultValue ?? "",
		});
	}

	// 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;
	}
}