import React from 'react';
import hexToRgba from 'hex-rgba';
import { Link } from 'gatsby';
import { Box, Flex } from '@rebass/emotion';
import { css } from '@emotion/core';

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

import BasketIcon from '../compnents/basket-icon/';
import { HeaderProps } from '../header.types';
import * as Styles from './header-fixed.styles';

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

const HeaderFixed = React.forwardRef((props: HeaderFixedProps, ref): JSX.Element => {
  const { themeConfig, toggleBasket, isBasketVisible, fontFamily } = props;

  return (
    <>
      <Styles.Header
        ref={ref}
        py="14px"
        as="header"
        px={3}
        css={css`
          ${Styles.Header};
          font-family: ${fontFamily};
          background: ${hexToRgba(themeConfig.backgroundColour, 85)};
        `}
      >
        <FluidContainer>
          <Flex
            justifyContent="space-between"
            alignItems="center"
          >
            <Box>
              <Box css={Styles.Logo}>
                <Link to="/" css={Styles.Logo}>
                  <img
                    src={props.logo.url}
                  />
                </Link>
              </Box>
            </Box>
            <Box width="auto" alignSelf="center">
              <ul css={Styles.NavigationList}>
                {
                  props.navigation.map(item => {
                    const slug = !item.page ? '/shop' : item.page.fields.slug;

                    return (
                      <li
                        key={item.id}
                        css={Styles.NavigationItem}
                      >
                        <Styles.NavigationItemLink
                          textColour={themeConfig.textColour}
                          highlightColour={themeConfig.highlightColour}
                        >
                          <Link
                            to={slug}
                            activeStyle={{
                              color: colors.textLight,
                              background: themeConfig.highlightColour
                            }}
                          >
                            {item.title}
                          </Link>
                        </Styles.NavigationItemLink>
                      </li>
                    );
                  })
                }
              </ul>
            </Box>
            <Flex
              flex="1 0 10%"
              textAlign="right"
              alignItems="center"
              justifyContent="flex-end"
            >
              {props.config.showSocial &&
                <Box mr={4}>
                  <SocialIcons
                    iconFill={themeConfig.iconColour}
                  />
                </Box>
              }
              <Box width="35px">
                <BasketIcon
                  color={themeConfig.iconColour}
                  onClick={toggleBasket}
                  isActive={isBasketVisible}
                  isBasketVisible={isBasketVisible}
                />
              </Box>
            </Flex>
          </Flex>
        </FluidContainer>
      </Styles.Header>
    </>
  );
});

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

export default HeaderFixed;