import { detect } from 'detect-browser';
import { createContext } from 'react';

// const modernDesktop = [
//   'Open BSD',
//   'Sun OS',
//   'Linux',
//   'BeOS',
//   'Mac OS',
//   'QNX',
//   'Chrome OS',
//   'Windows Vista',
//   'Windows 7',
//   'Windows 8',
//   'Windows 8.1',
//   'Windows 10'
// ];

const oldDesktop = [
  'Windows 2000',
  'Windows 3.11',
  'Windows 95',
  'Windows 98',
  'Windows XP',
  'Windows Server 2003',
  'Windows ME',
  'OS/2'
];

const mobileDevice = [
  'iOS',
  'Android OS',
  'BlackBerry OS',
  'Windows Mobile',
  'Amazon OS'
];

export enum BrowserCompatibilityClass {
  MaybeOk = 'MaybeOk',
  Unknown = 'Unknown',
  Safari = 'Safari',
  Mobile = 'Mobile',
  Old = 'Old'
};

export const getCompatibilityClass = () => {
  const browser = detect();
  if (!browser || !browser.os || !browser.name) {
    return BrowserCompatibilityClass.Unknown;
  } else if (oldDesktop.includes(browser.os as string)) {
    return BrowserCompatibilityClass.Old;
  } else if (mobileDevice.includes(browser.os as string)) {
    return BrowserCompatibilityClass.Mobile;
  } else if (browser.name === 'safari') {
    return BrowserCompatibilityClass.Safari;
  } else {
    return BrowserCompatibilityClass.MaybeOk;
  }
}

export default createContext(getCompatibilityClass());