import React, { useState } from "react";
import Link from "next/link";
import { tinaField } from "tinacms/dist/react";
import defaultLogo from "../../public/logo.png";
import { GlobalHeader } from "../../tina/__generated__/types";
import { ObjectField } from "@tinacms/schema-tools/dist/types";

export const Header = ({ data }: { data: GlobalHeader }): React.ReactElement => {
    const [expanded, setExpanded] = useState(false);
    const navbarToggler: React.ReactElement = (
        <button
            className="navbar-toggler"
            type="button"
            onClick={ () => { setExpanded(!expanded); } }
            aria-label="Toggle navigation">
            <span className="navbar-toggler-icon" />
        </button>
    );
    return (
        <nav className={ `navbar${ expanded ? " navbar-expanded": "" } flex flex-wrap content-between sticky top-0 py-2` }>
            <div className="flex grow justify-between px-6 h-full">
                <div className="flex navbar-brand">
                    <Link
                        href="/"
                        className="container flex items-center"
                    >
                        <img src={ data.logoSrc || defaultLogo.src }/>
                        <div className="flex flex-col px-6">
                            <h3 className="title" data-tina-field={ tinaField(data, "title") }>{ data.title }</h3>
                            <div className="subtitle" data-tina-field={ tinaField(data, "subtitle") }>{ data.subtitle }</div>
                        </div>
                    </Link>
                </div>
                { navbarToggler }
                <ul className="navbar-items">
                    { data.nav &&
              data.nav.map((item, i) => {
                  return (
                      <li
                          key={ `${ item.label }-${ i }` }
                          className="nav-item"
                      >
                          <Link
                              data-tina-field={ tinaField(item, "label") }
                              href={ `${ item.external? "" : "/" }${ item.href }` }
                              className={ `nav-link p-2 ${ item.external ? "external-link-icon" : "" }` }
                              onClick={ () => setExpanded(false) }
                          >
                              { item.label }
                          </Link>
                      </li>
                  );
              }) }
                </ul>
            </div>
        </nav>
    );
};

export const headerSchema: ObjectField = {
    type: "object",
    label: "Header",
    name: "header",
    fields: [
        {
            type: "string",
            label: "Page Title",
            name: "pageTitle"
        },
        {
            type: "string",
            label: "Title",
            name: "title"
        },
        {
            type: "string",
            label: "Subtitle",
            name: "subtitle"
        },
        {
            type: "image",
            label: "Logo",
            name: "logoSrc"
        },
        {
            type: "object",
            label: "Nav Links",
            name: "nav",
            list: true,
            ui: {
                itemProps: (item) => {
                    return { label: item?.label };
                },
                defaultItem: {
                    href: "home",
                    label: "Home",
                    external: false
                }
            },
            fields: [
                {
                    type: "string",
                    label: "Link",
                    name: "href"
                },
                {
                    type: "string",
                    label: "Label",
                    name: "label"
                },
                {
                    type: "boolean",
                    label: "External",
                    name: "external"
                }
            ]
        }]
};