import React, { useState } from 'react'
import Typography from '@material-ui/core/Typography'
import Link from '@material-ui/core/Link'
import List from '@material-ui/core/List'
import { ListItemText, Divider } from '@material-ui/core'
import { useStyles } from '../style/FooterStyle'
import { FormattedMessage } from 'react-intl'
import Feedback from './info/Feedback'
import JoinUs from './info/JoinUs'

const Footer = () => {
  const classes = useStyles()
  const [openFeedback, setOpenFeedback] = useState(false)
  const [openJoinUs, setOpenJoinUs] = useState(false)

  const handleClickOpenFeedBack = (e) => {
    e.preventDefault()
    setOpenFeedback(true)
  }

  const handleClickCloseFeedBack = () => {
    setOpenFeedback(false)
  }

  const handleClickOpenJoinUs = (e) => {
    e.preventDefault()
    setOpenJoinUs(true)
  }

  const handleClickCloseJoinUs = () => {
    setOpenJoinUs(false)
  }

  function FooterListElement (props) {
    return (
      <ListItemText className={classes.footerListItemStyle} onClick={props.onClick}>
        <Typography variant="h6" align="left">
          <Link color="textPrimary" href={props.href}>
            <FormattedMessage id={props.idMessage} defaultMessage="Missing String" />
          </Link>
        </Typography>
      </ListItemText>
    )
  }

  return (
    <footer className={classes.footer}>
      <Divider className={classes.dividerStyle} />
      <List className={classes.footerListStyle}>
        <FooterListElement idMessage="footer.feedback" href="#" onClick={handleClickOpenFeedBack} />
        <FooterListElement idMessage="footer.aboutus" href="/#/aboutus" />
        <FooterListElement idMessage="footer.joinus" href="#" onClick={handleClickOpenJoinUs} />
      </List>
      <Feedback open={openFeedback} handleClose={handleClickCloseFeedBack} />
      <JoinUs open={openJoinUs} handleClose={handleClickCloseJoinUs} />

    </footer>
  )
}

export default Footer