import type { ChangeEvent, FC } from 'react';
import React, { useCallback, useEffect, useRef, useState } from 'react';

const CLASSNAME = 'EditableLinkInput';
export const INTL_CLASSNAME = 'neighbouringRights.editableLinkInput';

interface Props {
    value?: string | null;
    name?: string;
    isDisabled: boolean;
    className?: string;
    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
    onLinkClick?: () => void;
}

const EditableLinkInput: FC<Props> = ({
    value,
    name,
    isDisabled,
    className,
    onChange,
    onLinkClick,
}) => {
    const [isEditMode, setIsEditMode] = useState<boolean>(false);
    const inputRef = useRef<HTMLInputElement>(null);

    useEffect(() => {
        if (isEditMode) inputRef.current?.focus();
    }, [isEditMode]);

    const editModeOn = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
        if ((e.nativeEvent.target as Element)?.tagName === 'A') return;

        setIsEditMode(e.nativeEvent.type === 'click');
    }, []);

    const editModeOff = useCallback(() => {
        setIsEditMode(!value);
    }, [value]);

    const processedLink =
        !value || /^https?:\/\//.test(value) ? value : `http://${value}`;

    return (
        <div
            className={CLASSNAME}
            onClick={editModeOn}
            role="textbox"
            tabIndex={0}
            onKeyPress={() => {
                return;
            }}
        >
            {!isEditMode && processedLink && (
                <a
                    href={processedLink}
                    target="_blank"
                    rel="noreferrer"
                    onClick={onLinkClick}
                >
                    {$t(`${INTL_CLASSNAME}.link`)}
                </a>
            )}

            {(isEditMode || !value) && (
                <input
                    className={className}
                    defaultValue={value || ''}
                    onChange={onChange}
                    disabled={isDisabled}
                    name={name}
                    onBlur={editModeOff}
                    ref={inputRef}
                />
            )}
        </div>
    );
};

export default EditableLinkInput;