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

export const Input = withRef(function Input(
  {
    id: initialId, // Optional id passed in
    type = 'text',
    invalid,
    className,
    ...restProps
  }: InputProps,
  ref: InputProps['ref']
) {
  const { disabled, touched } = useField();

  // Generate unique id only if `initialId` is not provided
  const id = useMemo(
    () => initialId || `castor_input_${++idCount}`,
    [initialId]
  );

  return (
    <input
      disabled={disabled} // will be overridden by props if set
      {...restProps}
      ref={ref}
      id={id}
      type={type}
      className={classy(c('input'), m({ invalid, touched }), className)}
    />
  );
});

export type InputProps = BaseProps &
  Omit<InputElementProps, 'children'> & {
    id?: string; // id is now optional
  };

type InputElementProps = JSX.IntrinsicElements['input'];

let idCount = 0;