// @flow
import React from 'react';
import { useTheme } from 'styled-components';
import type { CheckBoxIconProps } from './check-box-icon.proptypes';
import { getFillColor, getFontColor } from './check-box-icon.css-rules';

export const CheckBoxIcon = ({
  className,
  selected,
  borderColor,
}: CheckBoxIconProps) => {
  const theme = useTheme();

  return (
    <svg
      width="44px"
      height="44px"
      viewBox="0 0 44 44"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
    >
      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
        {selected ? (
          <g transform="translate(11.000000, 11.000000)">
            <rect
              fill={getFillColor(theme)}
              x="0"
              y="0"
              width="22"
              height="22"
              rx="6"
            />
            <polyline
              stroke={getFontColor(theme)}
              strokeWidth="3"
              points="5 10.1464784 9.3287618 14.4752402 17.304002 6.5"
            />
          </g>
        ) : (
          <rect
            stroke={theme.colorPalette[borderColor]}
            strokeWidth="1.5"
            x="11.75"
            y="11.75"
            width="20.5"
            height="20.5"
            rx="6"
          />
        )}
      </g>
    </svg>
  );
};

CheckBoxIcon.displayName = 'CheckBoxIcon';
