import { TinaMarkdown, TinaMarkdownContent } from "tinacms/dist/rich-text";
import React from "react";
import { RichTextTemplate } from "@tinacms/schema-tools";

export interface NewsletterSignupProps {
    placeholder: string;
    buttonText: string;
    children: TinaMarkdownContent;
    disclaimer?: TinaMarkdownContent;
}

const NewsletterSignup = (props: NewsletterSignupProps) => (
    <div className="bg-white">
        <div className="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
            <div className="">
                <TinaMarkdown content={ props.children } />
            </div>
            <div className="mt-8 ">
                <form className="sm:flex">
                    <label htmlFor="email-address" className="sr-only">
                        Email address
                    </label>
                    <input
                        id="email-address"
                        name="email-address"
                        type="email"
                        autoComplete="email"
                        required
                        className="w-full px-5 py-3 border border-gray-300 shadow-sm placeholder-gray-400 focus:ring-1 focus:ring-teal-500 focus:border-teal-500 sm:max-w-xs rounded-md"
                        placeholder={ props.placeholder }
                    />
                    <div className="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
                        <button
                            type="submit"
                            className="w-full flex items-center justify-center py-3 px-5 border border-transparent text-base font-medium rounded-md text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500"
                        >
                            { props.buttonText }
                        </button>
                    </div>
                </form>
                <div className="mt-3 text-sm text-gray-500">
                    { props.disclaimer && <TinaMarkdown content={ props.disclaimer } /> }
                </div>
            </div>
        </div>
    </div>
);

export const newsletterSignupSchema: RichTextTemplate = {
    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"
        }
    }
};

export default NewsletterSignup;