// @flow
import { getPaletteColor, getOutlineColor } 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 getFontColor = (theme: PatchworkTheme) =>
  getPaletteColor('white')({ theme });

export const getCheckboxCheckedDataUri = ({ theme }: ThemeProps) => {
  const rawColor = getFillColor(theme);
  const color = encodeURIComponent(rawColor != null ? rawColor : 'gray');
  return `data:image/svg+xml;utf8,%3Csvg width='44px' height='44px' viewBox='0 0 44 44' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Icons/checkbox-selected' stroke='none' strokeWidth='1' fill='none' fillRule='evenodd'%3E%3Cg id='Group' transform='translate(11.000000, 11.000000)'%3E%3Crect id='Rectangle-4' fill='${color}' x='0' y='0' width='22' height='22' rx='6' /%3E%3Cpolyline id='Path-3' stroke='${encodeURIComponent(
    getFontColor(theme),
  )}' stroke-width='3' points='5 10.1464784 9.3287618 14.4752402 17.304002 6.5' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E`;
};

export const getCheckboxUnCheckedDataUri = ({ theme }: ThemeProps) =>
  `data:image/svg+xml;utf8,%3Csvg width='44px' height='44px' viewBox='0 0 44 44' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Icons/checkbox-selected' stroke='none' strokeWidth='1' fill='none' fillRule='evenodd'%3E%3Crect id='Rectangle-3' stroke='${encodeURIComponent(
    getOutlineColor(theme),
  )}' strokeWidth='1.5' x='11.75' y='11.75' width='20.5' height='20.5' rx='6' /%3E%3C/g%3E%3C/svg%3E`;
