import * as React from "react";

type RenderT<State> = (
  state: State,
  update: <K extends keyof State>(key: K, value: State[K]) => void,
) => React.ReactNode;

interface Props<State> {
  state: State;
  render: RenderT<State>;
}

export function StorybookOneWayBinding<State>(props: Props<State>) {
  const C = StorybookOneWayBinding_ as any;
  return <C {...props} />;
}

class StorybookOneWayBinding_<State> extends React.Component<Props<State>, State> {
  state: State = this.getState(this.props);

  getState(props: Props<State>): State {
    return props.state;
  }

  componentWillReceiveProps(nextProps: Readonly<Props<State>>) {
    const nextState = this.getState(nextProps);

    for (let key_ of Object.keys(nextState)) {
      const key = key_ as keyof State;

      if (nextProps.state[key] !== nextState[key]) {
        this.setState((): any => {
          return {
            [key]: nextProps.state[key],
          };
        });
      }
    }
  }

  update = <K extends keyof State>(key: K, value: State[K]) => {
    this.setState((): any => {
      return {
        [key]: value,
      };
    });
  };

  render() {
    const { render } = this.props;
    return render(this.state, this.update);
  }
}