import React from "react";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import clsx from "clsx";

const styles = theme => ({
  root: {
    marginTop: 80,
    textAlign: "center",
    justifyContent: "center",
    alignItems: "center",
    marginLeft: "auto",
    marginRight: "auto",
    width: 350,
    ...theme.mixins.gutters(),
    paddingTop: theme.spacing.unit * 2,
    paddingBottom: theme.spacing.unit * 2
  },
  questionTitle: {
    marginBottom: 15
  },
  button: {
    margin: theme.spacing.unit,
    backgroundColor: "#4286f4"
  },
  bootstrapRoot: {
    boxShadow: "none",
    fontWeight: "bold",
    textTransform: "none",
    border: "1px solid",
    lineHeight: 1.5,
    backgroundColor: "#4286f4",
    borderColor: "#4286f4",
    "&:hover": {
      backgroundColor: "#0069d9",
      borderColor: "#0062cc"
    },
    "&:active": {
      boxShadow: "none",
      backgroundColor: "#0062cc",
      borderColor: "#005cbf"
    },
    "&:focus": {
      boxShadow: "0 0 0 0.2rem rgba(0,123,255,.5)"
    }
  }
});

const ToggleAnswer = ({ toggle, content }) => {
  const [isShown, setIsShown] = React.useState(false);
  const show = () => setIsShown(true);

  return (
    <React.Fragment>
      {toggle(show)}
      {isShown && content}
    </React.Fragment>
  );
};

export function Question(props) {
  const { classes } = props;
  return (
    <div>
      <Paper className={classes.root} elevation={1}>
        <Typography
          className={classes.questionTitle}
          variant="h3"
          component="h3"
        >
          Components 100
        </Typography>
        <Typography variant="h5" component="p">
          Components accept arbritary inputs known as _______?
        </Typography>
      </Paper>
      <p style={{ textAlign: "center" }}>
        <ToggleAnswer
          toggle={show => (
            <Button
              className={clsx(classes.button, classes.bootstrapRoot)}
              variant="contained"
              color="primary"
              onClick={show}
            >
              Show Answer
            </Button>
          )}
          content={
            <div>
              <Typography variant="h5" component="h3">
                What are Props?
              </Typography>
            </div>
          }
        />
      </p>
    </div>
  );
}

Question.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(Question);