import { Terminal } from '@xterm/xterm'
import { FitAddon } from '@xterm/addon-fit'

import { Github } from 'xterm-theme'

const term = new Terminal({
    theme: Github,
})

const fitAddon = new FitAddon()
term.loadAddon(fitAddon)

console.log('Starting terminal...')
term.loadAddon(fitAddon)
term.open(document.getElementById('terminal'))

fitAddon.fit()

const ws = new WebSocket(`ws://${location.host}/api/docker/alpine:latest/pty`)

term.onData(data => {
    ws.send(data)
})

let id

ws.addEventListener('message', e => {
    const event = JSON.parse(e.data)
    console.log(event)

    if (event.type === 'pty') {
        term.write(event.data)
    } else if (event.type === 'created') {
        id = event.id
    }
})

ws.addEventListener('open', () => {
    term.write('Connected to backend container\r\n')
})

ws.addEventListener('close', () => {
    term.write('\r\nDisconnected from backend container')
})

// setInterval(async () => {
//     const req = await fetch(`/api/container/${id}/exec/ls/`)
//     const files = await req.json()

//     console.log(files)
// }, 1000)