import React, { useState } from "react";
import dynamic from "next/dynamic";
import { updateLinks } from "../../utils";

const ReactQuill = dynamic(() => import("react-quill-new"), { ssr: false });

export const RenderRichMultiline = ({
    id,
    className,
    rows,
    datafieldname,
    name,
    label,
    input,
    meta: { touched, error },
    ...custom
}) => {
    const [editValue, setEditValue] = useState(
        input.value != null ? input.value : ""
    );

    const changeEdit = (valStr) => {
        setEditValue(valStr);
        input.onChange(valStr);
    };

    const handleBlur = () => {
        const updated = updateLinks(editValue);
        setEditValue(updated);
        input.onChange(updated);
    };

    var modules = {
        toolbar: [
            [{ "header": [1, 2, false] }],
            ["bold", "italic", "underline", "blockquote"],
            [{ "list": "ordered" }, { "list": "bullet" }],
            ["clean"]
        ]
    };

    return (
        <>
            <div
                className={
                    touched && error
                        ? "govuk-form-group govuk-form-group--error"
                        : "govuk-form-group "
                }
            >
                <label className="govuk-label" htmlFor={name}>
                    {label}
                </label>

                {error && (
                    <span id={id + "-error"} className="govuk-error-message">
                        <span className="govuk-visually-hidden">Error:</span>{" "}
                        {error}
                    </span>
                )}

                <ReactQuill
                    modules={modules}
                    theme="snow"
                    value={editValue}
                    onChange={changeEdit}
                    onBlur={handleBlur}
                />
                <textarea
                    {...input}
                    id={id}
                    name={name}
                    rows={rows}
                    className={className}
                    value={editValue}
                    style={{ display: "none" }}
                ></textarea>
            </div>
        </>
    );
};