import * as R from "ramda";
import React from "react";
import ReactDOM from "react-dom";
import { Provider, connect } from "react-redux";
import { createStore, applyMiddleware, compose } from "redux";
import createSagaMiddleware from "redux-saga";

import { withDispatch } from "./redux-utils";
import { restart, recordError } from "./saga-utils";
import { take, spawn, delay } from "redux-saga/effects";

import { Root } from "./toplevel-react";
import { rootReducer, updateName } from "./reducer";
import { rootSaga, getIp, fail } from "./root-saga";

import { put } from "redux-saga/effects";
import { FocusManager } from "./FocusManager";

// Store Setup ==============================================================================

// Make redux devtools work, if present
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

// Make the redux store, with saga middleware enabled
const sagaMiddleware = createSagaMiddleware();
export const store = createStore(
  rootReducer,
  composeEnhancers(applyMiddleware(sagaMiddleware))
);

const ConnectedRoot = connect(
  // Map the store's state to the toplevel component's props
  R.pickAll(["name", "ip", "error"]),
  // Map redux's dispatch function to props that will call it with a specific action
  withDispatch({ getIp, updateName, fail, restart })
)(Root);

function* toplevel() {
  // Run the root saga
  let rootTask = yield spawn(rootSaga);

  // Connect Redux to Toplevel Component ======================================================
  // Render Connected Component to the dom at #root ===========================================
  yield take("co/fwoar/APP_INIT");

  const reactRender = new Promise(resolve => {
    ReactDOM.render(
      // The Toplevel component is wrapped in a provider, to make the store available to connect
      <Provider store={store}>
        <FocusManager>
          {(ref, doFocus) => <ConnectedRoot focusRef={ref} {...{ doFocus }} />}
        </FocusManager>
      </Provider>,
      document.getElementById("root"),
      resolve
    );
  });

  yield reactRender;

  let quit = false;
  while (!quit) {
    try {
      yield rootTask.toPromise();
    } catch (err) {
      console.log("Error!", err);
      yield put(recordError(err.toString()));

      const { type } = yield take([
        "co/fwoar/APP_RESTART",
        "co/fwoar/APP_QUIT"
      ]);
      if (type === "co/fwoar/APP_QUIT") {
        console.log("Quitting!");
        quit = true;
      } else if (type === "co/fwoar/APP_RESTART") {
        console.log("restarting");
        rootTask = yield spawn(rootSaga);
      }
    }
    yield delay(10);
  }
}

sagaMiddleware.run(toplevel);