import React, { useEffect } from 'react'
import { styles as typescaleStyles } from '@material/web/typography/md-typescale-styles.js'

import PollsScreen from '../screens/PollsScreen'
import Scaffold from '../components/Scaffold'
import NavigationBar from '../components/NavigationBar'

import './MainActivity.css'

const bottomBar = (
    <NavigationBar />
)

const floatingActionButton = (
    <md-fab id="create-poll-button" label="Создать опрос">
        <md-icon slot="icon">add</md-icon>
    </md-fab>
)

const content = (
    <PollsScreen />
)

export default function MainActivity() {
    useEffect(() => {
        document.adoptedStyleSheets = [typescaleStyles.styleSheet]
    }, [])

    return (
        <Scaffold
            bottomBar={bottomBar}
            floatingActionButton={floatingActionButton}
            content={content} />
    )
}