/* eslint-disable prefer-template, prefer-destructuring, no-var, vars-on-top */

// eslint-disable-next-line no-undef
var parser = new UAParser();
var deviceData = parser.getResult();
var browserName = deviceData.browser.name;
var browserVersion = deviceData.browser.major;

function unsupportedBrowserErrorMessage() {
  var unsupportedBrowserMessage = 'This browser is unsupported.';
  var redirectLink =
    'https://support.text-em-all.com/article/574-supported-web-browsers';
  var redirectLinkMessage =
    'This page will redirect after a few seconds to our support page.<br />If nothing happens, please <a href=' +
    redirectLink +
    '>click here</a>';

  // DOM elements
  var body = document.body;
  var container = document.createElement('div');
  var img = document.createElement('img');
  var message = document.createElement('H2');
  var description = document.createElement('P');

  // remove root div so that only the unsupported message shows
  body.removeChild(document.getElementById('root'));

  // body styles
  body.style.width = '100%';
  body.style.height = '100%';
  body.style.backgroundColor = '#f2f2f2';

  // message container styles
  container.style.position = 'relative';
  container.style.marginLeft = 'auto';
  container.style.marginRight = 'auto';
  container.style.textAlign = 'center';
  container.style.top = '100px';
  container.style.margin = '0 auto';
  container.style.width = '500px';
  container.style.backgroundColor = '#ffffff';
  container.style.border = 'none';
  container.style.paddingTop = '50px';
  container.style.paddingRight = '25px';
  container.style.paddingBottom = '50px';
  container.style.paddingLeft = '25px';
  // unsupported styles on older browsers
  container.style.borderRadius = '4px';
  container.style.boxShadow =
    '0px 1px 5px 0px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 3px 1px -2px rgba(0,0,0,0.12)';

  // Text-Em-All logo and styles
  img.src = 'http://cdn.text-em-all.com/assets/app-icons/CEA-logo-128.png';
  img.style.height = 'auto';
  img.style.width = '200px';

  // error message styles
  message.style.display = 'block';
  message.style.paddingTop = '40px';
  message.style.fontFamily = 'Helvetica, sans-serif';
  message.style.fontSize = '24px';
  message.style.fontWeight = '400';
  message.style.color = '#344a6f';

  // error description styles
  description.style.fontFamily = 'Helvetica, sans-serif';
  description.style.color = '#344a6f';
  description.style.lineHeight = '1.5';

  message.innerHTML = unsupportedBrowserMessage;
  description.innerHTML = redirectLinkMessage;

  container.appendChild(img);
  container.appendChild(message);
  container.appendChild(description);

  body.appendChild(container);

  // add delay for users to read error message before redirecting
  // eslint-disable-next-line func-names
  this.setTimeout(function () {
    window.location = redirectLink;
  }, 6000);
}

function validateUnsupportedBrowsers(lastSupportedVersion, currentVersion) {
  if (Number(currentVersion) < lastSupportedVersion) {
    return true;
  }
  return false;
}

function checkUnsupportedBrowserVersion(type, version) {
  if (type === 'Chrome') {
    var lastSupportedChromeVersion = 24;
    return validateUnsupportedBrowsers(lastSupportedChromeVersion, version);
  }

  if (type === 'IE') {
    // We no longer support IE :D
    return true;
  }

  if (type === 'Firefox') {
    var lastSupportedFirefoxVersion = 24;
    return validateUnsupportedBrowsers(lastSupportedFirefoxVersion, version);
  }

  if (type === 'Opera') {
    var lastSupportedOperaVersion = 15;
    return validateUnsupportedBrowsers(lastSupportedOperaVersion, version);
  }

  if (type === 'Safari') {
    var lastSupportedSafariVersion = 10;
    return validateUnsupportedBrowsers(lastSupportedSafariVersion, version);
  }
  return false;
}

var isUnsupported = checkUnsupportedBrowserVersion(browserName, browserVersion);

function checkBrowserVersion() {
  if (isUnsupported) {
    return unsupportedBrowserErrorMessage();
  }
}

checkBrowserVersion();