import React, { useState } from 'react';
import i18n from 'ui-i18n';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import InputBase from '@mui/material/InputBase';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import { useStyles } from './styles';
var isEmptyField = function (value) { return value.trim().length === 0; };
export var ImageByUrlField = function (_a) {
    var onSend = _a.onSend;
    var styles = useStyles();
    var _b = useState(''), value = _b[0], setValue = _b[1];
    var _c = useState(null), error = _c[0], setError = _c[1];
    var handleChange = function (e) {
        var newValue = e.target.value;
        var regExp = new RegExp(/^(ftp|http|https):\/\/[^ "]+$/);
        var isCorrectUrl = regExp.test(newValue);
        setValue(newValue);
        if (!isCorrectUrl && !isEmptyField(newValue)) {
            setError(i18n.text('URL is not correct'));
        }
        else {
            setError(null);
        }
    };
    var handleSend = function () {
        onSend(value);
        setValue('');
        setError(null);
    };
    return (React.createElement(Box, { className: styles.root },
        React.createElement(Paper, { className: styles.paper },
            React.createElement(InputBase, { value: value, onChange: handleChange, classes: { root: styles.inputRoot, input: styles.input }, placeholder: i18n.text('Paste an image URL here') }),
            React.createElement(Button, { disabled: Boolean(error) || isEmptyField(value), variant: "outlined", color: "primary", onClick: handleSend }, i18n.text('Send'))),
        error && (React.createElement(Typography, { "data-reltio-id": "url-error-message", className: styles.errorMessage }, error))));
};
