import * as monaco from "monaco-editor"
import styled from "@emotion/styled"
import { css } from "@emotion/css"
import Icon from "@aet/icons/macro"
import { color } from "../../theme"

export const CHEVRON = (
  <Icon
    icon="VscChevronRight"
    className={css`
      margin-left: -4px;
      margin-right: -4px;
      margin-bottom: -2px;
      font-size: 1.2em;
    `}
  />
)

const StyledSymbol = styled(Icon.of("VscSymbolClass"))`
  font-size: 1.1em;
  fill: ${color("#d67e00", "#ee9d28")};
  margin-bottom: -1px;
`

const StyledModule = styled(Icon.of("VscJson"))`
  font-size: 1.1em;
  margin-bottom: -1px;
`

const StyledVariable = styled(Icon.of("VscSymbolVariable"))`
  font-size: 1.6em;
  fill: ${color("#75beff", "#75beff")};
  margin-bottom: -1px;
`

const StyledMethod = styled(Icon.of("VscSymbolMethod"))`
  fill: ${color("#6639ba", "#bc8cff")};
  font-size: 1.1em;
  margin-bottom: -1px;
`

export function ItemKind({
  kind,
  className,
}: {
  kind: monaco.languages.SymbolKind
  className?: string
}) {
  switch (kind) {
    case monaco.languages.SymbolKind.Class:
      return <StyledSymbol className={className} />
    case monaco.languages.SymbolKind.Module:
      return <StyledModule className={className} />
    case monaco.languages.SymbolKind.Variable:
      return <StyledVariable className={className} />
    case monaco.languages.SymbolKind.Method:
      return <StyledMethod className={className} />
    default:
      return null
  }
}
