// @flow
import { getPaletteColor } from '../../../mixins/branding';
import type { PatchworkTheme } from '../../../themes';
import type { ThemeProps } from '../../../types';

export const getFillColor = (theme: PatchworkTheme) =>
  getPaletteColor('brand-secondary-base')({ theme });

export const getBorderColor = (theme: PatchworkTheme) =>
  getPaletteColor('greyscale-light')({ theme });

const getUncheckedSVG = (color: string) => `
  <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" stroke-width="1" fill="none" fill-rule="evenodd">
      <circle stroke="${color}" strokeWidth="1.5" cx="22" cy="22" r="11.25" />
    </g>
  </svg>
`;

const getCheckedSVG = (color: string) => `
  <svg width="44px" height="44px" viewBox="0 0 44 44" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <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" fill="${color}" />
    </g>
  </svg>
`;

export const getRadioCheckedDataUri = ({ theme }: ThemeProps) => {
  const rawColor = getFillColor(theme);
  const color = rawColor != null ? rawColor : 'gray';
  return `data:image/svg+xml;utf8,${encodeURIComponent(getCheckedSVG(color))}`;
};

export const getRadioUncheckedDataUri = ({ theme }: ThemeProps) => {
  const rawColor = getBorderColor(theme);
  const color = rawColor != null ? rawColor : 'gray';
  return `data:image/svg+xml;utf8,${encodeURIComponent(
    getUncheckedSVG(color),
  )}`;
};
