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

import { SegmentEventType } from '../../types/event'
import { ErrorIcon, IdentifyIcon, PageIcon, TrackIcon } from '~/resources/icons'


const ICON_MAP: Record<SegmentEventType, string> = {
  page: PageIcon,
  track: TrackIcon,
  identify: IdentifyIcon
}

type IconImgProps = {
  eventType: SegmentEventType
  errorIndicator?: boolean
  size?: 'sm'
}

export const IconImg = styled.div<IconImgProps>`
  width: 20px;
  height: 20px;
  position: relative;

  ${({ size }) =>
    size === 'sm' &&
    css`
      width: 16px;
      height: 16px;
    `}

  &::before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    background-image: ${({ eventType }) => `url(${ICON_MAP[eventType]})`};
    background-size: 100%;
  }

  ${({ errorIndicator }) =>
    errorIndicator &&
    css`
      &::before {
        filter: hue-rotate(200deg) opacity(0.8);
      }

      &::after {
        content: '';
        display: block;
        position: absolute;
        width: 15px;
        height: 15px;
        bottom: -3px;
        right: -3px;
        background-size: 100%;
        background-image: url(${ErrorIcon});
      }
    `}
`