import React, { Fragment, useState } from 'react';
import { withStyles } from '@material-ui/core/styles'
import RootContainer from '../atoms/RootContainer'
import Header from '../organisms/Header'
import TextField from '@material-ui/core/TextField';
import IconAdd from '@material-ui/icons/Add';

import { Button } from '@material-ui/core';

const styles = theme => ({
  head: {
    width: '100%',
    height: '64px',
    background: theme.palette.secondary.main,
    position: 'fixed',
    zIndex: '999',
  },
  foot: {
    height: '64px',
    width: '100%',
    position: 'relative',
    boxShadow: '0px 0px 10px rgba(30, 35, 39, 0.10)',
  },
  content: {
    top: '64px',
    height: 'calc(100vh - 64px)',
    position: 'relative',
  },
  filterForm: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: theme.palette.input.main,
    position: 'absolute',
    bottom: 0,
    left: 0,
    width: '100% !important',
  },
  textField: {
    textAlign: 'center',
    justifyContent: 'center',
    margin: 0,
    '& input': {
      fontWeight: '300',
      color: theme.palette.primary.dark,
      backgroundColor: theme.palette.input.main,
      minWidth: '65vw',
      padding: 0,
      margin: 0,
      paddingLeft: theme.spacing(2),
    }
  },
});

const chatSubmit = () => {

}

function LayoutCandidature(props) {

  const { classes, children } = props;
  const [text, setText] = useState("");
  const [displayMessageBar, toggleMessageBar] = useState(false);

  const handleChange = (v) => {
   toggleMessageBar(v)
  }
  const toggleDisplay = (v) => {
    toggleMessageBar(v)
  }
  return (
    <RootContainer>
      <div id="H" className={classes.head}>
        <div className={classes.inner}>
          <Header searchBar={true} />
        </div>
      </div>
      <div id="C" className={classes.content}>
        {
          React.Children.map(props.children, child => {
            return React.cloneElement(child, { toggleMessageBar: handleChange });
          })
        }

      </div>
      {displayMessageBar &&
        (<section id="F" className={classes.foot}>
          <div className={classes.filterForm}>
            <TextField
              id="standard-search"
              name="chattext"
              value={text}
              onChange={(e) => setText(e.target.value)}
              placeholder={"Message"}
              className={classes.textField}
              InputLabelProps={{
                shrink: true,
              }}
              // margin="dense"
              //variant="filled"
              onKeyPress={(ev) => {

                if (ev.key === 'Enter') {
                  // Do code here
                  chatSubmit()
                }
              }}
            />
            <Button onClick={chatSubmit}
              variant="contained"
              className={classes.button}>
              <IconAdd />
            </Button >
          </div>
        </section>)}
    </RootContainer>
  )
}

export default withStyles(styles)(LayoutCandidature)