import config from "../config.ts";

interface EditableTitleProps {
    title: string;
    canEdit: boolean;
    editAction: string;
    bodyFieldName: string;
    bodyValue: string;
}

export function EditableTitle({
    title,
    canEdit,
    editAction,
    bodyFieldName,
    bodyValue,
}: EditableTitleProps) {
    return (
        <>
            {canEdit && (
                <input
                    type="checkbox"
                    id="title-edit-toggle"
                    class="title-edit-toggle"
                />
            )}
            <div class="title-with-edit">
                <h2 class="issue-detail-title" safe>
                    {title}
                </h2>
                {canEdit && (
                    <>
                        <div class="title-edit-form-area">
                            <form
                                method="POST"
                                action={editAction}
                                class="title-edit-form"
                            >
                                <input
                                    class="form-input"
                                    name="title"
                                    value={title}
                                    required
                                    maxlength={config.MAX_TITLE_BYTES}
                                />
                                <input
                                    type="hidden"
                                    name={bodyFieldName}
                                    value={bodyValue}
                                />
                                <div class="title-edit-actions">
                                    <button
                                        type="submit"
                                        class="btn btn-sm btn-primary"
                                    >
                                        Save
                                    </button>
                                    <label
                                        for="title-edit-toggle"
                                        class="btn btn-sm"
                                    >
                                        Cancel
                                    </label>
                                </div>
                            </form>
                        </div>
                        <label
                            for="title-edit-toggle"
                            class="btn btn-xs title-edit-open"
                        >
                            Edit title
                        </label>
                    </>
                )}
            </div>
        </>
    );
}