<reponame>adamdubey/venue-webapp
import React from 'react';
import { Drawer, List, ListItem } from '@material-ui/core';
import { scroller } from 'react-scroll';

const SideDrawer = (props) => {
    const links = [
        { where: 'featured', value: 'To top'},
        { where: 'venueinfo', value: 'Venue Info' },
        { where: 'highlights', value: 'Highlights' },
        { where: 'pricing', value: 'Pricing' },
        { where: 'location', value: 'Location' }
    ]

    const scrollToElement = (element) => {
        scroller.scrollTo(element, {
            duration: 1500,
            delay: 100,
            smooth: true,
            offset: -150
        });
        props.onClose(false)
    }

    const renderItem = (item) => (
            <ListItem button onClick={() => scrollToElement(item.where)} key={item.where}>
                {item.value}
            </ListItem>
    )

    return (
        <Drawer
            anchor="right"
            open={props.open}
            onClose={()=> props.onClose(false)}
        >
            <List component="nav">
                { links.map((item) => renderItem(item) ) }
            </List>
        </Drawer>

    )
}

export default SideDrawer;
