import * as Ariakit from '@ariakit/react';
import { getClassNames } from '@websolutespa/bom-core';
import { forwardRef, useContext } from 'react';
import styled from 'styled-components';
import { getVariantKey } from '../../variants';
import { SelectContext } from './select.context';
import { ISelectVariants, selectVariants } from './select.variants';

const SelectOptionCheckStyle = styled(Ariakit.SelectItemCheck) <SelectOptionCheckProps>`
  ${props => getVariantKey('optionCheck', props.variant, props.variants)}
`;

export type SelectOptionCheckProps = Ariakit.SelectItemCheckProps & {
  variant?: keyof typeof selectVariants | (string & {});
  variants?: ISelectVariants;
};

export const SelectOptionCheck = forwardRef<HTMLDivElement, SelectOptionCheckProps>(
  function SelectOptionCheck({
    variant,
    variants,
    className,
    ...props
  }: SelectOptionCheckProps, ref) {
    const context = useContext(SelectContext);
    if (!context) {
      return;
    }
    const classNames = getClassNames('select__optionCheck', className);
    return (
      <SelectOptionCheckStyle
        ref={ref}
        className={classNames}
        variant={context.variant}
        variants={context.variants}
        {...props}
      />
    );
  });