import * as React from 'react';

const Label: React.FC<{ label: string; }> = props => <label>{props.label}</label>;

interface BindProps<T = any, K extends keyof T = any> {
  bObject: T;
  bKey: K;
  bLabel?: string | React.ReactNode;
}

function bind<T, K extends keyof T>(bObject: T, bKey: K, bLabel?: string | React.ReactNode): BindProps<T, K> {
  return { bObject, bKey, bLabel };
}

function withBind<P extends object, V extends keyof P, C extends keyof P>(
  Component: React.ComponentType<P>,
  pick: (value: P[V], onChange: (value: P[V]) => void) => Pick<P, V | C>
) {
    return class extends React.Component<Omit<P, V | C> & BindProps> {
        private onChange = () => {
        };

        render() {
            const { bObject, bKey, bLabel, ...rest } = this.props;
            const props = { ...pick(bObject[bKey], this.onChange), ...rest } as P;
            const element = <Component {...props} />;
            if (bLabel === undefined) {
                return element;
            }
            
            return (
                <>
                  {typeof bLabel === 'string' ? <Label label={bLabel} /> : bLabel}
                  {element}
                </>
            );
        }
    }
}

interface TextInputProps {
    value: string;
    onChange: React.ChangeEventHandler<HTMLInputElement>;
}

const TextInput: React.FC<TextInputProps> = props => <input type='text' {...props} />;

export const BTextInput = withBind<TextInputProps, 'value', 'onChange'>(TextInput, (value, onChange) => {
  return { value, onChange: e => onChange(e.currentTarget.value) };
});

const obj = { text: '' };
<BTextInput {...bind(obj, 'text', <Label label='aaaa' />)} />;

React.createElement(exports.BTextInput, Object.assign({}, bind(obj, 'text', <Label label='aaaa'/>)));

React.createElement(exports.BTextInput, Object.assign({}, bind(obj, 'text', React.createElement(Label, { label: 'aaaa' }))));