import * as Ariakit from '@ariakit/react';
import { getClassNames } from '@websolutespa/bom-core';
import { forwardRef, useContext } from 'react';
import styled from 'styled-components';
import { UIStyledComponentPropsWithRef } from '../../components';
import { getVariantKey, useVariants } from '../../variants';
import { CheckboxContext } from './checkbox.context';
import { checkboxVariants, ICheckboxVariants } from './checkbox.variants';

export const StyledCheckboxGroupLabel = styled(Ariakit.GroupLabel) <CheckboxGroupLabelProps>`
  ${props => getVariantKey('groupLabel', props.variant, props.variants)}
`;

type Props = {
  className?: string;
  variant?: keyof typeof checkboxVariants | (string & {});
  variants?: ICheckboxVariants;
};

export type CheckboxGroupLabelProps = Ariakit.GroupLabelProps & UIStyledComponentPropsWithRef<'div', Props>;

export const CheckboxGroupLabel = forwardRef(
  function Checkbox({
    className,
    variant = 'default',
    variants,
    ...props
  }: CheckboxGroupLabelProps, ref: CheckboxGroupLabelProps['ref']) {
    const context = useContext(CheckboxContext);
    const classNames = getClassNames('checkbox__groupLabel', className);
    const globalVariants = useVariants('checkbox', checkboxVariants);
    variants = variants || globalVariants;
    return (
      <StyledCheckboxGroupLabel
        ref={ref}
        className={classNames}
        variant={variant || context?.variant}
        variants={variants || context?.variants}
        {...props}
      />
    );
  }
);