"use strict";

var identity = v => v;
var safeProp = prop => obj => Maybe.from(obj[prop]);
var delay = ms => (new Promise(res => setTimeout(res,ms)));
var wait = ms => IO(() => delay(ms));
var getElementById = id => IO(() => document.getElementById(id));
var createElement = elType => IO(() => document.createElement(elType));
var appendChild = parent => child => IO(() => parent.appendChild(child));
var emptyElement = el => IO(() => (el.innerHTML = ""));
var onEvent = el => evtName => handler =>
  IO(() => el.addEventListener(evtName,handler,false));

var orders = {
  "o12345": {
    customerID: 6789,
    orderTotal: 92.3,
    orderDate: 800541296000,
    status: {
      shipped: true,
      shipDate: 800655555000,
    }
  },
  "o98765": {
    customerID: 8899,
    orderTotal: 3.14,
    orderDate: 1589480000000,
    status: {
      shipped: false,
      expectedShipDate: 1590999000000
    }
  }
};

var main = IO.do(function *main(){
  var orderIDEl = yield getElementById("order-id");
  var lookupBtn = yield getElementById("lookup-btn");
  yield onEvent(lookupBtn)("click")(function doLookup(evt){
    evt.preventDefault();
    
    var orderID = orderIDEl.value;
    orderIDEl.value = "";
    if (orderID) {
      lookupBtn.disabled = true;
      
      IO.do(getOrder(orderID))
      .run()
      .catch(reportError)
      .finally(() => lookupBtn.disabled = false);
    }
  });
});

onEvent(document)("DOMContentLoaded")(
  () => main.run().catch(reportError)
).run();
  
function *getOrder(orderID) {
  yield IO.do(renderMsg("Loading, please wait..."));  
  
  // fake lookup delay
  yield wait(500);
  
  return (
    safeProp(orderID)(orders)
    .fold(
      () => IO.do(renderNoOrder(orderID)),
      orderRecord =>
        IO.do(getCustomerForOrder(orderRecord))
        .chain(orderRecord => IO.do(renderOrder(orderID,orderRecord)))
    )
  );
}

function *getCustomerForOrder(orderRecord) {
  // NOTE: the `yield` here "unwraps" the IO to its underlying value,
  // before it's returned
  return yield (
    safeProp("customerID")(orderRecord)
    .fold(
      () => IO.of({ /* default empty customer record */ }),
      customerID =>
        IO.do(fetchCustomerRecord(customerID))
        .chain(customerRecord =>
          IO.of(Object.assign({ customer: customerRecord, },orderRecord))
        )
    )
  );
}

function *fetchCustomerRecord(customerID) {
  // fake a delay as if this was an Ajax call
  yield wait(1000);

  var customers = {
    "6789": {
      name: "Frank Wright",
      email: "[email protected]"
    }
  };
  
  // fake the return of customer record
  if (customerID in customers) {
    return customers[customerID];
  }
}

function processOrderCustomer(orderRecord) {
  return safeProp("customer")(orderRecord)
    .chain(customer => Maybe.from(
      (
        typeof customer == "object" &&
        "name" in customer && 
        "email" in customer
      ) ? customer : void 0
    ));
}

function processOrderStatus(orderRecord) {
  return (
    orderRecord.status.shipped ?
      Either.Right(orderRecord.status) :
      Either.Left(orderRecord.status)
  );
}

function *renderMsg(msg) {
  var contentEl = yield getElementById("content");
  var msgEl = yield createElement("span");
  msgEl.innerText = msg;
  yield emptyElement(contentEl);
  yield appendChild(contentEl)(msgEl);
}

function *renderNoOrder(orderID) {
  yield IO.do(
    renderMsg(`Order #${ orderID } not found.`)
  );
}

function *renderOrder(orderID,orderRecord) {
  var contentEl = yield getElementById("content");
  yield emptyElement(contentEl);
  
  // render order data
  var orderEl = yield createElement("div");
  yield IO.do(appendDiv(orderEl,
    `Order #${ orderID }`
  ));
  yield IO.do(appendDiv(orderEl,
    `Ordered: ${ new Date(orderRecord.orderDate).toDateString() }`
  ));
  
  // render order status
  yield appendChild(orderEl)(
    yield (
      processOrderStatus(orderRecord)
      .fold(
        status => IO.do(renderProcessingStatus(status)),
        status => IO.do(renderShippedStatus(status))
      )
    )
  );

  // render order total
  yield IO.do(appendDiv(orderEl,
    `Total: $${ orderRecord.orderTotal.toFixed(2) }`
  ));

  // render order customer info
  yield (
    processOrderCustomer(orderRecord)
    .fold(
      () => IO.do(renderNoCustomer(orderEl)),
      customerRecord =>
        IO.do(renderCustomer(orderEl,orderRecord.customerID,customerRecord))
    )
  );
  
  // add order element to the page
  yield appendChild(contentEl)(orderEl);
}

function *renderProcessingStatus(status) {
  var div = yield createElement("div");
  div.innerText = `Expected Shipping: ${ new Date(status.expectedShipDate).toDateString() }`;
  return div;
}

function *renderShippedStatus(status) {
  var div = yield createElement("div");
  div.innerText = `Shipped: ${ new Date(status.shipDate).toDateString() }`;
  return div;
}

function *renderNoCustomer(orderEl) {
  yield IO.do(appendDiv(orderEl,"Customer: (unknown)"));
}

function *renderCustomer(orderEl,customerID,customerRecord) {
  yield IO.do(appendDiv(orderEl,`Customer #${ customerID }`));
  yield IO.do(appendDiv(orderEl,customerRecord.name));
  yield IO.do(appendDiv(orderEl,customerRecord.email));
}

function *appendDiv(parent,text) {
  var div = yield createElement("div");
  div.innerText = text;
  yield appendChild(parent)(div);
}

// **********************************

function reportError(err) {
  if (typeof err._inspect == "function") {
    console.error(err._inspect());
  }
  else if (typeof err.toString == "function") {
    console.error(err.toString());
  }
  else {
    console.error("An unknown error was caught!");
  }
}