import React, { Component } from 'react';
import { autorun } from 'mobx';
import { Global, css } from '@emotion/core';
import { inject, observer } from 'mobx-react';
import { StaticQuery, graphql } from 'gatsby';

import Basket from 'components/basket';
import GlobalHeaderTags from 'components/global-header-tags';
import StyledLightbox from 'components/styled-lightbox';
import { HeaderOptions } from 'types/generator-site';

import { HEADER } from 'utils/constants/layouts-names';

import { SiteTheme } from 'lib';
import ComputedHeader from './header';
import Footer from './footer';

import { LayoutQuery, LayoutProps, LayoutState } from './layout.types';
import * as Styles from './layout.styles';
import { headerIsLeftAligned } from 'utils/constants/layout-behaviours';

class Layout extends Component<LayoutProps, LayoutState> {

  state = {
    isBasketVisible: false,
    isMobileMenuVisible: false,
    isLightboxVisible: false
  };

  disposer: any = null;

  componentWillMount(): void {
    // close menus on new page load
    this.props.uiStore!.closeBasket();
    this.props.uiStore!.closeMobileMenu();

    // @TODO: look to see if we need to dispose of the autorun()
    this.disposer = autorun(() => {
      const { isBasketVisible, isMobileMenuVisible, isLightboxVisible } = this.props.uiStore!;
      this.setState({
        isBasketVisible,
        isMobileMenuVisible,
        isLightboxVisible
      });
    });
  }

  componentWillUnmount(): void {
    if (this.disposer !== null) {
      this.disposer();
    }
  }

  getMarginTop = (layoutOption: HeaderOptions): number => {
    if (layoutOption === HEADER.BEGONIA_FIXED ||
      layoutOption === HEADER.TOP_FIXED ||
      layoutOption === HEADER.TOP_CENTER || this.props.hasTopMargin) {
        return 70;
      } else {
        return 0;
      }
  }

  hasTopMargin = (layoutOption: HeaderOptions): boolean =>
    !!this.props.hasTopMargin && (layoutOption === HEADER.TOP_FIXED || layoutOption === HEADER.BEGONIA_FIXED);

  render(): JSX.Element {
    const lightBoxIndex: number = this.props.uiStore!.lightBoxImageIndex;

    return (
      <StaticQuery
        query={graphql`
          query HeadingQuery {
            siteConfig {
              id
              siteTitle
              contactEmail
              contactPhoneNumber
              logo {
                url
              }
              logoIcon {
                url
              }
              _seoMetaTags {
                tagName
                content
                attributes {
                  property
                  content
                  name
                }
              }
              headerLayout {
                layoutOption
                useHeadingFont
                menuItems {
                  __typename
                  id
                  title
                  page {
                    id
                    fields{
                      slug
                    }
                  }
                }
                showSocial
                backgroundColour { key }
                textColour { key }
                iconColour { key }
                highlightColour { key }
              }
              footerLayout {
                layoutOption
                menuItems {
                  __typename
                  _modelApiKey
                  id
                  title
                  page {
                    id
                    fields{
                      slug
                    }
                  }
                }
                showSocial
                useHeadingFont
                backgroundColour { key }
                textColour { key }
                iconColour { key }
                highlightColour { key }
              }
              theme {
                siteBackgroundColour {
                  key
                }
              }
            }
          }
        `}
        render={(data: LayoutQuery): JSX.Element => {
          const {
            logo,
            logoIcon,
            siteTitle,
            contactEmail,
            contactPhoneNumber,
            headerLayout,
            footerLayout,
            theme,
            _seoMetaTags
          } = data.siteConfig;

          const backgroundColour = SiteTheme.setColour(theme.siteBackgroundColour, 'white');
          const contentMarginY = this.getMarginTop(headerLayout.layoutOption);

          const isSideNavigation = headerIsLeftAligned(headerLayout.layoutOption);

          const siteContent = (
            <Styles.ContentContainer contentTopMargin={contentMarginY} usePercentageWidth={isSideNavigation}>
                <Basket
                  config={headerLayout}
                  isBasketVisible={this.state.isBasketVisible}
                />
                <Styles.Layout>
                  {this.props.children}
                </Styles.Layout>
                <Footer
                  config={footerLayout}
                  logo={logo}
                  logoIcon={logoIcon}
                  navigation={footerLayout.menuItems}
                  title={siteTitle}
                  contactEmail={contactEmail}
                  contactPhoneNumber={contactPhoneNumber}
                  backgroundColour={footerLayout.backgroundColour}
                  textColour={footerLayout.textColour}
                  highlightColour={footerLayout.highlightColour}
                  iconColour={footerLayout.iconColour}
                  {...this.props}
                />
            </Styles.ContentContainer>
          );

          return (
            <>
              <Global
                styles={css`
                  body {
                    background: ${backgroundColour};
                  }
                  ${Styles.GlobalLayout}
                `}
              />
                <GlobalHeaderTags
                  metaTags={{tags: _seoMetaTags}}
                  siteTitle={siteTitle}
                />
                <Styles.FullHeightContainer>
                  {this.state.isLightboxVisible && <StyledLightbox currentIndex={lightBoxIndex} />}
                  <ComputedHeader
                    config={headerLayout}
                    navigation={headerLayout.menuItems}
                    logo={logo}
                    logoIcon={logoIcon}
                    title={siteTitle}
                    shouldDisableHybridHeader={this.props.shouldDisableHybridHeader}
                    {...this.props}
                  >
                    {isSideNavigation && siteContent}
                  </ComputedHeader>
                    {!isSideNavigation && siteContent}
              </Styles.FullHeightContainer>
            </>
          );
        }}
      />
    );
  }
}

export default inject('uiStore')(observer(Layout));