import { useState, ChangeEvent } from 'react';

type InputHookConfig = {
  disallowSpaces?: boolean;
  spaceReplacer?: string;
}

export const useInput = <T extends string | number>(initialValue: T, config?: InputHookConfig) => {
  const [value, setValue] = useState<T>(initialValue);

  return {
    value,
    setValue,
    reset: () => setValue(initialValue),
    bind: {
      value: value,
      onChange: (event: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
        const changed: string | number = typeof initialValue === 'number' ? parseInt(event.target.value) : config?.disallowSpaces ? event.target.value.replace(' ', config.spaceReplacer || '_') : event.target.value;
      setValue(changed as T);
    }
  }
};
};

export const useCheckbox = (initial: boolean) => {
  const [value, setValue] = useState(initial);

  return {
    value,
    setValue,
    reset: () => setValue(initial),
    bind: {
      checked: value,
      onClick: () => {
        setValue(v => !v);
      },
      readOnly: true
    }
  };
};