import { useRef } from "preact/hooks";
import { Mentions } from "../../../App/Mentions";
import { useGuild } from "../../../App/useGuild";

export const Field = ({ title, value, inline, index, onUpdate }) => {
    const guild = useGuild();
    const input = useRef(null);

    return (
        <div data-inlined={inline ? "1" : "0"} class="embed-field-box" key={index}>
            <label class="is-sr-only" for="embedFieldTitle">
                Field Title
            </label>
            <div class="is-flex">
                <textarea
                    class="discord-field-title field-input message-input autoresize"
                    placeholder="Field Title..."
                    rows={1}
                    maxlength={256}
                    name="embed_field_title[]"
                    value={title}
                    onInput={(ev) =>
                        onUpdate({
                            index,
                            title: ev.currentTarget.value,
                        })
                    }
                />
                {(value !== "" || title !== "") && (
                    <button
                        class="button is-small inline-btn"
                        onClick={() => {
                            onUpdate({
                                index,
                                inline: !inline,
                            });
                        }}
                    >
                        <span class="is-sr-only">Toggle field inline</span>
                        <i class="fas fa-arrows-h"></i>
                    </button>
                )}
            </div>

            {guild && <Mentions input={input} />}
            <label class="is-sr-only" for="embedFieldValue">
                Field Value
            </label>
            <textarea
                class="discord-field-value field-input message-input autoresize "
                placeholder="Field Value..."
                maxlength={1024}
                name="embed_field_value[]"
                rows={1}
                ref={input}
                value={value}
                onInput={(ev) =>
                    onUpdate({
                        index,
                        value: ev.currentTarget.value,
                    })
                }
            ></textarea>
        </div>
    );
};
