import { Hype } from '@because/hype'
import { define, stylesToCSS } from '@because/forge'

const app = new Hype()

const Body = define('ClockBody', {
  base: 'body',
  margin: 0,
  padding: 0,
  overflow: 'hidden',
})

const Container = define('ClockContainer', {
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  height: '100vh',
  width: '100vw',
  background: '#000',
})

const Clock = define('Clock', {
  fontFamily: "'DS-Digital', monospace",
  fontSize: '12vw',
  fontWeight: 'normal',
  color: '#0f0',
  textShadow: '0 0 2px rgba(0, 255, 0, 0.45)',
  letterSpacing: '0.05em',
  userSelect: 'none',
})

const clockScript = `
  function updateClock() {
    const now = new Date();
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');
    document.getElementById('clock').textContent = hours + ':' + minutes + ':' + seconds;
  }

  updateClock();
  setInterval(updateClock, 1000);
`
app.get('/styles.css', c => c.text(stylesToCSS(), 200, {
  'Content-Type': 'text/css; charset=utf-8',
}))

app.get('/ok', c => c.text('ok'))

app.get('/', c => c.html(
  <html>
    <head>
      <title>Clock</title>
      <style dangerouslySetInnerHTML={{
        __html: `
        @font-face {
          font-family: 'DS-Digital';
          src: url('/digital.ttf') format('truetype');
          font-weight: normal;
          font-style: normal;
        }
      `}} />
      <link rel="stylesheet" href="/styles.css" />
    </head>
    <Body>
      <Container>
        <Clock id="clock">00:00:00</Clock>
      </Container>
      <script dangerouslySetInnerHTML={{ __html: clockScript }} />
    </Body>
  </html >
))

export default app.defaults
