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

import { DeliveredIcon, EffectIcon, ErrorIcon, SentIcon } from '~/resources/icons'
import { TraceData } from '../..'


const getSnapshotIcon = (snapshot: TraceData): string => {
  if ('stage' in snapshot) {
    switch (snapshot.stage) {
      case 'triggered':
        return SentIcon
      case 'enriched':
        return EffectIcon
      case 'delivered':
        return DeliveredIcon
    }
  } else if ('type' in snapshot) {
    switch (snapshot.type) {
      case 'error':
        return ErrorIcon
    }
  }
}

export const TimelineContainer = styled.div`
  display: flex;
  column-gap: 18px;
`

export const SnapshotList = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 16px 4px;
  background: #ebebeb;
  border-radius: 100em;
`

export const SnapshotIcon = styled.div``

type SnapshotItemProps = {
  item: TraceData
  selected: boolean
}

export const SnapshotItem = styled.div<SnapshotItemProps>`
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  flex: 1;

  &::before,
  &::after {
    content: '';
    display: block;
    flex: 1;
    border-right: 1px solid #c9c9c9;
    width: 0;
    margin: auto;
  }

  ${SnapshotIcon} {
    height: 32px;
    width: 32px;
    border-radius: 1rem;
    background: center / 60% no-repeat url(${({ item }) => getSnapshotIcon(item)});
    opacity: 0.5;

    &:hover {
      background-color: #fff;
    }

    ${({ selected }) =>
      selected &&
      css`
        opacity: 1;
        background-color: #fff;
      `}
  }
`

export const SnapshotPreview = styled.div``

export const JSONViewContainer = styled.div`
  background: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #dadada;
  padding: 14px;
`

export const ErrorMessage = styled.div`
  padding: 12px;
  background: #ff2a2a;
  color: #fff;
  border-radius: 8px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  row-gap: 6px;
`

export const ErrorHeading = styled.h3`
  font-size: 16px;
  font-weight: 400;
`

export const ErrorDescription = styled.pre``