import styled, { css } from 'styled-components';

import { mediaMax } from '../../theme/mixins';
import { CallMeButton, LinkHeader, MyAccountLink } from './ButtonHeader.style';
import { HEADER_HEIGHT, MenuHeaderDesktop, MenuHeaderMobile } from './MenuHeader.style';

export const header = css`
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  width: 100%;
  z-index: 2;
  position: fixed;
  height: ${HEADER_HEIGHT}px;

  > svg {
    width: auto;
    display: inline-block;
    position: absolute;
    left: 50%;
    transform: translate3d(-50%, 0 ,0);
    cursor: pointer;
  }
`;

export const headerFixed = css`
  background-color: ${props => props.theme.default.colors.white};
  box-shadow: ${props => props.theme.default.shadow};

  ${MenuHeaderMobile},
  ${MenuHeaderDesktop} {
    > a,
    > a:visited,
    > a:not([href]):not([tabindex]){
      color: ${props => props.theme.default.colors.darkGrey};
    }
  }
  
  ${LinkHeader} {
    display: inline-block;
  }

  // logo
  > svg {
    height: 30px;
    margin-top: 0;
    ${mediaMax.medium(css`
      left: 50px;
      transform: translateX(0);
    `)}
  }
`;

export const HeaderContainer = styled.header<{ fixed: boolean }>`
  ${header};

  transition: all 100ms linear;

  > svg,
  > svg path {
      transition: all 200ms linear;
  }

  ${props => props.fixed ? css`
    ${headerFixed};
    transition-delay: 200ms;

    ${MenuHeaderMobile},
    ${MenuHeaderDesktop} {
      > div,
      > a {
        transition-delay: 200ms;
        
        u {
          background-image: linear-gradient(to right, ${props => props.theme.default.colors.darkGrey} 33%, rgba(255, 255, 255, 0) 0%);
        }
      }
      
      span {
        display: none;
      }
    }
    
    ${MyAccountLink} {
      display: none;
    }
    
    ${CallMeButton} {
      border-color: ${props => props.theme.default.colors.blue};
      
      &,
      &:visited,
      &:not([href]):not([tabindex]) {
        color: ${props => props.theme.default.colors.blue};
      }
    }
  `
  : css`
    transition-delay: 0ms;

    ${MenuHeaderMobile},
    ${MenuHeaderDesktop} {
      > div,
      > a,
      > a:visited,
      > a:not([href]):not([tabindex]) {
        transition: all 100ms linear;
        color: ${props => props.theme.default.colors.white};
        cursor: pointer;
      }
    }

    // logo
    > svg {
      height: 50px;
      margin-top: 70px;
  
      path {
        fill: ${props => props.theme.default.colors.white};
      }
    }
  `}
`;