import React, {useEffect, useRef} from 'react';
import './textarea.scss'
import FormError from "../../FormError/FormError";
import close from "../../../../assets/images/close.svg";

type TextAreaProps = {
    clearable?: boolean;
    value?: any
    onChange: (s: string) => void
    required?: boolean
    id?: string
    readOnly?: boolean
    inputMode?: 'text' | 'numeric'
    placeholder?: string
    hasError?: any
    maxLength?: number
    maxRows?: number;
    customClass?: string;
    theme?:string;
    largeText?: boolean
    isUrl?: boolean
}

const CustomTextArea = (
    {
        clearable = true,
        value,
        onChange,
        required = false,
        id = 'fieldId',
        readOnly = false,
        inputMode = 'text',
        placeholder = 'Παρακαλώ συμπληρώστε',
        maxRows = 2,
        hasError = '',
        maxLength,
        customClass='',
        largeText,
        isUrl
    }: TextAreaProps) => {
    const textAreaRef = useRef<HTMLTextAreaElement>(null);

    useEffect(() => {
        const element = textAreaRef.current;
        if (element) {
            if(largeText) {
                element.style.overflow = "auto";
                element.style.height = "350px";
            } else {
                element.style.overflow = "hidden";
                element.style.height = "50px";
            }
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    const handleInput = (event: React.FormEvent<HTMLTextAreaElement>) => {
        const element = event.currentTarget;
        if (maxRows !== undefined) {
            const rows = element.value.split("\n");
            let exceedsMaxRows = false;

            for (let i = 0; i < rows.length; i++) {
                if (rows[i].length > 86) {
                    exceedsMaxRows = true;
                    break;
                }
            }

            if (exceedsMaxRows || rows.length > maxRows) {
                element.style.overflow = "auto";
                element.style.height = "75px";
            } else {
                element.style.overflow = "hidden";
                element.style.height = "50px";
            }
        }
    };


    //@ts-ignore
    return (
        <>
        <div className={`d-flex ${customClass}`}>
            {
                isUrl ?

                <a href={value} target="_blank">{value != '--' ? value : '--'}</a>

                :

                <textarea
                    rows={10}
                    ref={textAreaRef}
                    className={`text-area user-form-field ${readOnly && 'disable'} ${hasError && 'hasError'} ${customClass}`}
                    readOnly={readOnly}
                    id={id}
                    required={required}
                    inputMode={inputMode}
                    placeholder={placeholder}
                    maxLength={maxLength}
                    value={value}
                    onChange={(e) => onChange(e.target.value)}
                    onInput={largeText ? () => {} : handleInput}
                />
            }

            {clearable && value && !readOnly && value.length > 0 &&
                <img src={close} className={'clear'}
                     onClick={
                    (e) => {
                        e.stopPropagation()
                        onChange('')
                    }}
                />
            }
        </div>
        {hasError &&  <FormError>{hasError}</FormError>}
        </>
    )
}

export default CustomTextArea;