import { Button, Card, Descriptions, Tag } from 'antd'

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 (
    <main className="hello">
      <Card
        className="panel"
        title="Hello, {{appName}}"
        extra={<Tag color="blue">Ant Design + react-router</Tag>}
      >
        <Descriptions column={1} bordered size="small">
          {items.map((item) => (
            <Descriptions.Item key={item.label} label={item.label}>
              {String(item.value)}
            </Descriptions.Item>
          ))}
        </Descriptions>

        <div className="actions">
          <Button
            type="primary"
            onClick={() =>
              bridge.window?.open({
                url: baseUrl() + '#/sub',
                width: 720,
                height: 520,
                title: '{{appName}} Sub Window'
              })
            }
          >
            Open Sub Window
          </Button>
          <Button
            onClick={() =>
              bridge.window?.openModal({
                url: baseUrl() + '#/sub',
                width: 520,
                height: 420,
                title: '{{appName}} Modal'
              })
            }
          >
            Open Modal
          </Button>
          <Button onClick={() => bridge.window?.close()}>Close Current Window</Button>
        </div>
      </Card>
    </main>
  )
}