import { css } from '@emotion/css';

import { GrafanaTheme2 } from '@grafana/data/';
import { useStyles2 } from '@grafana/ui/';

import { RawListValue } from './RawListItem';

const getStyles = (theme: GrafanaTheme2) => {
  // Borrowed from the monaco styles
  const reddish = theme.isDark ? '#ce9178' : '#a31515';
  const greenish = theme.isDark ? '#73bf69' : '#56a64b';

  return {
    metricName: css({
      color: greenish,
    }),
    metricValue: css({
      color: reddish,
    }),
    expanded: css({
      display: 'block',
      textIndent: '1em',
    }),
  };
};

const RawListItemAttributes = ({
  value,
  index,
  length,
  isExpandedView,
}: {
  value: RawListValue;
  index: number;
  length: number;
  isExpandedView: boolean;
}) => {
  const styles = useStyles2(getStyles);

  // From the beginning of the string to the start of the `=`
  const attributeName = value.key;

  // From after the `="` to before the last `"`
  const attributeValue = value.value;

  return (
    <span className={isExpandedView ? styles.expanded : ''} key={index}>
      <span className={styles.metricName}>{attributeName}</span>
      <span>=</span>
      <span>&quot;</span>
      <span className={styles.metricValue}>{attributeValue}</span>
      <span>&quot;</span>
      {index < length - 1 && <span>, </span>}
    </span>
  );
};

export default RawListItemAttributes;
