import React from "react";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import { ReactNode } from "react";
import CopyIcon from "@Assets/Icons/copy.svg";
import BaseField, { IProps as IBaseFieldProps } from "../BaseField";
import classes from "./classes.module.scss";
import classnames from "classnames";
import Image from "next/image";
import { XMarkIcon } from "@heroicons/react/24/outline";
export type IProps = IBaseFieldProps & {
	canCopy?: boolean;
	password?: boolean;
};

export default class TextField extends BaseField<IProps> {
	constructor(props: IProps) {
		super(props);
		this.state = this.getDefaultState();
	}

	public override render(): ReactNode {
		const value = this.state.value ?? "";
		return (
			<div className={classes["root"]} data-is-disabled={this.props.disabled}>
				<label>
					{this.props.label && (
						<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.INPUT_LABEL} className={classes["label"]}>
							{this.props.label}
						</Typography>
					)}
					<div className={classes["input-container"]} data-value={value} data-is-errored={this.hasError().toString()}>
						<input
							onChange={this.onChange}
							className={classnames(classes["input"], this.props.className)}
							placeholder={this.props.placeholder}
							value={value}
							onFocus={this.onFocus}
							onBlur={this.onBlur}
							name={this.props.name}
							disabled={this.props.disabled}
							type={this.props.password ? "password" : "text"}
						/>
						{this.props.canCopy && !this.hasError() && (
							<div className={classes["copy-icon"]} onClick={this.onCopyClick}>
								<Image src={CopyIcon} alt="Copy icon" />
							</div>
						)}
						{this.hasError() && (
							<div className={classes["cross-icon"]} onClick={this.onCopyClick}>
								<XMarkIcon height="24px" width="24px" color="var(--input-error)" />
							</div>
						)}
					</div>
				</label>
				{this.hasError() && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
			</div>
		);
	}

	private onCopyClick = (): void => {
		if (this.props.canCopy) {
			navigator.clipboard.writeText(this.state.value ?? "");
		}
	};
}
