// @flow
import React, { type ComponentType } from 'react';
import styled from 'styled-components';
import { getPaletteColor } from '../../../mixins/branding';
import type { ThemeProps } from '../../../types';
import {
  type RadioOptionProps,
  type StyledProp,
} from './radio-option.proptypes';

const _RadioChecked = ({ className }: StyledProp) => (
  <g
    stroke="none"
    strokeWidth="1"
    fill="none"
    fillRule="evenodd"
    className={className}
  >
    <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" />
  </g>
);

const RadioChecked = styled(_RadioChecked)`
  path {
    fill: ${getPaletteColor('brand-secondary-base')};
  }
`;

const _RadioUnchecked = ({ className }: StyledProp) => (
  <g strokeWidth="1" fill="none" fillRule="evenodd" className={className}>
    <circle strokeWidth="1.5" cx="22" cy="22" r="11.25" />
  </g>
);

const RadioUnchecked = styled(_RadioUnchecked)`
  circle {
    stroke: ${getPaletteColor('greyscale-light')};
  }
`;

const _RadioOption = ({
  checked,
  className,
  id,
}: {|
  ...ThemeProps,
  ...RadioOptionProps,
|}) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="44px"
    height="44px"
    viewBox="0 0 44 44"
    version="1.1"
    className={className}
    id={id}
  >
    {checked ? <RadioChecked /> : <RadioUnchecked />}
  </svg>
);

export const RadioOption: ComponentType<RadioOptionProps> = styled(
  _RadioOption,
)`
  &:hover {
    cursor: pointer;
  }
`;

RadioOption.displayName = 'RadioOption';
