// Main
(() => {
  function setInnerText(id, text) {
    document.getElementById(id).innerText = text;
  }

  function setValue(id, value) {
    document.getElementById(id).value = value;
  }

  function setChecked(id, value) {
    document.getElementById(id)["checked"] = value;
  }

  function getChecked(id) {
    return document.getElementById(id)["checked"];
  }

  function getValue(id) {
    return document.getElementById(id).value;
  }

  function setSelect(id, itemList) {
    const select = document.getElementById(id);
    const allowChange = select['allow_change'] !== false;

    if (allowChange) {
      while (select.options.length > itemList.length) {
        select.removeChild(select.options[select.options.length - 1]);
      }

      for (let i = 0; i < itemList.length; i++) {
        if (select.options[i]) {
          if (select.options[i].text !== itemList[i]) {
            select.options[i].text = itemList[i];
          }
        } else {
          const opt = document.createElement('option');
          opt.text = itemList[i];
          select.appendChild(opt);
        }
      }
    }
  }

  window.uiUpdate = (() => {

    const _renter = (() => {
      return {
        setAllocatedFunds: (currency) => {
          setInnerText('ID_Renter_AllocatedFunds', currency);
        },
        setUsedFunds: (currency) => {
          setInnerText('ID_Renter_UsedFunds', currency);
        },
        setAvailableFunds: (currency) => {
          setInnerText('ID_Renter_AvailableFunds', currency);
        },
        setHostCount: (count) => {
          setInnerText('ID_Renter_HostCount', count);
        },
        setEstimatedSpace: (space) => {
          setInnerText('ID_Renter_EstimatedSpace', space);
        },
        setUsedSpace: (space) => {
          setInnerText('ID_Renter_UsedSpace', space);
        },
        setEstimatedCost: (currency) => {
          setInnerText('ID_Renter_EstimatedCost', currency);
        },
        setAvailableSpace: (space) => {
          setInnerText('ID_Renter_AvailablSpace', space);
        },
        setDownloadCost: (currency) => {
          setInnerText('ID_Renter_EstimatedDownloadCost', currency);
        },
        setUploadCost: (currency) => {
          setInnerText('ID_Renter_EstimatedUploadCost', currency);
        },
        setEstimatedCost: (currency) => {
          setInnerText('ID_Renter_EstimatedCost', currency);
        },
        setEstimatedDownloadCost: (currency) => {
          setInnerText('ID_Renter_EstimatedDownloadCost', currency);
        },
        setEstimatedUploadCost: (currency) => {
          setInnerText('ID_Renter_EstimatedUploadCost', currency);
        },
        setAllowance: (allowance) => {
          if (document.getElementById('renter_settings_window').classList.contains('hidden-element')) {
            setValue('ID_RenterSetFunds', allowance.Funds);
            setValue('ID_RenterSetHosts', allowance.Hosts);
            setValue('ID_RenterSetPeriod', allowance.Period);
            setValue('ID_RenterSetRenewWindow', allowance.RenewWindowInBlocks);
            AppActions.calculateEstimatedStorage(allowance.Funds, (res) => {
              setInnerText('ID_RenterCalcStorage', '~' + res);
            });
          }
        },
        setUploadProgress: (items) => {
          items = items || [];
          const table = document.getElementById('ID_UploadProgressTable');
          while (table.rows.length > items.length) {
            table.deleteRow(table.rows.length - 1);
          }
          for (const item of items) {
            const siaPath = item['SiaPath'];
            const progress = item['Progress'];
            const rid = window.btoa('progress_' + siaPath);
            const row = document.getElementById(rid);
            if (row) {
              row.cells[1].firstChild.value = progress;
            } else {
              const r = table.insertRow(table.rows.length);
              r.insertCell(0).innerText = siaPath;
              r.insertCell(1).innerHTML = '<progress value="' + progress + '" max="100"></progress>';
              r.id = rid;
            }
          }
        }
      };
    })();

    const _wallet = (() => {
      return {
        setConfirmedBalance: (balance) => {
          setInnerText('ID_WalletConfirmedBalance', balance);
        },
        setUnconfirmedBalance: (balance) => {
          setInnerText('ID_WalletBalanceUnconfirmed', balance);
        },
        setTotalBalance: (balance) => {
          setInnerText('ID_WalletTotalBalance', balance);
        },
        setReceiveAddress: (address) => {
          setInnerText('ID_WalletReceiveAddress', address);
        },
        setLockWalletOnExit: (lock) => {
          if (document.getElementById('sia_settings_window').classList.contains('hidden-element')) {
            setChecked('ID_SettingsLockWalletOnExit', lock);
          }
        }
      };
    })();

    return {
      Renter: _renter,
      Wallet: _wallet,
      setBlockHeight: (height) => {
        setInnerText('ID_BlockHeight', height);
      },
      setServerVersion: (version) => {
        setInnerText('ID_ServerVersion', version);
      },
      setAvailableDriveLetters: (drives) => {
        setSelect('ID_MountDrives', drives);
      },
      notifyDriveUnmounted: _notifyDriveUnmounted,
      reloadApplication: reloadApplication,
      setAutoStartOnLogon: (start) => {
        if (document.getElementById('sia_settings_window').classList.contains('hidden-element')) {
          setChecked('ID_SettingsAutoStart', start);
        }
      },
      setLaunchBundledSiad: (launch) => {
        if (document.getElementById('sia_settings_window').classList.contains('hidden-element')) {
          setChecked('ID_SettingsLaunchServer', launch);
        }
      },
      setApiPort: (port) => {
        if (document.getElementById('sia_settings_window').classList.contains('hidden-element')) {
          setValue('ID_SettingsApiPort', port);
        }
      },
      setHostPort: (port) => {
        if (document.getElementById('sia_settings_window').classList.contains('hidden-element')) {
          setValue('ID_SettingsHostPort', port);
        }
      },
      setRpcPort: (port) => {
        if (document.getElementById('sia_settings_window').classList.contains('hidden-element')) {
          setValue('ID_SettingsRPCPort', port);
        }
      },
      setLaunchFileManager: (launch) => {  
        if (document.getElementById('sia_settings_window').classList.contains('hidden-element')) {
          setChecked('ID_SettingsLaunchFileManager', launch);
        }
      },
      displayShutdownWindow: () => {
        const div = document.getElementById('shutdown_window');
        document.body.innerHTML = '';
        document.body.appendChild(div);
        div.classList.remove('hidden-element');
      }
    };
  })();


  const UiState = (() => {
    function _clientVersion() {
      return 'v' + window.uiState.clientVersion;
    }

    function _isOnline() {
      return window.uiState.isOnline;
    }

    function _isWalletConfigured() {
      return window.uiState.isWalletConfigured;
    }

    function _isWalletLocked() {
      return window.uiState.isWalletLocked;
    }

    function _allocatedRenterFunds() {
      return window.uiState.allocatedRenterFunds;
    }

    function _defaultRenterSettings() {
      return window.uiState.defaultRenterSettings;
    }

    return {
      clientVersion: _clientVersion,
      isOnline: _isOnline,
      isWalletConfigured: _isWalletConfigured,
      isWalletLocked: _isWalletLocked,
      allocatedRenterFunds: _allocatedRenterFunds,
      defaultRenterSettings: _defaultRenterSettings
    };
  })();

  const AppActions = (() => {
    function _createWallet(cb) {
      console.log('Create wallet');
      return window.appActions.createWallet(cb);
    }

    function _mountDrive(mountLocation, cb) {
      console.log('Mount drive: ' + mountLocation);
      return window.appActions.mountDrive(mountLocation, cb);
    }

    function _startApp() {
      window.appActions.startApp();
    }

    function _stopApp() {
      window.appActions.stopApp();
    }

    function _unlockWallet(pwd, cb) {
      return window.appActions.unlockWallet(pwd, cb);
    }

    function _unmountDrive(cb) {
      console.log('Unmount drive');
      return window.appActions.unmountDrive(cb);
    }

    function _shutdown() {
      window.appActions.shutdown();
    }

    function _setRenterSettings(allowance, cb) {
      window.appActions.setRenterSettings(allowance, cb);
    }

    function _calculateEstimatedStorage(funds, cb) {
      window.appActions.calculateEstimatedStorage(funds, cb)
    }

    function _setSiaSettings(settings, cb) {
      window.appActions.setSiaSettings(settings, cb);
    }

    return {
      createWallet: _createWallet,
      mountDrive: _mountDrive,
      startApp: _startApp,
      stopApp: _stopApp,
      unlockWallet: _unlockWallet,
      unmountDrive: _unmountDrive,
      shutdown: _shutdown,
      setRenterSettings: _setRenterSettings,
      calculateEstimatedStorage: _calculateEstimatedStorage,
      setSiaSettings: _setSiaSettings
    };
  })();

  let _mountHandler;

  function setMainWindow(name) {
    console.log('Setting main window: ' + name);
    const elem = document.getElementById(name);
    const mainWindow = document.getElementById('main_window');
    if (mainWindow.childElementCount === 1) {
      const curElem = mainWindow.firstChild;
      mainWindow.removeChild(curElem);
      curElem.classList.add('hidden-element');
      document.body.appendChild(curElem);
    }

    elem.parentElement.removeChild(elem);
    elem.classList.remove('hidden-element');
    mainWindow.appendChild(elem);
  }

  function displayErrorPopup(title, msg, cb) {
    alert(msg);
    if (cb) {
      cb();
    }
  }

  function _notifyDriveUnmounted() {
    const mountButton = document.getElementById('ID_MountButton');
    const mountSelect = document.getElementById('ID_MountDrives');
    if (mountButton.innerText === 'Unmount') {
      mountButton.innerText = "Mount";
      mountButton.onclick = _mountHandler;
      mountButton.disabled = false;
      mountSelect.disabled = false;
      mountSelect['allow_change'] = true;
    }
  }

  function handleRenterUploads() {
    setMainWindow('upload_progress_window');

    const okButton = document.getElementById('ID_RenterUploadsOk');
    okButton.onclick = () => {
      okButton.onclick = null;
      beginMainApplication();
    };
  }

  function handleSiaEditSettings() {
    setMainWindow('sia_settings_window');
    const cancelButton = document.getElementById('ID_SiaSettingsCancel');
    cancelButton.onclick = () => {
      cancelButton.onclick = null;
      saveButton.onclick = null;
      beginMainApplication();
    };

    const saveButton = document.getElementById('ID_SiaSettingsOK');
    saveButton.onclick = () => {
      saveButton.onclick = null;
      cancelButton.onclick = null;
      AppActions.setSiaSettings({
        'UnlockOnExit': getChecked('ID_SettingsLockWalletOnExit'),
        'AutoStartOnLogon': getChecked('ID_SettingsAutoStart'),
        'UseBundledSiad': getChecked('ID_SettingsLaunchServer'),
        'ApiPort': getValue('ID_SettingsApiPort'),
        'HostPort': getValue('ID_SettingsHostPort'),
        'RpcPort': getValue('ID_SettingsRPCPort'),
        'LaunchFileManager': getChecked('ID_SettingsLaunchFileManager')
      }, (success, reason) => {
        if (success) {
          beginMainApplication();
        } else {
          displayErrorPopup('Settings Failed', reason);
          handleSiaEditSettings();
        }
      });
    };
  }

  function beginMainApplication() {
    AppActions.startApp();
    setMainWindow('app_window');
    const settingsEditLink = document.getElementById('ID_Sia_Settings_Edit');
    settingsEditLink.onclick = () => {
      settingsEditLink.onclick = null;
      handleSiaEditSettings();
    };
    const renterEditLink = document.getElementById('ID_Renter_Edit');
    renterEditLink.onclick = () => {
      renterEditLink.onclick = null;
      handleRenterEditSettings();
    };
    const renterUploadsLink = document.getElementById('ID_Renter_Uploads');
    renterUploadsLink.onclick = () => {
      renterUploadsLink.onclick = null;
      handleRenterUploads();
    };
    const mountButton = document.getElementById('ID_MountButton');
    const mountSelect = document.getElementById('ID_MountDrives');

    _mountHandler = () => {
      mountSelect['allow_change'] = false;
      if (UiState.allocatedRenterFunds() === '0') {
        displayErrorPopup('Error', 'Renter funding must be configured before trying to mount.')
      } else {
        mountButton.onclick = null;
        mountButton.disabled = true;
        mountSelect.disabled = true;
        if (mountButton.innerText === "Mount") {
          AppActions.mountDrive(mountSelect.value, (success, reason) => {
            if (success) {
              mountButton.innerText = "Unmount";
            } else {
              displayErrorPopup('Mount Failed', reason);
            }
            mountButton.onclick = _mountHandler;
            mountButton.disabled = false;
          });
        } else {
          AppActions.unmountDrive((success, reason) => {
            if (success) {
              _notifyDriveUnmounted()
            } else {
              displayErrorPopup('Unmount Failed', reason);
              mountButton.onclick = _mountHandler;
              mountButton.disabled = false;
              mountSelect['allow_change'] = true;
            }
          });
        }
      }
    };
    mountButton.onclick = _mountHandler;
  }

  function handleRenterEditSettings() {
    setMainWindow('renter_settings_window');
    const funds = document.getElementById('ID_RenterSetFunds');
    funds.oninput = () => {
      AppActions.calculateEstimatedStorage(funds.value, (res) => {
        setInnerText('ID_RenterCalcStorage', '~' + res);
      });
    };

    const defaultsButton = document.getElementById('ID_RenterSettingsDefaults');
    defaultsButton.onclick = () => {
      funds.oninput = null;
      const settings = UiState.defaultRenterSettings();
      if (getValue('ID_RenterSetFunds') === '0') {
        setValue('ID_RenterSetFunds', settings.Funds);
      }
      setValue('ID_RenterSetHosts', settings.Hosts);
      setValue('ID_RenterSetPeriod', settings.Period);
      setValue('ID_RenterSetRenewWindow', settings.RenewWindowInBlocks);
    };

    const cancelButton = document.getElementById('ID_RenterSettingsCancel');
    cancelButton.onclick = () => {
      funds.oninput = null;
      saveButton.onclick = null;
      cancelButton.onclick = null;
      defaultsButton.onclick = null;
      beginMainApplication();
    };

    const saveButton = document.getElementById('ID_RenterSettingsOK');
    saveButton.onclick = () => {
      funds.oninput = null;
      saveButton.onclick = null;
      cancelButton.onclick = null;
      defaultsButton.onclick = null;
      AppActions.setRenterSettings({
        'Funds': getValue('ID_RenterSetFunds'),
        'Hosts': getValue('ID_RenterSetHosts'),
        'Period': getValue('ID_RenterSetPeriod'),
        'RenewWindowInBlocks': getValue('ID_RenterSetRenewWindow')
      }, (success, reason) => {
        if (success) {
          beginMainApplication();
        } else {
          displayErrorPopup('Allocation Failed', reason);
          handleRenterEditSettings();
        }
      });
    };
  }

  function handleUnlockWallet() {
    setMainWindow('unlock_window');

    const unlockButton = document.getElementById('ID_UnlockWalletButton');
    unlockButton.onclick = () => {
      unlockButton.onclick = null;
      const password = document.getElementById('ID_WalletUnlockPwd');
      if (AppActions.unlockWallet(password.value, (success, reason) => {
          if (success) {
            beginMainApplication();
          } else {
            displayErrorPopup('Error', reason, () => {
              handleUnlockWallet();
            });
          }
        })) {
        password.value = '';
        setMainWindow('unlocking_window');
      } else {
        password.value = '';
      }
    };
  }

  function handleWalletCreated(seed) {
    setMainWindow('wallet_created_window');
    document.getElementById('ID_WalletSeed').innerText = seed;
    const button = document.getElementById('ID_WalletCreatedButton');
    button.onclick = () => {
      button.onclick = null;
      handleUnlockWallet();
    };
  }

  function handleCreateWallet() {
    setMainWindow('create_window');
    const createButton = document.getElementById('ID_CreateWalletButton');
    createButton.onclick = () => {
      createButton.onclick = null;
      AppActions.createWallet((success, reasonOrSeed) => {
        if (success) {
          handleWalletCreated(reasonOrSeed);
        } else {
          displayErrorPopup('Error', reasonOrSeed, () => {
            handleCreateWallet();
          });
        }
      });
    };
  }

  function reloadApplication() {
    AppActions.stopApp();
    document.getElementById('ID_SiaDrive').innerText = 'SiaDrive ' + UiState.clientVersion();
    document.getElementById('ID_ServerVersion').innerText = '...';
    if (UiState.isOnline()) {
      if (UiState.isWalletConfigured()) {
        if (UiState.isWalletLocked()) {
          handleUnlockWallet();
        } else {
          beginMainApplication();
        }
      } else {
        handleCreateWallet();
      }
    } else {
      setMainWindow('offline_window');
    }
  }

  window.addEventListener('load', ()=> {
    console.log('Main window load');
    reloadApplication();
  });
})();