import { Box, Button, Link as LinkMui } from '@mui/material'
import { Link } from 'react-router-dom'
import styles from './style.module.scss'
import { Container } from '../Container'
import nostrImage from '../../assets/images/nostr.gif'
import { appPublicRoutes } from '../../routes'
import { createPortal } from 'react-dom'

export const Footer = () =>
  createPortal(
    <footer className={`${styles.borderTop} ${styles.footer}`}>
      <Container
        style={{
          paddingBlock: '50px'
        }}
      >
        <Box
          display={'grid'}
          sx={{
            gridTemplateColumns: {
              xs: '1fr',
              md: '0.5fr 2fr 0.5fr'
            },
            alignItems: {
              xs: 'center',
              md: 'start'
            }
          }}
          gap={'50px'}
        >
          <LinkMui
            sx={{
              justifySelf: {
                xs: 'center',
                md: 'start'
              }
            }}
            component={Link}
            to={'/'}
            className={styles.logo}
          >
            <img src="/logo.svg" alt="Logo" />
          </LinkMui>
          <Box
            display={'grid'}
            sx={{
              gap: '15px',
              gridTemplateColumns: {
                xs: '1fr',
                sm: 'repeat(2, 1fr)',
                xl: 'repeat(3, 1fr)'
              },
              borderBlock: {
                xs: 'solid 1px rgba(0, 0, 0, 0.1)',
                md: 'unset'
              },
              paddingY: {
                xs: '10px',
                md: 'unset'
              }
            }}
            component={'nav'}
            className={styles.nav}
          >
            <Button
              sx={{
                justifyContent: 'center'
              }}
              component={Link}
              to={'/'}
              variant={'text'}
            >
              Home
            </Button>
            <Button
              sx={{
                justifyContent: 'center'
              }}
              component={LinkMui}
              href={appPublicRoutes.docs}
              target="_blank"
              variant={'text'}
            >
              Documentation
            </Button>
            <Button
              sx={{
                justifyContent: 'center'
              }}
              component={LinkMui}
              href={appPublicRoutes.source}
              target="_blank"
              variant={'text'}
            >
              Source
            </Button>
          </Box>
          <Box
            className={styles.links}
            sx={{
              justifySelf: {
                xs: 'center',
                md: 'end'
              }
            }}
          >
            <Button
              component={LinkMui}
              href="https://snort.social/npub1yay8e9sqk94jfgdlkpgeelj2t5ddsj2eu0xwt4kh4xw5ses2rauqnstrdv"
              target="_blank"
              sx={{
                minWidth: '45px',
                padding: '10px'
              }}
              variant={'contained'}
            >
              <img src={nostrImage} width="25" alt="nostr logo" height="25" />
            </Button>
          </Box>
        </Box>
      </Container>
      <div className={`${styles.borderTop} ${styles.credits}`}>
        Built by&nbsp;
        <a href="https://nostrdev.com/" target="_blank">
          Nostr Dev
        </a>{' '}
        2024.
      </div>
    </footer>,
    document.getElementById('root')!
  )