/**
 * FlowOS Bootloader
 *
 */

import Kernel, { spaces } from './kernel'
import HTML from './HTML'

import logo from './assets/flow.png'

const body = new HTML(document.body)

body.html('<style>* { box-sizing: border-box }</style>')
body.style({
  margin: '0',
  width: '100vw',
  height: '100vh',
  overflow: 'hidden'
})

const boot = new HTML('div').styleJs({
  display: 'flex',
  flexDirection: 'column',
  height: '100%',
  width: '100%',
  background: '#11111b',
  padding: '100px',
  'font-family': 'monospace',
  userSelect: 'none',
  overflow: 'hidden'
}).appendTo(body)

boot.appendMany(
  new HTML('div')
    .styleJs({
      display: 'flex',
      height: '40px',
      alignItems: 'center',
      gap: '10px'
    })
    .appendMany(
      new HTML('img').attr({
        src: logo,
        height: '40px'
      }),
      new HTML('h1').text('FlowOS').styleJs({
        color: 'white'
      })
    ),
  new HTML('img').attr({
    src: logo
  }).styleJs({
    position: 'absolute',
    right: '-8vw',
    top: '-7vw',
    opacity: '0.03',
    height: '50vw',
    'pointer-events': 'none',
    zIndex: '0'
  })
)

const terminal = new HTML('div').style({
  color: '#89b4fa',
  padding: '10px 3px',
  'word-break': 'break-all',
  'white-space': 'pre-wrap',
  flex: '1',
  'user-select': 'text',
  position: 'relative',
  zIndex: '2'
}).appendTo(boot)

const progress = new HTML('div').style({
  width: '0',
  background: '#89b4fa',
  transition: 'width 0.5s cubic-bezier(1,0,0,1)',
  height: '5px'
})
new HTML('div').style({
  height: '5px',
  width: '100%',
  background: '#181825'
}).appendTo(boot)
  .append(progress)

const write = (content: string): void => {
  terminal.text(terminal.getText() + content)
}

const writeln = (content = ''): void => {
  write(`${content}\n`)
}

const originalConsoleLog = console.log
const originalConsoleError = console.error
const originalConsoleWarn = console.warn
const originalConsoleGroup = console.group
window.console.log = (...args: any) => {
  originalConsoleLog(...args)
  writeln(args)
}
window.console.warn = (...args: any) => {
  originalConsoleWarn(...args)
  writeln(args)
}
window.console.error = (...args: any) => {
  originalConsoleError(...args)
  writeln(args)
}
window.console.group = (...args: any) => {
  originalConsoleGroup(...args)
  writeln(spaces + String(args))
}

try {
  const args = new URLSearchParams(window.location.search)
  const kernel = new Kernel()
  writeln('---------------------------------------------')
  writeln('FlowOS is now discontinued. Starting in 5s...')
  writeln('FlowOS is now discontinued. Starting in 5s...')
  writeln('FlowOS is now discontinued. Starting in 5s...')
  writeln('FlowOS is now discontinued. Starting in 5s...')
  writeln('FlowOS is now discontinued. Starting in 5s...')
  writeln('FlowOS is now discontinued. Starting in 5s...')
  writeln('---------------------------------------------')
  setTimeout(() => {
    await kernel.boot(boot, progress, args)
  }, 5000)
} catch (e) {
  writeln()
  writeln('An error occured while booting FlowOS.')
  writeln('Please report this error to Flow Works.')
  writeln()
  console.error(e.stack)
  writeln()
  terminal.html(terminal.getHTML() + '<a href="#" onclick="indexedDB.deleteDatabase(`virtualfs`);window.location.reload()">Would you like to reset the VirtualFS?</a>')
}