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: {
    marginRight: theme.spacing(2),
    [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'
  },
  button: {
    marginRight: '0.5em'
  },
  gridText: {
    border: '1px dashed grey',
    borderRadius: '5px',
    marginTop: '2em',
    marginInline: '2px'
  },
  grid: {
    marginTop: '1em'
  },
  koute: {
    position: 'absolute',
    right: '25px',
    top: '8px',
    [theme.breakpoints.up('sm')]: {
      top: '10px'
    }
  },
  vwe: {
    position: 'absolute',
    right: '90px',
    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({miziks, mizik}) {
  const teks = mizik ? mizik[0] : null
  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>
          {teks ? (
            <>
              <Link href='/teks'>
                <IconButton aria-label='return' className={classes.button} size='small'>
                  <KeyboardBackspaceIcon />
                </IconButton>
              </Link>
              <Typography noWrap variant='h6'>
                {teks.titre}
              </Typography>
              {teks.liens && teks.liens.length > 0 && (
                <div className={classes.vwe}>
                  <VweKouteAchte isVideo teks={teks} />
                </div>
              )}
              {teks.kouteyAchtey && teks.kouteyAchtey.length > 0 && (
                <div className={classes.koute}>
                  <VweKouteAchte isAudio teks={teks} />
                </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} miziks={miziks} mizik={mizik} />
          </Drawer>
        </Hidden>
        <Hidden xsDown implementation='css'>
          <Drawer
            open
            classes={{
              paper: classes.drawerPaper
            }}
            variant='permanent'
          >
            <DrawerBar miziks={miziks} mizik={mizik} />
          </Drawer>
        </Hidden>
      </nav>
      <main className={classes.content}>
        {teks ? (
          <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(teks.transcription)}
              </Typography>
            </Grid>
            {teks.traductions && (
              <Grid item md className={classes.gridText}>
                <Typography align='center' className={classes.text} variant='h4'>
                  Traduction
                </Typography>
                <Typography paragraph align='justify' component='span'>
                  {formatJsonString(teks.traductions.francais)}
                </Typography>
              </Grid>
            )}
          </Grid>
        ) : (
          <DenyeTeks />
        )}
      </main>
    </div>
  )
}

TeksDrawer.propTypes = {
  miziks: PropTypes.array.isRequired,
  mizik: PropTypes.array
}

TeksDrawer.defaultProps = {
  mizik: null
}