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

export const FacebookPageTimeline: PageBlockFunction<PageBlocksFacebookPageTimeline> = ({ data }) => {
    return (
        <Section>
            <Container
                className={ "mt-2 flex justify-center" }
                size="custom"
                width="large"
            >
                { data.page &&
                <iframe
                    src={ `https://www.facebook.com/plugins/page.php?href=${
                        encodeURIComponent(data.page)
                    }&tabs=timeline&width=500&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId` }
                    width="500"
                    height="500"
                    style={ { border: "none", overflow: "hidden" } }
                    scrolling="no"
                    frameBorder="0"
                    allowFullScreen={ true }
                    allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"/> }
            </Container>
        </Section>
    );
};

export const facebookPageTimelineBlockSchema: Template = {
    name: "facebookPageTimeline",
    label: "Plugin page facebook",
    ui: {
        defaultItem: {
            page: ""
        }
    },
    fields: [
        {
            type: "string",
            label: "URL Page",
            name: "page"
        }
    ]
};