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

import { ArrowRightIcon } from '~/resources/icons'


export const ObjectKey = styled.span`
  font-family: monospace;
  color: #004b7c;
`

export const ArrayIndex = styled(ObjectKey)`
  &::before,
  &::after {
    color: grey;
  }

  &::before {
    content: '[';
  }

  &::after {
    content: ']';
  }
`

export const ColonSeparator = styled.span`
  &::after {
    content: ':';
    font-family: monospace;
    margin-right: 1ch;
  }
`

export const PrimitiveValue = styled.span<{ rawValue: unknown }>`
  font-family: monospace;

  ${({ rawValue }) =>
    typeof rawValue === 'string' &&
    css`
      color: #8b3f00;
      &::before,
      &::after {
        content: '"';
        color: #c9986a;
      }
    `}

  ${({ rawValue }) =>
    typeof rawValue === 'number' &&
    css`
      color: #015dd2;
    `}
  
  ${({ rawValue }) =>
    typeof rawValue === 'boolean' &&
    css`
      color: #7c01b7;
    `}
  
  ${({ rawValue }) =>
    (typeof rawValue === 'undefined' || rawValue === null) &&
    css`
      color: grey;
    `}
`

export const ToggleObjectButton = styled.button`
  background: none;
  border: none;
  outline: none;
  position: absolute;
  left: -1em;
  width: 1em;
  height: 1em;
  padding: 0;
`

export const DefaultToggleIcon = styled.div<{ collapsed: boolean }>`
  height: 100%;
  width: 100%;
  background: center / 100% no-repeat url(${ArrowRightIcon});

  ${({ collapsed }) =>
    !collapsed &&
    css`
      transform: rotate(45deg);
    `}
`

export const LabelDecorations = styled.div`
  display: inline-flex;
  align-items: center;
  position: relative;
`

export const BracketDecoration = styled.span`
  font-family: monospace;
  color: #969696;
  font-style: italic;
`

export const ItemList = styled.ol`
  padding-left: 20px;
  position: relative;

  &::before {
    content: '';
    display: block;
    position: absolute;
    width: 1px;
    inset: 0.5ch 0 0.5ch 0.3ch;
    border-right: 1px solid #dfdfdf;
  }
`

export const Item = styled.li`
  margin: 2px 0;
`