import { Box, IconButton, makeStyles, Typography, useTheme } from '@material-ui/core';
import FacebookIcon from '@material-ui/icons/Facebook';
import MailIcon from '@material-ui/icons/Mail';
import React from 'react';
import DevTeamIcon from './svg/DevTeamIcon';
import SchdesignIcon from './svg/SchdesignIcon';

const useStyles = makeStyles((theme) => ({
  footer: {
    background: theme.footer.background,
    padding: '0.3rem',
    paddingTop: '0.6rem',
  },
  contact: {
    color: theme.palette.primary.contrastText,
    fontSize: '1.7rem',
    fontWeight: 500,
    marginBottom: '0.3rem',
    marginTop: '0.3rem',
  },
  social: {
    color: theme.palette.secondary.main,
    marginLeft: '1rem',
    marginRight: '1rem',
    marginBottom: '0.3rem',
    marginTop: '0.5rem',
    fontSize: '2rem',
  },
  socialButton: {
    margin: 0,
    padding: 0,
  },
  devteam: {
    color: '#3051bf',
    fontSize: '1.4rem',
    paddingLeft: '0.3rem',
    fontWeight: 500,
  },
  schdesign: {
    paddingTop: '0.4rem',
  },
  groups: {
    marginTop: '0.7rem',
    marginBottom: '0.3rem',
  },
  groupButton: {
    paddingTop: '0.1rem',
    paddingBottom: '0.1rem',
  },
}));

const Footer: React.FC = () => {
  const classes = useStyles();
  const theme = useTheme();

  const SmallScreen: React.FC = () => (
    <Box display="flex" justifyContent="center" flexDirection="column">
      <Typography align="center" className={classes.contact}>
        Kapcsolat
      </Typography>
      <Box display="flex" justifyContent="center">
        <IconButton
          className={classes.socialButton}
          onClick={(): void => {
            window.open('https://www.facebook.com/groups/schbody/');
          }}
        >
          <FacebookIcon className={classes.social} />
        </IconButton>
        <IconButton
          className={classes.socialButton}
          onClick={(): void => {
            window.location.href = 'mailto:body@sch.bme.hu';
          }}
        >
          <MailIcon className={classes.social} />
        </IconButton>
      </Box>
      <Box display="flex" justifyContent="space-around" className={classes.groups}>
        <IconButton
          className={classes.groupButton}
          onClick={(): void => {
            window.open('https://kszk.bme.hu/');
          }}
        >
          <Box display="flex" justifyContent="center" alignItems="center">
            <DevTeamIcon width="28px" height="28px" />
            <Typography className={classes.devteam}>DevTeam</Typography>
          </Box>
        </IconButton>
        <IconButton
          className={classes.groupButton}
          onClick={(): void => {
            window.open('https://schdesign.hu/');
          }}
        >
          <SchdesignIcon width="120px" height="35px" color1={theme.palette.primary.contrastText} />
        </IconButton>
      </Box>
    </Box>
  );
  return (
    <Box component="footer" className={classes.footer}>
      <SmallScreen />
    </Box>
  );
};

export default Footer;