import React from "react";
import { Container } from "../util/container";
import { Section } from "../util/section";
import { TinaMarkdown } from "tinacms/dist/rich-text";
import type { Template, TinaTemplate } from "tinacms";
import { PageBlocksCarousel, PageBlocksContent } from "../../tina/__generated__/types";
import { tinaField } from "tinacms/dist/react";
import { PageBlockFunction } from "../blocks-renderer";
import { components } from "../posts/post";

export const Content: PageBlockFunction<PageBlocksContent> = ({ data }) => {
    return (
        <Section color={ data.color }>
            <Container
                className={ `prose prose-lg ${
                    data.color === "primary" ? "prose-primary" : "dark:prose-dark"
                }` }
                data-tina-field={ tinaField(data, "body") }
                size="large"
                width="medium"
            >
                <TinaMarkdown components={ components } content={ data.body } />
            </Container>
        </Section>
    );
};

export const contentBlockSchema: Template = {
    name: "content",
    label: "Content",
    ui: {
        previewSrc: "/blocks/content.png",
        defaultItem: {
            body: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede."
        }
    },
    fields: [
        {

            type: "rich-text",
            label: "Body",
            name: "body",
            templates: [
                {
                    name: "DateTime",
                    label: "Date & Time",
                    inline: true,
                    fields: [
                        {
                            name: "format",
                            label: "Format",
                            type: "string",
                            options: ["utc", "iso", "local"]
                        }
                    ]
                },
                {
                    name: "BlockQuote",
                    label: "Block Quote",
                    fields: [
                        {
                            name: "children",
                            label: "Quote",
                            type: "rich-text"
                        },
                        {
                            name: "authorName",
                            label: "Author",
                            type: "string"
                        }
                    ]
                },
                {
                    name: "NewsletterSignup",
                    label: "Newsletter Sign Up",
                    fields: [
                        {
                            name: "children",
                            label: "CTA",
                            type: "rich-text"
                        },
                        {
                            name: "placeholder",
                            label: "Placeholder",
                            type: "string"
                        },
                        {
                            name: "buttonText",
                            label: "Button Text",
                            type: "string"
                        },
                        {
                            name: "disclaimer",
                            label: "Disclaimer",
                            type: "rich-text"
                        }
                    ],
                    ui: {
                        defaultItem: {
                            placeholder: "Enter your email",
                            buttonText: "Notify Me"
                        }
                    }
                }
            ],
            isBody: true
        },
        {
            type: "string",
            label: "Color",
            name: "color",
            options: [
                { label: "Default", value: "default" },
                { label: "Tint", value: "tint" },
                { label: "Primary", value: "primary" }
            ]
        }
    ]
};