import { Badge, Button, Card, Group, Stack, Text } from '@mantine/core'

const bridge = window.{{bridgeGlobal}} || {}

function baseUrl() {
  return location.origin + location.pathname
}

const items = [
  { label: 'Electron', value: bridge.version },
  { label: 'Chromium', value: bridge.chrome },
  { label: 'Node', value: bridge.node },
  { label: 'Platform', value: bridge.platform }
]

export default function Home() {
  return (
    <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 40 }}>
      <Card withBorder radius="md" shadow="md" style={{ width: 420, padding: 24 }}>
        <Group justify="space-between" mb="md">
          <Text fw={700} size="lg">
            Hello, {{appName}}
          </Text>
          <Badge color="blue" variant="light">
            Mantine + react-router
          </Badge>
        </Group>

        <Stack gap="sm">
          {items.map((item) => (
            <Group key={item.label} justify="space-between">
              <Text size="sm" c="dimmed">
                {item.label}
              </Text>
              <Text size="sm" ff="monospace">
                {String(item.value)}
              </Text>
            </Group>
          ))}
        </Stack>

        <Group mt="md">
          <Button
            color="blue"
            onClick={() =>
              bridge.window?.open({
                url: baseUrl() + '#/sub',
                width: 720,
                height: 520,
                title: '{{appName}} Sub Window'
              })
            }
          >
            Open Sub Window
          </Button>
          <Button
            variant="outline"
            onClick={() =>
              bridge.window?.openModal({
                url: baseUrl() + '#/sub',
                width: 520,
                height: 420,
                title: '{{appName}} Modal'
              })
            }
          >
            Open Modal
          </Button>
          <Button variant="outline" onClick={() => bridge.window?.close()}>
            Close Current Window
          </Button>
        </Group>
      </Card>
    </div>
  )
}