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

import { URLService } from 'lib';

import { ColourOptions } from 'types/theme';
import { FluidContainer } from 'utils/styles/mixins';

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

import * as Styles from './header-top.styles';
import { colors } from 'utils/theme';

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

const HeaderTop = React.forwardRef(({
  themeConfig,
  logo,
  navigation,
  backButtonUrl,
  backButtonCopy,
  toggleBasket,
  children,
  totalItems,
  fontFamily
}: HeaderTopProps, ref): JSX.Element => (
  <>
    <Styles.LayoutHeader
      ref={ref}
      py="14px"
      as="header"
      px={3}
      bg={themeConfig.backgroundColour}
    >
      <FluidContainer
        css={css`
          font-family: ${fontFamily};
        `}
      >
        <Flex
          justifyContent="space-between"
          alignItems="center"
        >
          <Box>
            <Box css={Styles.Logo}>
              <Link to="/" css={Styles.Logo}>
                <img
                  src={logo.url}
                />
              </Link>
            </Box>
          </Box>
          <Box width="auto" alignSelf="center">
            <ul css={Styles.NavigationList}>
              {
                navigation.map(item => {
                  const slug = !item.page ? '/shop' : item.page.fields.slug;

                  return (
                    <li
                      key={item.id}
                      css={Styles.NavigationItem}
                    >
                      <Link
                        to={slug}
                        css={css`
                          ${Styles.NavigationItemLink}
                          color: ${themeConfig.textColour};
                        `}
                        activeStyle={{
                          color: themeConfig.highlightColour
                        }}
                      >
                        {item.title}
                      </Link>
                    </li>
                  );
                })
              }
            </ul>
          </Box>
          <Flex
            flex="1 0 10%"
            textAlign="right"
            alignItems="center"
            justifyContent="flex-end"
          >
            <Styles.BasketIcon background={themeConfig.highlightColour}>
              <BasketIcon
                color={colors.textLight}
                onClick={toggleBasket}
                totalItems={totalItems}
              />
            </Styles.BasketIcon>
          </Flex>
        </Flex>
      </FluidContainer>
    </Styles.LayoutHeader>
    { backButtonUrl &&
      <Box
        bg={Color(themeConfig.backgroundColour).darken(0.1).hex()}
        py={[2, 3]}
      >
        <FluidContainer>
          <Link
            to={backButtonUrl}
            css={css`
              ${Styles.BackLinkStyles}
              color: ${themeConfig.textColour};
            `}
          >
            {backButtonCopy}
          </Link>
        </FluidContainer>
      </Box>
    }
  </>
));

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

export default HeaderTop;