// @flow
import React, { useContext } from 'react';
import { ThemeContext } from 'styled-components';
import type { RadioOptionProps } from './radio-option.proptypes';
import { radioOptionPropTypes } from './radio-option.proptypes';
import { getFillColor, getBorderColor } from './radio-option.css-rules';

export const RadioOption = ({ selected }: RadioOptionProps) => {
  const theme = useContext(ThemeContext);
  return (
    <svg
      width="44px"
      height="44px"
      viewBox="0 0 44 44"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g
        id="Icons/Radio-Selected"
        stroke="none"
        strokeWidth="1"
        fill="none"
        fillRule="evenodd"
      >
        {selected ? (
          <path
            d="M22,34 C15.372583,34 10,28.627417 10,22 C10,15.372583 15.372583,10 22,10 C28.627417,10 34,15.372583 34,22 C34,28.627417 28.627417,34 22,34 Z M22,26 C24.209139,26 26,24.209139 26,22 C26,19.790861 24.209139,18 22,18 C19.790861,18 18,19.790861 18,22 C18,24.209139 19.790861,26 22,26 Z"
            id="Combined-Shape"
            fill={getFillColor(theme)}
          />
        ) : (
          <circle
            id="Oval-3"
            stroke={getBorderColor(theme)}
            strokeWidth="1.5"
            cx="22"
            cy="22"
            r="11.25"
          />
        )}
      </g>
    </svg>
  );
};

RadioOption.displayName = 'RadioOption';
RadioOption.propTypes = radioOptionPropTypes;
