import { useState, ChangeEvent } from 'react';

export const useInput = <T extends string | number>(initialValue: T) => {
  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) : 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
    }
  };
};