import React from 'react';
import styled from 'styled-components';

import {
  EIssueConsequence
} from '../../../enum';
import {
  IIssue
} from '../../../types';
import intl from '../../../intl';
import LabelBase from '../../label-base';

interface IProps {
  o: IIssue;
}

const ScIndicator = styled.span`
  display: inline-block;
  font-size: 1.2em;
`;

const ScLabelTs = styled(LabelBase)`
  background-color: #3178c6;
  
  &:before {
    content: 'TS';
    font-weight: 600;
  }
`;
const ScLabelJs = styled(LabelBase)`
  background-color: #ec3;
  
  &:before {
    content: 'JS';
    font-weight: 600;
  }
`;
const ScMessage = styled.span`
  margin: 0 4px;
`;

interface IConsequence {
  i: string;
  ts?: true;
  message: string;
}

const MAPPING: Record<EIssueConsequence, IConsequence> = {
  [EIssueConsequence.BUILD_FAIL]: {
    i: '🚫',
    ts: true,
    message: intl('issue_consequence:build_fail')
  },
  [EIssueConsequence.CONFUSING]: {
    i: '🫤',
    ts: true,
    message: intl('issue_consequence:confusing')
  },
  [EIssueConsequence.UNCAUGHT]: {
    i: '‼️️',
    message: intl('issue_consequence:runtime_uncaught')
  },
  [EIssueConsequence.PROP_TYPES]: {
    i: '⁉️',
    message: intl('issue_consequence:runtime_prop_types')
  },
  [EIssueConsequence.DEBUG_WARNING]: {
    i: '⚠️',
    message: intl('issue_consequence:debug_warning')
  },
  [EIssueConsequence.CRASH]: {
    i: '💥',
    message: intl('issue_consequence:runtime_crash')
  },
  [EIssueConsequence.ABNORMAL]: {
    i: '💢',
    message: intl('issue_consequence:abnormal')
  }
};

export default function CellConsequences({
  o: {
    consequences
  }
}: IProps): JSX.Element {
  return <>
    {consequences.sort().map(v => <div key={v}>
      {MAPPING[v].ts ? <ScLabelTs /> : <ScLabelJs />}
      <ScMessage>{MAPPING[v].message}</ScMessage>
      <ScIndicator>{MAPPING[v].i || '❓'}</ScIndicator>
    </div>)}
  </>;
}