import React, { FunctionComponent } from 'react';
import { css, SerializedStyles } from '@emotion/core';
import { Text } from '@rebass/emotion';
import { Link } from 'gatsby';

import { URLService } from 'lib';

import { NavigationItemProps } from './NavigationItem.types';
import { colors } from 'utils/theme';

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

// Config layout styles.
import * as DefaultStyles from './styles/NavigationItem.Default.styles';
import * as BegoniaFixedStyles from './styles/begonia/navgiation-item-begonia-fixed.styles';
import * as BegoniaFloatingStyles from './styles/begonia/navgiation-item-begonia-floating.styles';
import * as CosmosDefaultStyles from './styles/cosmos/navigation-item-cosmos-default.styles';

import { getTheme } from 'utils/styles/style-config-factory';

interface ItemCssProps {
  normal: SerializedStyles;
  active: SerializedStyles;
}

const renderLink = ({ label, slug }: NavigationItemProps, itemCss: any): JSX.Element|null => {
  return slug ? (
    <Link
      to={slug}
      css={css`
        ${itemCss};
      `}
      >{label}
    </Link>
  ) : null;
}

const renderText = ({ label, onClick }: NavigationItemProps, itemCss: any): JSX.Element => {
  return (
    <Text
    onClick={onClick}
    css={css`
      ${itemCss.normal};
    `}>
      {label}
    </Text>
  );
}

const NavigationItem: FunctionComponent<NavigationItemProps> = (props): JSX.Element => {
  const { slug, position, headerLayoutOption } = props;
  const Styles = getTheme({
    default: DefaultStyles,
    layoutThemes: [
      {layoutId: HEADER.BEGONIA_FIXED, theme: BegoniaFixedStyles},
      {layoutId: HEADER.BEGONIA_FLOATING, theme: BegoniaFloatingStyles},
      {layoutId: HEADER.COSMOS_DEFAULT, theme: CosmosDefaultStyles}
    ]
  }, headerLayoutOption);
  const itemCss = getCssProps(position, Styles);
  const isActivePath = slug && (typeof window !== 'undefined') && URLService.isActivePath(window, slug);
  const linkContent = slug ? renderLink(props, isActivePath ? itemCss.active : itemCss.normal) : renderText(props, itemCss);
  return (
    <Styles.NavigationItem
      fontSize={[3, 2]}
      lineHeight={[2]}
      fontWeight={'bold'}
      color={colors.textDark}
      css={css`
        opacity: ${position === 'mobile' && !isActivePath ? 0.4 : 1};
      `}
    >
      {linkContent}
    </Styles.NavigationItem>
  );
};

const getNormalStyle = (position: string, styles: any) => {
  switch (position) {
    case 'top':
      return styles.NavigationItemLinkTop;
    case 'left':
      return styles.NavigationItemLinkLeft;
    case 'mobile':
      return styles.NavigationItemLinkMobile;
    default:
      return styles.NavigationItemLinkTop;
  }
};

const getActiveStyle = (position: string, styles: any) => {
  switch (position) {
    case 'top':
      return styles.NavigationItemLinkTopActive;
    case 'left':
      return styles.NavigationItemLinkLeftActive;
    case 'mobile':
      return styles.NavigationItemLinkMobileActive;
    default:
      return styles.NavigationItemLinkTopActive;
  }
};

const getCssProps = (position: string, styles: any): ItemCssProps => ({
  normal: getNormalStyle(position, styles),
  active: getActiveStyle(position, styles)
});

NavigationItem.defaultProps = {
  textColor: colors.textDark
};

export default NavigationItem;