import { Box, Button, Card, Chip, Stack, Typography } from '@mui/material'

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 (
    <Box sx={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', p: 5 }}>
      <Card sx={{ width: 420, p: 3 }}>
        <Stack direction="row" justifyContent="space-between" alignItems="center" mb={2}>
          <Typography variant="h6">Hello, {{appName}}</Typography>
          <Chip label="Material UI + react-router" size="small" color="primary" />
        </Stack>

        <Stack spacing={1}>
          {items.map((item) => (
            <Stack key={item.label} direction="row" justifyContent="space-between">
              <Typography variant="body2" color="text.secondary">
                {item.label}
              </Typography>
              <Typography variant="body2" fontFamily="monospace">
                {String(item.value)}
              </Typography>
            </Stack>
          ))}
        </Stack>

        <Stack direction="row" spacing={1} mt={2} flexWrap="wrap" useFlexGap>
          <Button
            variant="contained"
            onClick={() =>
              bridge.window?.open({
                url: baseUrl() + '#/sub',
                width: 720,
                height: 520,
                title: '{{appName}} Sub Window'
              })
            }
          >
            Open Sub Window
          </Button>
          <Button
            variant="outlined"
            onClick={() =>
              bridge.window?.openModal({
                url: baseUrl() + '#/sub',
                width: 520,
                height: 420,
                title: '{{appName}} Modal'
              })
            }
          >
            Open Modal
          </Button>
          <Button variant="outlined" onClick={() => bridge.window?.close()}>
            Close Current Window
          </Button>
        </Stack>
      </Card>
    </Box>
  )
}