import { ComponentProps, SVGProps, useContext } from 'react';
import styled from 'styled-components';
import { Svg } from '../../components';
import { getVariantKey } from '../../variants';
import { CheckboxContext } from './checkbox.context';
import { checkboxVariants, ICheckboxVariants } from './checkbox.variants';

export type CheckboxIconProps = SVGProps<SVGSVGElement> & {
  variant?: keyof typeof checkboxVariants | (string & {});
  variants?: ICheckboxVariants;
};

const StyledChecked = styled(Svg) <CheckboxIconProps>`
  ${props => getVariantKey('checked', props.variant, props.variants)}
`;

const StyledUnchecked = styled(Svg) <CheckboxIconProps>`
  ${props => getVariantKey('unchecked', props.variant, props.variants)}
`;

function CheckboxChecked({ className, ...props }: ComponentProps<typeof StyledChecked>) {
  return (
    <StyledChecked viewBox="0 0 24 24" fill="currentcolor"
      className={className}
      {...props}
    >
      <path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
    </StyledChecked>
  );
}

function CheckboxUnchecked({ className, ...props }: ComponentProps<typeof StyledUnchecked>) {
  return (
    <StyledUnchecked viewBox="0 0 24 24" fill="currentcolor"
      className={className}
      {...props}
    >
      <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
    </StyledUnchecked>
  );
}

export function CheckboxIcon({
  variant = 'default',
  variants,
  ...props
}: ComponentProps<typeof StyledChecked>) {
  const context = useContext(CheckboxContext);
  return (
    <>
      <CheckboxChecked className="checkbox__checked"
        variant={variant || context?.variant}
        variants={variants || context?.variants}
        {...props}
      />
      <CheckboxUnchecked className="checkbox__unchecked"
        variant={variant || context?.variant}
        variants={variants || context?.variants}
        {...props}
      />
    </>
  );
}