import { ComponentProps, SVGProps, useContext } from 'react';
import styled from 'styled-components';
import { Svg } from '../../components';
import { getVariantKey } from '../../variants';
import { RadioContext } from './radio.context';
import { IRadioVariants, radioVariants } from './radio.variants';

export type RadioIconProps = SVGProps<SVGSVGElement> & {
  variant?: keyof typeof radioVariants | (string & {});
  variants?: IRadioVariants;
};

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

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

function RadioChecked({ className, ...props }: ComponentProps<typeof StyledChecked>) {
  return (
    <StyledChecked viewBox="0 0 24 24" fill="currentcolor"
      className={className}
      {...props}
    >
      <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
    </StyledChecked>
  );
}

function RadioUnchecked({ className, ...props }: ComponentProps<typeof StyledUnchecked>) {
  return (
    <StyledUnchecked viewBox="0 0 24 24" fill="currentcolor"
      className={className}
      {...props}
    >
      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
    </StyledUnchecked>
  );
}

export function RadioIcon({
  variant = 'default',
  variants,
  ...props
}: ComponentProps<typeof StyledChecked>) {
  const context = useContext(RadioContext);
  return (
    <>
      <RadioChecked className="radio__checked"
        variant={variant || context?.variant}
        variants={variants || context?.variants}
        {...props}
      />
      <RadioUnchecked className="radio__unchecked"
        variant={variant || context?.variant}
        variants={variants || context?.variants}
        {...props}
      />
    </>
  );
}