import React from 'react';
import Color from 'color';
import { Link } from 'gatsby';
import { Box, Flex } from '@rebass/emotion';
import { css } from '@emotion/core';

import { ColourOptions } from 'types/theme';
import { FluidContainer } from 'utils/styles/mixins';
import SocialIcons from 'components/social-icons';

import NavigationItem from 'components/navigation/items'

import BasketIcon from '../compnents/basket-icon';
import { HeaderProps } from '../header.types';

import * as Styles from './header-top-center.styles';

interface HeaderLeftProps extends HeaderProps {
  toggleBasket: () => void;
  themeConfig: {
    [key: string]: ColourOptions;
  };
}

const HeaderTopCenter = React.forwardRef((props: HeaderLeftProps, ref): JSX.Element => {
  const { themeConfig, toggleBasket, fontFamily } = props;
  return (
    <>
      <Box
        as="header"
        ref={ref}
        css={css`
          ${Styles.Header}
          font-family: ${fontFamily};
          background: ${themeConfig.backgroundColour};
        `}
      >
        <FluidContainer>
          <Styles.TopLinks>
            <Styles.SocialContainer>
              {props.config.showSocial &&
                <div css={Styles.SocialIcons}>
                  <SocialIcons
                    iconFill={themeConfig.iconColour}
                  />
                </div>
              }
            </Styles.SocialContainer>
            <Box>
              <Link to="/" css={Styles.Logo}>
                <img src={props.logo.url} />
              </Link>
            </Box>
            <Styles.BasketContainer>
              <BasketIcon
                onClick={toggleBasket}
                color={themeConfig.iconColour}
                totalItems={props.basketStore!.totalItems}
                isBasketVisible={props.uiStore!.isBasketVisible}
                crossStrokeColour={themeConfig.highlightColour}
                hideOnBasketVisible
              />
            </Styles.BasketContainer>
          </Styles.TopLinks>
          <Flex justifyContent="center">
            <ul css={Styles.NavigationList}>
              {
                props.navigation.map(item => {
                  const slug = !item.page ? '/shop' : item.page.fields.slug;
                  return <NavigationItem
                    slug={slug}
                    label={item.title}
                    textColor={themeConfig.textColour}
                    position='top'
                  />
                })
              }
            </ul>
          </Flex>
        </FluidContainer>
      </Box>
      {props.backButtonUrl &&
        <Box
          bg={Color(themeConfig.backgroundColour).darken(0.1).hex()}
          color={themeConfig.textColour}
          p={3}
        >
          <FluidContainer>
            <Link
              to={props.backButtonUrl}
              css={Styles.BackLinkStyles}
            >
              &larr; {props.backButtonCopy}
            </Link>
          </FluidContainer>
        </Box>
      }
    </>
  );
});

HeaderTopCenter.defaultProps = {
  backButtonCopy: 'Go Back'
};

export default HeaderTopCenter;