<commit_before>import React, { useState, ChangeEvent, useEffect } from 'react';
import { c } from 'ttag';

import { generateUID } from '../../../helpers';
import FormModal from '../../modal/FormModal';
import { Button, PrimaryButton } from '../../button';
import Label from '../../label/Label';
import Input from '../../input/Input';

import FileButton from '../../button/FileButton';

enum ImageState {
    Initial,
    Loading,
    Error,
    Ok,
}

interface Props {
    onAddUrl: (url: string) => void;
    onAddImages: (files: File[]) => void;
    onClose?: () => void;
}

const InsertImageModal = ({ onAddUrl, onAddImages, onClose, ...rest }: Props) => {
    const [uid] = useState(generateUID('editor-image-modal'));
    const [imageSrc, setImageSrc] = useState<string>();
    const [imageState, setImageState] = useState(ImageState.Initial);

    const handleSuccess = () => setImageState(ImageState.Ok);
    const handleError = () => setImageState(ImageState.Error);

    // Check if the image url is valid
    const checkImageUrl = (url: string) => {
        const image = new Image();
        image.onload = () => handleSuccess();
        image.onerror = () => handleError();
        image.src = url;
    };

    useEffect(() => {
        if (imageSrc) {
            checkImageUrl(imageSrc);
        }
    }, [imageSrc]);

    const handleChange = async (event: ChangeEvent<HTMLInputElement>) => {
        setImageSrc(event.target.value);
    };

    const handleSubmit = () => {
        onAddUrl(imageSrc as string);
        onClose?.();
    };

    const handleAddFiles = (files: File[]) => {
        onAddImages(files);
        onClose?.();
    };

    return (
        <FormModal
            title={c('Info').t`Insert image`}
            onSubmit={handleSubmit}
            onClose={onClose}
            footer={
                <>
                    <Button type="reset">{c('Action').t`Cancel`}</Button>
                    <PrimaryButton type="submit" disabled={imageState !== ImageState.Ok}>
                        {c('Action').t`Save`}
                    </PrimaryButton>
                </>
            }
            {...rest}
        >
            <div className="flex flex-nowrap mb1 on-mobile-flex-column">
                <Label htmlFor={`editor-image-address-${uid}`}>{c('Info').t`Add image URL`}</Label>
                <div className="flex-item-fluid">
                    <Input
                        id={`editor-image-address-${uid}`}
                        type="text"
                        autoComplete="off"
                        placeholder={c('Info').t`Image URL`}
                        error={imageState === ImageState.Error ? c('Info').t`Not a valid URL` : undefined}
                        onChange={handleChange}
                    />
                </div>
            </div>
            <div className="flex flex-nowrap mb1 on-mobile-flex-column">
                <Label htmlFor={`editor-image-upload-${uid}`}>{c('Info').t`Upload picture`}</Label>
                <div className="flex-item-fluid">
                    <FileButton
                        id={`editor-image-upload-${uid}`}
                        className="inline-flex relative flex-align-items-center"
                        onAddFiles={handleAddFiles}
                    >
                        {c('Action').t`Upload picture`}
                    </FileButton>
                </div>
            </div>
        </FormModal>
    );
};

export default InsertImageModal;<commit_msg>Add data-testid<commit_after>import React, { useState, ChangeEvent, useEffect } from 'react';
import { c } from 'ttag';

import { generateUID } from '../../../helpers';
import FormModal from '../../modal/FormModal';
import { Button, PrimaryButton } from '../../button';
import Label from '../../label/Label';
import Input from '../../input/Input';

import FileButton from '../../button/FileButton';

enum ImageState {
    Initial,
    Loading,
    Error,
    Ok,
}

interface Props {
    onAddUrl: (url: string) => void;
    onAddImages: (files: File[]) => void;
    onClose?: () => void;
}

const InsertImageModal = ({ onAddUrl, onAddImages, onClose, ...rest }: Props) => {
    const [uid] = useState(generateUID('editor-image-modal'));
    const [imageSrc, setImageSrc] = useState<string>();
    const [imageState, setImageState] = useState(ImageState.Initial);

    const handleSuccess = () => setImageState(ImageState.Ok);
    const handleError = () => setImageState(ImageState.Error);

    // Check if the image url is valid
    const checkImageUrl = (url: string) => {
        const image = new Image();
        image.onload = () => handleSuccess();
        image.onerror = () => handleError();
        image.src = url;
    };

    useEffect(() => {
        if (imageSrc) {
            checkImageUrl(imageSrc);
        }
    }, [imageSrc]);

    const handleChange = async (event: ChangeEvent<HTMLInputElement>) => {
        setImageSrc(event.target.value);
    };

    const handleSubmit = () => {
        onAddUrl(imageSrc as string);
        onClose?.();
    };

    const handleAddFiles = (files: File[]) => {
        onAddImages(files);
        onClose?.();
    };

    return (
        <FormModal
            title={c('Info').t`Insert image`}
            onSubmit={handleSubmit}
            onClose={onClose}
            footer={
                <>
                    <Button type="reset" data-testid="insert-image:cancel">{c('Action').t`Cancel`}</Button>
                    <PrimaryButton
                        type="submit"
                        disabled={imageState !== ImageState.Ok}
                        data-testid="insert-image:save"
                    >
                        {c('Action').t`Save`}
                    </PrimaryButton>
                </>
            }
            {...rest}
        >
            <div className="flex flex-nowrap mb1 on-mobile-flex-column">
                <Label htmlFor={`editor-image-address-${uid}`}>{c('Info').t`Add image URL`}</Label>
                <div className="flex-item-fluid">
                    <Input
                        id={`editor-image-address-${uid}`}
                        type="text"
                        autoComplete="off"
                        placeholder={c('Info').t`Image URL`}
                        error={imageState === ImageState.Error ? c('Info').t`Not a valid URL` : undefined}
                        onChange={handleChange}
                        data-testid="insert-image:url"
                    />
                </div>
            </div>
            <div className="flex flex-nowrap mb1 on-mobile-flex-column">
                <Label htmlFor={`editor-image-upload-${uid}`}>{c('Info').t`Upload picture`}</Label>
                <div className="flex-item-fluid" data-testid="insert-image:upload">
                    <FileButton
                        id={`editor-image-upload-${uid}`}
                        className="inline-flex relative flex-align-items-center"
                        onAddFiles={handleAddFiles}
                    >
                        {c('Action').t`Upload picture`}
                    </FileButton>
                </div>
            </div>
        </FormModal>
    );
};

export default InsertImageModal;
{'fraction_non_alphanumeric': 0.1522038567493113, 'fraction_numerical': 0.0005509641873278236, 'mean_word_length': 1.6872686898593634, 'pattern_counts': {'":': 0, '<': 53, '<?xml version=': 0, '>': 79, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3956078', 'n_tokens_mistral': 1973, 'n_tokens_neox': 1920, 'n_words': 384}