import React from "react";
import { Container } from "../util/container";
import { ObjectField } from "@tinacms/schema-tools/dist/types";
import facebookImage from "../../public/icons/facebook.svg";
import instagramImage from "../../public/icons/instagram.svg";
import NextImage from "next/image";
import { tinaField } from "tinacms/dist/react";
import { TinaMarkdown } from "tinacms/dist/rich-text";
import { GlobalFooter } from "../../tina/__generated__/types";

export const Footer = ({ data }: { data: GlobalFooter }): React.ReactElement => {
    return (
        <footer>
            <Container className="relative" size="small">
                <div className={ "flex flex-row justify-between" }>
                    <div>
                        <p>
                            <span data-tina-field={ tinaField(data?.contact, "label") }>
                                { data?.contact?.label }
                            </span>
                            <br/>
                            <a href={ `mailto:${ data?.contact?.mail }` }
                                onClick={ () => { /* window.dataLayer.push({ event: "mail-click" });*/ } }
                                data-tina-field={ tinaField(data?.contact, "mail") }>
                                { data?.contact?.mail }
                            </a>
                            <br/>
                            <b data-tina-field={ tinaField(data?.contact, "phone") }>
                                { data?.contact?.phone }
                            </b>
                        </p>
                        <p>
                            SIRET <span data-tina-field={ tinaField(data?.legals, "siret") }>
                                { data?.legals?.siret }
                            </span>
                            <br/>
                            <a href={ data?.legals?.link?.url }
                                data-tina-field={ tinaField(data?.legals, "link") }>
                                { data?.legals?.link?.label }
                            </a>
                        </p>
                        <div id="socials"
                            className="flex flex-row"
                            data-tina-field={ tinaField(data, "social") }>
                            { data?.social?.facebook &&
                                <a href={ data?.social?.facebook }
                                    onClick={ () => { /* window.dataLayer.push({ socials: "fb-click" });*/ } }
                                    className="py-2 me-2">
                                    <NextImage src={ facebookImage } alt={ "Facebook" }/>
                                </a> }

                            { data?.social?.instagram &&
                                <a href={ data?.social?.instagram }
                                    onClick={ () => { /* window.dataLayer.push({ socials: "insta-click" });*/ } }
                                    className="py-2">
                                    <NextImage src={ instagramImage } alt={ "Facebook" }/>
                                </a> }
                        </div>
                    </div>
                    <div>
                        <div className="flex flex-row" data-tina-field={ tinaField(data, "copyright") }>
                            &copy; { data?.copyright?.year }
                            { data?.copyright?.subtext?.children?.length > 0 &&
                                <> &#8211;<span className={ "ml-1" }>
                                    <TinaMarkdown content={ data.copyright?.subtext } />
                                </span>
                                </> }
                        </div>
                    </div>
                </div>
            </Container>
        </footer>
    );
};

export const footerSchema: ObjectField = {
    type: "object",
    label: "Footer",
    name: "footer",
    fields: [
        {
            type: "object",
            label: "Contact",
            name: "contact",
            defaultItem: {
                label: "Contact :",
                mail: "mail@example.com",
                phone: "00 00 00 00 00"
            },
            fields: [
                {
                    type: "string",
                    label: "Label Contact",
                    name: "label"
                },
                {
                    type: "string",
                    label: "Mail",
                    name: "mail"
                },
                {
                    type: "string",
                    label: "Téléphone",
                    name: "phone"
                }
            ]
        },
        {
            type: "object",
            label: "Legal",
            name: "legals",
            defaultItem: {
                siret: "000 000 000 00000",
                link: {
                    label: "Mentions légales",
                    url: "/"
                }
            },
            fields: [
                {
                    type: "string",
                    label: "SIRET",
                    name: "siret"
                },
                {
                    type: "object",
                    label: "Lien Mentions Légales",
                    name: "link",
                    fields: [
                        {
                            type: "string",
                            label: "Texte",
                            name: "label"
                        },
                        {
                            type: "string",
                            label: "Url",
                            name: "url"
                        }
                    ]
                }
            ]
        },
        {
            type: "object",
            label: "Copyright",
            name: "copyright",
            defaultItem: {
                year: "0000",
                subtext: "El text"
            },
            fields: [
                {
                    type: "string",
                    label: "Année",
                    name: "year"
                },
                {
                    type: "rich-text",
                    label: "Sous-texte",
                    name: "subtext"
                }
            ]
        },
        {
            type: "object",
            label: "Social Links",
            name: "social",
            fields: [
                {
                    type: "string",
                    label: "Facebook",
                    name: "facebook"
                },
                {
                    type: "string",
                    label: "Instagram",
                    name: "instagram"
                }
            ]
        }]
};