import * as React from "react";
import { Actions } from "../util/actions";
import { Container } from "../util/container";
import { Section } from "../util/section";
import { TinaMarkdown } from "tinacms/dist/rich-text";
import type { Template } from "tinacms";
import { PageBlocksHero } from "../../tina/__generated__/types";
import { tinaField } from "tinacms/dist/react";
import { PageBlockFunction } from "../blocks-renderer";

export const Hero: PageBlockFunction<PageBlocksHero> = ({ data }) => {
    return (
        <Section color={ data.color }>
            <Container
                size="large"
                className="grid grid-cols-1 md:grid-cols-5 gap-14 items-center justify-center"
            >
                <div className="row-start-2 md:row-start-1 md:col-span-3 text-center md:text-left">
                    { data.tagline && (
                        <h2
                            data-tina-field={ tinaField(data, "tagline") }
                            className="relative inline-block px-3 py-1 mb-8 text-md font-bold tracking-wide title-font z-20"
                        >
                            { data.tagline }
                            <span className="absolute w-full h-full left-0 top-0 rounded-full -z-1 bg-current opacity-7" />
                        </h2>
                    ) }
                    { data.headline && (
                        <h3
                            data-tina-field={ tinaField(data, "headline") }
                            className={ "w-full relative	mb-10 text-5xl font-extrabold tracking-normal leading-tight title-font" }
                        >
                            <span
                                className={ "bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-100" }
                            >
                                { data.headline }
                            </span>
                        </h3>
                    ) }
                    { data.text && (
                        <div
                            data-tina-field={ tinaField(data, "text") }
                            className={ "prose prose-lg mx-auto md:mx-0 mb-10 prose-primary" }
                        >
                            <TinaMarkdown content={ data.text } />
                        </div>
                    ) }
                    { data.actions && (
                        <Actions
                            className="justify-center md:justify-start py-2"
                            parentColor={ data.color }
                            actions={ data.actions }
                        />
                    ) }
                </div>
                { data.image && (
                    <div
                        data-tina-field={ tinaField(data.image, "src") }
                        className="relative row-start-1 md:col-span-2 flex justify-center"
                    >
                        <img
                            className="absolute w-full rounded-lg max-w-xs md:max-w-none h-auto blur-2xl brightness-150 contrast-[0.9] dark:brightness-150 saturate-200 opacity-50 dark:opacity-30 mix-blend-multiply dark:mix-blend-hard-light"
                            src={ data.image.src }
                            aria-hidden="true"
                        />
                        <img
                            className="relative z-10 w-full max-w-xs rounded-lg md:max-w-none h-auto"
                            alt={ data.image.alt }
                            src={ data.image.src }
                        />
                    </div>
                ) }
            </Container>
        </Section>
    );
};

export const heroBlockSchema: Template = {
    name: "hero",
    label: "Hero",
    ui: {
        previewSrc: "/blocks/hero.png",
        defaultItem: {
            tagline: "Here's some text above the other text",
            headline: "This Big Text is Totally Awesome",
            text: "Phasellus scelerisque, libero eu finibus rutrum, risus risus accumsan libero, nec molestie urna dui a leo."
        }
    },
    fields: [
        {
            type: "string",
            label: "Tagline",
            name: "tagline"
        },
        {
            type: "string",
            label: "Headline",
            name: "headline"
        },
        {
            label: "Text",
            name: "text",
            type: "rich-text"
        },
        {
            label: "Actions",
            name: "actions",
            type: "object",
            list: true,
            ui: {
                defaultItem: {
                    label: "Action Label",
                    type: "button",
                    icon: true,
                    link: "/"
                },
                itemProps: (item) => ({ label: item.label })
            },
            fields: [
                {
                    label: "Label",
                    name: "label",
                    type: "string"
                },
                {
                    label: "Type",
                    name: "type",
                    type: "string",
                    options: [
                        { label: "Button", value: "button" },
                        { label: "Link", value: "link" }
                    ]
                },
                {
                    label: "Icon",
                    name: "icon",
                    type: "boolean"
                },
                {
                    label: "Link",
                    name: "link",
                    type: "string"
                }
            ]
        },
        {
            type: "object",
            label: "Image",
            name: "image",
            fields: [
                {
                    name: "src",
                    label: "Image Source",
                    type: "image"
                },
                {
                    name: "alt",
                    label: "Alt Text",
                    type: "string"
                }
            ]
        },
        {
            type: "string",
            label: "Color",
            name: "color",
            options: [
                { label: "Default", value: "default" },
                { label: "Tint", value: "tint" },
                { label: "Primary", value: "primary" }
            ]
        }
    ]
};