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

import {
  IncognitoIcon as IncognitoSVG,
  IdentifyIcon as IdentifySVG,
  IdentifiedIcon as IdentifiedSVG
} from '~/resources/icons'


const UserIcon = styled.div`
  opacity: 0;
  transition: opacity 0.5s;
  position: absolute;
  background: center / 100% no-repeat;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
`

export const IncognitoIcon = styled(UserIcon)`
  background-image: url(${IncognitoSVG});
  opacity: 1;
`

export const IdentifyIcon = styled(UserIcon)`
  background-image: url(${IdentifySVG});
`

export const IdentifiedIcon = styled(UserIcon)`
  background-image: url(${IdentifiedSVG});
`

const opacityCameo = keyframes`
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
`

const opacityPersisted = keyframes`
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`

type UserIconContainerProps = {
  identified: boolean
  disableTransition?: boolean
}

export const UserIconContainer = styled.div<UserIconContainerProps>`
  position: relative;
  width: inherit;
  height: inherit;

  ${({ identified, disableTransition }) =>
    identified &&
    css`
      ${IncognitoIcon} {
        opacity: 0;
      }

      ${IdentifiedIcon} {
        opacity: 1;
      }

      ${!disableTransition &&
      css`
        ${IdentifyIcon} {
          animation: ${opacityCameo} 1.8s ease-in-out 0.4s;
        }

        ${IdentifiedIcon} {
          animation: ${opacityPersisted} 2.3s linear;
        }
      `}
    `}
`