import type { ReactElement } from 'react'
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
import Button from '@material-ui/core/Button'
import IconButton from '@material-ui/core/IconButton'
import { X, Check, CornerUpLeft, ArrowRight } from 'react-feather'
import Typography from '@material-ui/core/Typography'
import Paper from '@material-ui/core/Paper'
import Link from '@material-ui/core/Link'
import { useNavigate } from 'react-router-dom'
import * as ROUTES from '../Routes'

import Layout from './Layout'
import Header from './Header'
import Footer from './Footer'

import text from '../translations'

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100%',
      minHeight: '100vh',
      zIndex: 1000,
      backgroundColor: theme.palette.background.default,
    },
    button: {
      width: '100%',
      display: 'flex',
      justifyContent: 'space-between',
    },
    ul: {
      display: 'grid',
      gridAutoRows: 'auto',
      gridTemplateColumns: '1rem 1fr',
      gridTemplateRows: 'min-content',
      paddingTop: theme.spacing(3),
      paddingBottom: theme.spacing(3),
      rowGap: theme.spacing(1),
      columnGap: theme.spacing(2),
      textAlign: 'left',
    },
    paper: {
      padding: theme.spacing(3),
    },
  }),
)

interface Props {
  handleAgree: () => void
}

export default function TermsAndConditionsPopup({ handleAgree }: Props): ReactElement | null {
  const classes = useStyles()
  const navigate = useNavigate()

  return (
    <Layout
      top={[
        <Header
          key="top1"
          rightAction={
            <IconButton onClick={() => navigate(ROUTES.LANDING_PAGE)}>
              <X strokeWidth={1} />
            </IconButton>
          }
        >
          {text.termsAndConditions.header}
        </Header>,
        <Typography key="top2" variant="subtitle1">
          {text.termsAndConditions.tagline1}{' '}
          <Link href={ROUTES.TERMS_AND_CONDITIONS} color="inherit" underline="always" target="blank">
            {text.termsAndConditions.termsAndConditions}
          </Link>{' '}
          {text.termsAndConditions.tagline2}
        </Typography>,
      ]}
      center={[
        <div key="center">
          <Paper square elevation={0} className={classes.paper}>
            <div className={classes.ul}>
              {text.termsAndConditions.featuresAndLimitations.map(t => [
                <Typography key={`${t}-bee`} variant="body1">
                  <ArrowRight strokeWidth={1} />
                </Typography>,
                <Typography key={`${t}-text`} variant="body1">
                  {t}
                </Typography>,
              ])}
            </div>
            <Typography variant="body2">
              {text.termsAndConditions.disclaimer1}{' '}
              <Link href={ROUTES.TERMS_AND_CONDITIONS} color="inherit" underline="always" target="blank">
                {text.termsAndConditions.disclaimer2}
              </Link>
            </Typography>
          </Paper>
          <Button
            variant="contained"
            className={classes.button}
            size="small"
            style={{ marginTop: 2, paddingLeft: 16, paddingRight: 16 }}
            onClick={() => navigate(ROUTES.LANDING_PAGE)}
          >
            <CornerUpLeft strokeWidth={1} />
            {text.accessPage.backAction}
            <CornerUpLeft style={{ opacity: 0 }} />
          </Button>
        </div>,
      ]}
      bottom={[
        <div key="bottom1" style={{ zIndex: 1000 }}>
          <Footer>
            <Button variant="contained" className={classes.button} size="large" onClick={handleAgree}>
              <Check strokeWidth={1} />
              {text.termsAndConditions.agreeAction}
              <Check style={{ opacity: 0 }} />
            </Button>
          </Footer>
        </div>,
      ]}
    />
  )
}