// @flow
import React from 'react';
import type { ComponentType } from 'react';
import { withTheme } from 'styled-components';
import type { ThemeProps } from '../../../types';
import type { NumberedBulletProps } from './numbered-bullet.proptypes';
import { getFontFamily } from '../../../mixins/typography';
import {
  getFillColor,
  getFontColor,
  getStrokeColor,
} from './numbered-bullet.css-rules';

const _NumberedBullet = ({
  theme,
  value = '1',
  disabled,
  inverted = false,
  colorName,
}: {|
  ...NumberedBulletProps,
  ...ThemeProps,
|}) => (
  <svg
    width="22px"
    height="22px"
    viewBox="0 0 22 22"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
      <g>
        <rect
          stroke={getStrokeColor(theme, disabled, inverted, colorName)}
          fill={getFillColor(theme, disabled, inverted, colorName)}
          x="0.5"
          y="0.5"
          width="21"
          height="21"
          rx="11"
        />
        <text
          fontFamily={getFontFamily({ theme, bold: true })}
          fontSize="14"
          fontWeight="600"
          fill={getFontColor(theme, disabled, inverted, colorName)}
        >
          <tspan x="6.71044922" y="16">
            {value}
          </tspan>
        </text>
      </g>
    </g>
  </svg>
);

export const NumberedBullet: ComponentType<NumberedBulletProps> = withTheme(
  _NumberedBullet,
);

NumberedBullet.displayName = 'NumberedBullet';
