import {
  Box,
  IconButton,
  makeStyles,
  Typography,
  useMediaQuery,
  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 useMobileStyles = makeStyles((theme) => ({
  footer: {
    background: theme.footer.background,
    padding: '0.3rem',
    paddingTop: '0.6rem',
  },
  contactText: {
    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 useDesktopStyles = makeStyles((theme) => ({
  footer: {
    padding: '0.4rem',
  },
  devteam: {
    fontSize: '1.8rem',
    paddingLeft: '0.6rem',
  },
  schdesignButton: {
    paddingTop: '0.5rem',
  },
  contact: {
    paddingRight: '2rem',
  },
  social: {
    fontSize: '1.5rem',
    margin: '0',
    marginRight: '0.3rem',
    marginTop: '0.2rem',
    marginBottom: '0.2rem',
  },
  socialText: {
    color: theme.palette.secondary.main,
  },
}));

const Footer: React.FC = () => {
  const mClasses = useMobileStyles();
  const dClasses = useDesktopStyles();
  const theme = useTheme();

  const isSmallScreen = useMediaQuery(theme.breakpoints.down('xs'));

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

  const LargeScreen: React.FC = () => (
    <Box display="flex" justifyContent="space-between">
      <Box
        display="flex"
        justifyContent="space-around"
        alignItems="center"
        className={mClasses.groups}
      >
        <IconButton
          className={mClasses.groupButton}
          onClick={(): void => {
            window.open('https://kszk.bme.hu/');
          }}
        >
          <Box display="flex" justifyContent="center" alignItems="center">
            <DevTeamIcon width="36px" height="36px" />
            <Typography className={`${mClasses.devteam} ${dClasses.devteam}`}>DevTeam</Typography>
          </Box>
        </IconButton>
        <IconButton
          className={`${mClasses.groupButton} ${dClasses.schdesignButton}`}
          onClick={(): void => {
            window.open('https://schdesign.hu/');
          }}
        >
          <SchdesignIcon width="140px" height="50px" color1={theme.palette.primary.contrastText} />
        </IconButton>
      </Box>
      <Box
        display="flex"
        flexDirection="column"
        alignItems="flex-start"
        className={dClasses.contact}
      >
        <Typography align="center" className={mClasses.contactText}>
          Kapcsolat
        </Typography>
        <Box display="flex" flexDirection="column" alignItems="flex-start">
          <IconButton
            className={mClasses.socialButton}
            onClick={(): void => {
              window.open('https://www.facebook.com/groups/schbody/');
            }}
          >
            <Box display="flex" alignItems="center" justifyContent="center">
              <FacebookIcon className={`${mClasses.social} ${dClasses.social}`} />
              <Typography className={dClasses.socialText}>Facebook</Typography>
            </Box>
          </IconButton>

          <IconButton
            className={mClasses.socialButton}
            onClick={(): void => {
              window.location.href = 'mailto:body@sch.bme.hu';
            }}
          >
            <MailIcon className={`${mClasses.social} ${dClasses.social}`} />
            <Typography className={dClasses.socialText}>body@sch.bme.hu</Typography>
          </IconButton>
        </Box>
      </Box>
    </Box>
  );

  return (
    <Box component="footer" className={`${mClasses.footer} ${!isSmallScreen && dClasses.footer}`}>
      {isSmallScreen ? <SmallScreen /> : <LargeScreen />}
    </Box>
  );
};

export default Footer;