/* @aztlan/generator-front 0.4.0 */
import * as React from 'react'
import { useMemo } from 'react'
import * as PropTypes from 'prop-types'
import { InferProps } from 'prop-types'
import { Link } from 'react-router-dom'
import { useDebug } from '@aztlan/react-hooks'
import {
  // useAuthenticationContext,
  AuthenticationDebugHeader,
  NavigationDebugHeader,
  NavigationFooter,
  NavigationVerticalMenu,
  ThemeSwitcher,
  LocaleSwitcher,
  useViewer,
  useAuthenticationContext,
  // FormNavigation,
} from '@aztlan/ui'

function Template({
  title,
  children,
  sidebar,
  className,
  wireframe,
  footer,
  header,
  rootItem,
  appendItems: userAppendItems = [],
  navigationDebugHeaderRouteMap,
  FRAGMENT_AUTHENTICATION_DEBUG,
}: InferProps<typeof Template.propTypes>) {
  const {
    logout, isLogoutInFlight,
  } = useAuthenticationContext()

  const isDebug = useDebug()

  const { data } = useViewer()

  const appendItems = useMemo(
    () => {
      const items = userAppendItems
      items.push({
        items:[
          { Component: LocaleSwitcher },
          { Component: ThemeSwitcher },
        ],
      })
      if (data) {
        userAppendItems.push({
          label:'Debug',
          items:[
            {
              Component:() => (
                <button
                  onClick={logout}
                  disabled={isLogoutInFlight}
                >
                  Logout
                </button>
              ),
            // onClick:logout,
            // inFlight:isLogoutInFlight,
            },
          ],
        })
      }
      return items
    }, [
      data,
      userAppendItems,
      logout,
      isLogoutInFlight,
    ],
  )

  return (
    <main
      className={[
        'panel grid container layer',
        className,
      ]
        .filter(Boolean)
        .join(' ')}
    >
      <div className="container">
        <AuthenticationDebugHeader FRAGMENT={FRAGMENT_AUTHENTICATION_DEBUG} />
        <NavigationDebugHeader
          items={navigationDebugHeaderRouteMap}
          className="container"
        />
        {header}
      </div>

      <div className="background near span-8 md-span-5 fit-content grid menu">
        {sidebar
          || (rootItem && (
            <NavigationVerticalMenu
              rootItem={rootItem}
              appendItems={appendItems}
            />
          ))}
      </div>
      <div className="background near span-8 md-span-9 fit-content grid canvas">
        {children}
      </div>
      {footer || (
        <NavigationFooter
          className="background near container"
          desktop
        >
          Action Bar
        </NavigationFooter>
      )}
    </main>
  )
}

Template.propTypes = {
  title                        :PropTypes.node,
  children                     :PropTypes.node,
  sidebar                      :PropTypes.node,
  className                    :PropTypes.string,
  wireframe                    :PropTypes.bool,
  footer                       :PropTypes.node,
  header                       :PropTypes.node,
  navigationDebugHeaderRouteMap:PropTypes.array,
  FRAGMENT_AUTHENTICATION_DEBUG:PropTypes.any,
  rootItem                     :PropTypes.any,
  appendItems                  :PropTypes.any,
}

export default Template