import {useEffect, useState} from 'react'
import PropTypes from 'prop-types'
import Link from 'next/link'

import {
  Toolbar,
  Typography,
  AppBar,
  CssBaseline,
  Drawer,
  Hidden,
  IconButton,
  Box
} from '@mui/material'

import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace'

import MenuIcon from '@mui/icons-material/Menu'

import {useTheme, styled} from '@mui/material/styles'

import DrawerBar from './drawer-bar'
import DenyeTeks from './denye-teks'
import VweKouteAchte from './vwe-koute-achte'
import Teks from './teks'

const PREFIX = 'teks-drawer'

const classes = {
  root: `${PREFIX}-root`,
  drawer: `${PREFIX}-drawer`,
  appBar: `${PREFIX}-appBar`,
  menuButton: `${PREFIX}-menuButton`,
  toolbar: `${PREFIX}-toolbar`,
  drawerPaper: `${PREFIX}-drawerPaper`,
  content: `${PREFIX}-content`,
  list: `${PREFIX}-list`,
  form: `${PREFIX}-form`,
  gridText: `${PREFIX}-gridText`,
  grid: `${PREFIX}-grid`,
  koute: `${PREFIX}-koute`,
  vwe: `${PREFIX}-vwe`
}

const Root = styled('div')((
  {
    theme
  }
) => ({
  [`&.${classes.root}`]: {
    display: 'flex'
  },

  [`& .${classes.drawer}`]: {
    marginTop: '10em',
    [theme.breakpoints.up('sm')]: {
      width: drawerWidth,
      flexShrink: 0
    }
  },

  [`& .${classes.appBar}`]: {
    borderTop: '2px solid #303030',
    marginTop: '3rem',
    [theme.breakpoints.up('sm')]: {
      width: `calc(100% - ${drawerWidth}px)`,
      marginLeft: drawerWidth
    },
    zIndex: 1
  },

  [`& .${classes.menuButton}`]: {
    [theme.breakpoints.up('sm')]: {
      display: 'none'
    }
  },

  [`& .${classes.toolbar}`]: theme.mixins.toolbar,

  [`& .${classes.drawerPaper}`]: {
    borderTop: '2px solid #303030',
    marginTop: '3rem',
    width: drawerWidth
  },

  [`& .${classes.content}`]: {
    flexGrow: 1,
    padding: theme.spacing(1)
  },

  [`& .${classes.list}`]: {
    marginBottom: '6em'
  },

  [`& .${classes.form}`]: {
    marginLeft: theme.spacing(1)
  },

  [`& .${classes.koute}`]: {
    position: 'absolute',
    right: '40px',
    top: '8px',
    [theme.breakpoints.up('sm')]: {
      top: '10px'
    }
  },

  [`& .${classes.vwe}`]: {
    position: 'absolute',
    right: '90px',
    top: '8px',
    [theme.breakpoints.up('sm')]: {
      top: '10px'
    }
  }
}))

const drawerWidth = 240

export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) {
  const theme = useTheme()
  const [esMobilOuve, meteEsMobilOuve] = useState(false)
  const [open, setOpen] = useState(false)
  const [error, setError] = useState('')
  const [success, setSuccess] = useState('')

  const handleClose = (event, reason) => {
    if (reason === 'clickaway') {
      return
    }

    setOpen(false)
    setSuccess('')
    setError('')
  }

  const handleDrawerToggle = () => {
    meteEsMobilOuve(!esMobilOuve)
  }

  const container = typeof window === 'undefined' ? undefined : () => window.document.body

  useEffect(() => {
    if (error || success) {
      setOpen(true)
    }
  }, [error, success, setOpen])

  return (
    <Root className={classes.root}>
      <CssBaseline />
      <AppBar position='fixed' className={classes.appBar}>
        <Toolbar>
          <IconButton
            color='inherit'
            aria-label='open drawer'
            edge='start'
            className={classes.menuButton}
            size='large'
            onClick={handleDrawerToggle}
          >
            <MenuIcon />
          </IconButton>
          {anTeks ? (
            <>
              <Link passHref href='/paroles'>
                <IconButton aria-label='return' size='medium'>
                  <KeyboardBackspaceIcon style={{fontSize: '1.5em'}} />
                </IconButton>
              </Link>
              {anTeks.lyen && anTeks.lyen.length > 0 && (
                <div className={classes.vwe}>
                  <VweKouteAchte niVideyo anTeks={anTeks} />
                </div>
              )}
              {anTeks.kouteyAchtey && anTeks.kouteyAchtey.length > 0 && (
                <div className={classes.koute}>
                  <VweKouteAchte niOdyo anTeks={anTeks} />
                </div>
              )}
            </>
          ) : (
            <Typography noWrap variant='h6'>
              Derniers textes
            </Typography>
          )}
        </Toolbar>
      </AppBar>
      <nav className={classes.drawer} aria-label='mailbox folders'>
        <Hidden smUp implementation='css'>
          <Drawer
            container={container}
            variant='temporary'
            anchor={theme.direction === 'rtl' ? 'right' : 'left'}
            open={esMobilOuve}
            classes={{
              paper: classes.drawerPaper
            }}
            ModalProps={{
              keepMounted: true
            }}
            onClose={handleDrawerToggle}
          >
            <DrawerBar meteEsMobilOuve={meteEsMobilOuve} teks={teks} anTeks={anTeks} />
          </Drawer>
        </Hidden>
        <Hidden smDown implementation='css'>
          <Drawer
            open
            classes={{
              paper: classes.drawerPaper
            }}
            variant='permanent'
          >
            <DrawerBar teks={teks} anTeks={anTeks} />
          </Drawer>
        </Hidden>
      </nav>
      <main className={classes.content}>
        {anTeks ? (
          <Teks
            anTeks={anTeks}
            komante={komante}
            open={open}
            success={success}
            error={error}
            setSuccess={setSuccess}
            setError={setError}
            handleClose={handleClose}
          />
        ) : (
          <Box sx={{marginTop: '5em'}}>
            <DenyeTeks {...denyeTeks} />
          </Box>
        )}
      </main>
    </Root>
  )
}

TeksDrawer.propTypes = {
  teks: PropTypes.array.isRequired,
  anTeks: PropTypes.object,
  komante: PropTypes.array,
  denyeTeks: PropTypes.array
}

TeksDrawer.defaultProps = {
  anTeks: null,
  komante: null,
  denyeTeks: null
}