import { useTranslation } from 'react-i18next'
import { styled } from '@mui/material/styles'
import { Link } from '@mui/material'

import {
  responsibleOrganization,
  responsibleOrganizationLink,
  ITRulesLink,
  privacyPolicyLink,
  helpLink,
  documentationLink,
} from 'appConfig'

import { getFooterLogo } from './logos'

const FooterWrapper = styled('footer')({
  height: 'fit-content',
  padding: '0',
  marginTop: 'auto',
})

const InfoSection = styled('div')(({ theme }) => ({
  display: 'flex',
  flexDirection: 'column',
  background: theme.greg.footerLinkBgColor,
  padding: '2rem 2rem 4rem 2rem',
}))

const FooterHeader = styled('div')({
  fontSize: '2rem',
  color: 'white',
  padding: '1rem 0 2rem 0',
})

const LinkContainer = styled('div')({
  display: 'flex',
  justifyContent: 'space-between',
})

const LinkSection = styled('div')({
  display: 'flex',
  flexDirection: 'column',
  color: 'white',
  fontSize: '1rem',
})

const LinkHeader = styled('div')({
  fontSize: '0.8rem',
  marginBottom: '0.5rem',
})

const LogoSection = styled('div')(({ theme }) => ({
  background: theme.palette.primary.main,
  fontSize: '1.5rem',
  color: theme.palette.primary.main,
  display: 'flex',
  justifyContent: 'space-between',
  padding: '1rem 0 1rem 2rem',
}))

const StyledLink = styled(Link)({
  color: 'white',
})

StyledLink.defaultProps = {
  underline: 'hover',
}

const LogoContainer = styled('div')({})

function Footer() {
  const { t } = useTranslation(['common', 'footer'])
  return (
    <FooterWrapper>
      <InfoSection>
        <FooterHeader>{t('footer:applicationTitle')}</FooterHeader>

        <LinkContainer>
          <LinkSection>
            <LinkHeader>{t('footer:link.terms.header')}</LinkHeader>
            <StyledLink href={ITRulesLink}>
              {t('footer:link.terms.ITRules')}
            </StyledLink>
            <StyledLink href={privacyPolicyLink}>
              {t('footer:link.terms.privacy')}
            </StyledLink>
          </LinkSection>

          <LinkSection>
            <LinkHeader>{t('footer:link.help.header')}</LinkHeader>
            <StyledLink href={helpLink}>
              {t('footer:link.help.contact')}
            </StyledLink>
            <StyledLink href={documentationLink}>
              {t('footer:link.help.doc')}
            </StyledLink>
          </LinkSection>

          <LinkSection>
            <LinkHeader>
              {t('footer:link.responsibleOrganization.header')}
            </LinkHeader>
            <StyledLink href={responsibleOrganizationLink}>
              {responsibleOrganization}
            </StyledLink>
          </LinkSection>
        </LinkContainer>
      </InfoSection>
      <LogoSection>
        <LogoContainer>{getFooterLogo()}</LogoContainer>
      </LogoSection>
    </FooterWrapper>
  )
}

export default Footer