import React, {InputHTMLAttributes, LegacyRef, ReactNode} from "react";
import styles from "./Input.module.scss";
import {Info} from "react-feather"

interface Props extends InputHTMLAttributes<any> {
    id?: string;
    label?: string;
    toolTip?: string;
    error?: string;
    fullWidth?: boolean;
    icon?: ReactNode;
}

export default React.forwardRef(({label, error, fullWidth, icon, toolTip, ...props}: Props, forwardRef: LegacyRef<any>) => {

    if (label && !props.id) {
        throw new Error("Props id is required when label is define");
    }

    if (toolTip && !label) {
        throw new Error("Props label is required when labelInfo is define");
    }

    return (
            <div className={styles.wrap}>
                {label && <div className={styles.wrapLabel}>
                    <label htmlFor={props.id}>
                        {label}
                        {toolTip && <div className={styles.toolTip}>
                            <Info size={16}/>
                            <div className={styles.textToolTip}>{toolTip}</div>
                        </div>}
                    </label>
                </div>}
                <div className={styles.inputWrap} data-error={Boolean(error)} data-full-width={fullWidth}>
                    {icon}
                    <input ref={forwardRef} {...props}/>
                </div>
                {error && <div className={styles.error}>{error}</div>}
            </div>
    );
});