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

import {
  Grid,
  Toolbar,
  Typography,
  AppBar,
  CssBaseline,
  Drawer,
  Hidden,
  IconButton
} from '@material-ui/core'

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

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

import {makeStyles, useTheme} from '@material-ui/core/styles'

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

const drawerWidth = 240

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex'
  },
  drawer: {
    marginTop: '10em',
    [theme.breakpoints.up('sm')]: {
      width: drawerWidth,
      flexShrink: 0
    }
  },
  appBar: {
    borderTop: '2px solid #303030',
    marginTop: '4.71rem',
    [theme.breakpoints.up('sm')]: {
      width: `calc(100% - ${drawerWidth}px)`,
      marginLeft: drawerWidth
    }
  },
  menuButton: {
    [theme.breakpoints.up('sm')]: {
      display: 'none'
    }
  },
  toolbar: theme.mixins.toolbar,
  drawerPaper: {
    borderTop: '2px solid #303030',
    marginTop: '4.71rem',
    width: drawerWidth
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing(3)
  },
  list: {
    marginBottom: '6em'
  },
  form: {
    marginLeft: theme.spacing(1)
  },
  text: {
    marginBottom: '0.5em'
  },
  gridText: {
    border: '1px dashed grey',
    borderRadius: '5px',
    marginTop: '2em',
    marginInline: '2px'
  },
  grid: {
    marginTop: '1em'
  },
  koute: {
    position: 'absolute',
    right: '1px',
    top: '8px',
    [theme.breakpoints.up('sm')]: {
      top: '10px'
    }
  },
  vwe: {
    position: 'absolute',
    right: '60px',
    top: '8px',
    [theme.breakpoints.up('sm')]: {
      top: '10px'
    }
  }
}))

const formatJsonString = stringToFormat => {
  return stringToFormat.split('\n').map((string, index) => <div key={index}>{`${string}`}<br /></div>) // eslint-disable-line react/no-array-index-key
}

export default function TeksDrawer({teks, anTeks}) {
  const classes = useStyles()
  const theme = useTheme()
  const [mobileOpen, setMobileOpen] = useState(false)

  const handleDrawerToggle = () => {
    setMobileOpen(!mobileOpen)
  }

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

  return (
    <div className={classes.root}>
      <CssBaseline />
      <AppBar position='fixed' className={classes.appBar}>
        <Toolbar>
          <IconButton
            color='inherit'
            aria-label='open drawer'
            edge='start'
            className={classes.menuButton}
            onClick={handleDrawerToggle}
          >
            <MenuIcon />
          </IconButton>
          {anTeks ? (
            <>
              <Link href='/teks'>
                <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'>
              Dènyé Tèks
            </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={mobileOpen}
            classes={{
              paper: classes.drawerPaper
            }}
            ModalProps={{
              keepMounted: true
            }}
            onClose={handleDrawerToggle}
          >
            <DrawerBar setMobileOpen={setMobileOpen} teks={teks} anTeks={anTeks} />
          </Drawer>
        </Hidden>
        <Hidden xsDown implementation='css'>
          <Drawer
            open
            classes={{
              paper: classes.drawerPaper
            }}
            variant='permanent'
          >
            <DrawerBar teks={teks} anTeks={anTeks} />
          </Drawer>
        </Hidden>
      </nav>
      <main className={classes.content}>
        {anTeks ? (
          <>
            <Typography noWrap align='center' style={{marginTop: '2em'}} variant='h6'>
              {anTeks.tit}
            </Typography>
            <Grid container className={classes.grid} spacing={3}>
              <Grid item md className={classes.gridText}>
                <Typography align='center' className={classes.text} variant='h4'>
                  Transcription
                </Typography>
                <Typography paragraph align='justify' component='span'>
                  {formatJsonString(anTeks.transkripsyon)}
                </Typography>
              </Grid>
              {anTeks.tradiksyon && (
                <Grid item md className={classes.gridText}>
                  <Typography align='center' className={classes.text} variant='h4'>
                    Traduction
                  </Typography>
                  <Typography paragraph align='justify' component='span'>
                    {formatJsonString(anTeks.tradiksyon.francais)}
                  </Typography>
                </Grid>
              )}
            </Grid>
          </>
        ) : (
          <DenyeTeks {...teks} />
        )}
      </main>
    </div>
  )
}

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

TeksDrawer.defaultProps = {
  anTeks: null
}