import React from "react";
import { Container } from "../util/container";
import { Section } from "../util/section";
import type { Template } from "tinacms";
import { PageBlocksTitle } from "../../tina/__generated__/types";
import { tinaField } from "tinacms/dist/react";
import { PageBlockFunction } from "../blocks-renderer";

enum titleSize {
    h1 = "h1",
    h2 = "h2",
    h3 = "h3",
    h4 = "h4"
}

export const Title: PageBlockFunction<PageBlocksTitle> = ({ data }) => {
    return (
        <Section>
            <Container
                className={ `prose default-text-color mt-2 title-block${ data?.size ? ` title-size-${ data.size }` : "" }` }

                size="custom"
                width="large"
            >
                <div className={ "title-block" }
                    data-tina-field={ tinaField(data, "title") }>
                    { data.title }
                </div>
            </Container>
        </Section>
    );
};

export const titleBlockSchema: Template = {
    name: "title",
    label: "Titre",
    ui: {
        previewSrc: "/blocks/content.png",
        defaultItem: {
            size: Object.values(titleSize)[0],
            title: "Lorem ipsum"
        }
    },
    fields: [
        {
            type: "string",
            label: "Taille",
            name: "size",
            options: Object.values(titleSize)
        },
        {
            type: "string",
            label: "Texte",
            name: "title"
        }
    ]
};