import PersonIcon from '@mui/icons-material/Person'
import { Box, IconButton, styled, Theme } from '@mui/material'
import PersonAddIcon from '@mui/icons-material/PersonAdd'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { useHistory } from 'react-router-dom'

interface SponsorGuestButtonsProps {
  yourGuestsActive?: boolean
  registerNewGuestActive?: boolean
}

const StyledIconButton = styled(IconButton)({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  fontSize: '22px',
})

export default function SponsorGuestButtons(props: SponsorGuestButtonsProps) {
  const { yourGuestsActive, registerNewGuestActive } = props
  const { t } = useTranslation(['common'])
  const history = useHistory()

  const goToOverview = () => {
    history.push('/sponsor')
  }

  const goToRegister = () => {
    history.push('/register')
  }

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-evenly',
        marginBottom: '2rem',
        fontSize: '22px',
      }}
    >
      <StyledIconButton
        onClick={goToOverview}
        sx={{
          color: () => (yourGuestsActive ? 'black' : undefined),
          textDecorationLine: () => (yourGuestsActive ? 'underline' : ''),
        }}
      >
        <PersonIcon
          sx={{
            fontSize: '80px',
            borderRadius: '4rem',
            borderStyle: 'solid',
            borderColor: (theme: Theme) =>
              yourGuestsActive
                ? theme.palette.secondary.main
                : theme.greg.deactivatedColor,
            fill: 'white',
            backgroundColor: (theme: Theme) =>
              yourGuestsActive
                ? theme.palette.secondary.main
                : theme.greg.deactivatedColor,
          }}
        />
        {t('yourGuests')}
      </StyledIconButton>

      <StyledIconButton
        onClick={goToRegister}
        sx={{
          color: () => (registerNewGuestActive ? 'black' : undefined),
          textDecorationLine: () => (registerNewGuestActive ? 'underline' : ''),
        }}
      >
        <PersonAddIcon
          sx={{
            fontSize: '80px',
            borderRadius: '4rem',
            borderStyle: 'solid',
            borderColor: (theme: Theme) =>
              registerNewGuestActive
                ? theme.palette.secondary.main
                : theme.greg.deactivatedColor,
            fill: 'white',
            backgroundColor: (theme: Theme) =>
              registerNewGuestActive
                ? theme.palette.secondary.main
                : theme.greg.deactivatedColor,
          }}
        />
        {t('registerNewGuest')}
      </StyledIconButton>
    </Box>
  )
}

SponsorGuestButtons.defaultProps = {
  yourGuestsActive: false,
  registerNewGuestActive: false,
}