import { c, CheckboxProps as BaseProps, classy, m } from '@onfido/castor';
import { useField } from '@onfido/castor-react';
import React, { useMemo } from 'react';
import { IndicatorContainer, splitContainerProps } from '../../internal';
import { withRef } from '../../utils';

let count = 0;

export const Checkbox = withRef(function Checkbox(
  {
    id: initialId,
    bordered,
    invalid,
    children,
    className,
    style,
    ...restProps
  }: CheckboxProps,
  ref: CheckboxProps['ref']
) {
  const { disabled, touched } = useField();
  const [containerProps, inputProps] = splitContainerProps(restProps);

  const id = useMemo(() => initialId || `castor_radio_${++count}`, [initialId]);

  return (
    <IndicatorContainer
      {...containerProps}
      htmlFor={id}
      bordered={bordered}
      className={className}
      style={style}
    >
      {{
        children,
        input: (
          <input
            disabled={disabled} // will be overriden by props if set
            {...inputProps}
            ref={ref}
            id={id}
            type="checkbox"
            className={classy(c('checkbox'), m({ invalid, touched }))}
          />
        ),
      }}
    </IndicatorContainer>
  );
});

export type CheckboxProps = BaseProps &
  Omit<JSX.IntrinsicElements['input'], 'type'> & {
    id?: string; // id is now optional
  };