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

import {
  DiagnosticsIcon,
  EventExplorerIcon,
  AppLogo,
  IdentifiedUserIcon,
  UnidentifiedUserIcon,
  HelpIcon
} from '~/resources/icons'
import { ButtonLink } from '../ButtonLink'


export const HeaderContainer = styled.div`
  background: #fff;
  display: flex;
  flex-direction: row;
  padding: 0 8px;
  overflow: hidden;
  position: relative;
`
export const SegmentLogo = styled.div`
  width: 20px;
  background: center / 100% no-repeat url(${AppLogo});
`

export const LinkContainer = styled.div`
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: -3px;
`

export const StyledButtonLink = styled(ButtonLink)`
  padding: 0;
  background: none;
  height: 38px;
  width: 38px;
  margin: 0 6px;
  position: relative;

  &.active {
    &::before {
      content: '';
      height: 3px;
      width: 18px;
      position: absolute;
      background-color: #52bd94;
      border-radius: 25px;
      top: 90%;
      left: 0;
      right: 0;
      margin: auto;
    }
  }
`
export const NavIcon = styled.div`
  background-size: 65%;
  height: inherit;
  background-repeat: no-repeat;
  background-position: center;
`

export const EventsPageIcon = styled(NavIcon)`
  background-image: url(${EventExplorerIcon});
`

export const DiagnosticsPageIcon = styled(NavIcon)`
  background-image: url(${DiagnosticsIcon});
`

type UserIconContainerProps = {
  identified: boolean
}

const fadeOut = keyframes`

  100%{
    opacity: 0;
  }
  `

const fadeIn = keyframes`

100%{
  opacity: 1;
}

`

export const UserPageIcon = styled.div<UserIconContainerProps>`
  position: relative;
  width: inherit;
  height: inherit;
  &::before,
  &::after {
    content: '';
    inset: 0;
    position: absolute;
    background: center / 65% no-repeat;
  }

  &::before {
    background-image: url(${UnidentifiedUserIcon});
    ${({ identified }) =>
      identified &&
      css`
        animation: ${fadeOut} 0.5s ease-out forwards 0.7s;
      `}
  }
  &::after {
    background-image: url(${IdentifiedUserIcon});
    opacity: 0;
    ${({ identified }) =>
      identified &&
      css`
        animation: ${fadeIn} 0.5s ease-in forwards 1.3s;
      `}
  }
`

export const HelpLink = styled.a`
  width: 18px;
  background: center / 100% no-repeat url(${HelpIcon});
  opacity: 0.5;

  &:hover {
    opacity: 1;
  }
`