import React, { Component } from "react";

import Breadcrumbs from "./Breadcrumbs";

import { withRouter } from "react-router-dom";

import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
import * as Blockly from "blockly";
import ReactMarkdown from "react-markdown";
import Container from "@material-ui/core/Container";
import ExpansionPanel from "@material-ui/core/ExpansionPanel";
import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
import { FaqQuestions } from "../data/faq";
import Editor from "rich-markdown-editor";

class Faq extends Component {
  state = {
    panel: "",
    expanded: false,
    text: "",
  };

  handleChange = (panel) => {
    this.setState({ panel: this.state.panel === panel ? "" : panel });
  };

  componentDidMount() {
    // Ensure that Blockly.setLocale is adopted in the component.
    // Otherwise, the text will not be displayed until the next update of the component.

    window.scrollTo(0, 0);
    this.forceUpdate();
  }

  render() {
    const { panel } = this.state;
    return (
      <div>
        <Breadcrumbs
          content={[{ link: this.props.location.pathname, title: "FAQ" }]}
        />
        <Container fixed>
          <div style={{ margin: "0px 24px 0px 24px" }}>
            <h1>FAQ</h1>
            {FaqQuestions().map((object, i) => {
              return (
                <ExpansionPanel
                  expanded={panel === `panel${i}`}
                  onChange={() => this.handleChange(`panel${i}`)}
                >
                  <ExpansionPanelSummary
                    expandIcon={<FontAwesomeIcon icon={faChevronDown} />}
                  >
                    <Typography variant="h6">{object.question}</Typography>
                  </ExpansionPanelSummary>
                  <ExpansionPanelDetails>
                    <Typography>
                      <ReactMarkdown
                        className="news"
                        allowDangerousHtml="true"
                        children={object.answer}
                      ></ReactMarkdown>
                    </Typography>
                  </ExpansionPanelDetails>
                </ExpansionPanel>
              );
            })}
            {this.props.button ? (
              <Button
                style={{ marginTop: "20px" }}
                variant="contained"
                color="primary"
                onClick={() => {
                  this.props.history.push(this.props.button.link);
                }}
              >
                {this.props.button.title}
              </Button>
            ) : (
              <Button
                style={{ marginTop: "20px" }}
                variant="contained"
                color="primary"
                onClick={() => {
                  this.props.history.push("/");
                }}
              >
                {Blockly.Msg.button_back}
              </Button>
            )}
            <Editor
              defaultValue="Hello world!"
              // value={this.state.text}
              onChange={(e) => {
                this.setState({ text: e() });
              }}
              uploadImage={async (file) => {}}
            />
            <Button
              style={{ marginTop: "20px" }}
              variant="contained"
              color="primary"
              onClick={() => {
                console.log(this.state.text);
              }}
            >
              {Blockly.Msg.button_back}
            </Button>
          </div>
        </Container>
      </div>
    );
  }
}

export default withRouter(Faq);
/*
<ExpansionPanel expanded={panel === 'panel1'} onChange={() => this.handleChange('panel1')}>
<ExpansionPanelSummary
expandIcon={
<FontAwesomeIcon icon={faChevronDown} />
}
>
<Typography variant="h6">{Blockly.Msg.faq_q1_question}</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>
<ReactMarkdown className="news" allowDangerousHtml="true" children={Blockly.Msg.faq_q1_answer}>
</ReactMarkdown>
</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel expanded={panel === 'panel2'} onChange={() => this.handleChange('panel2')}>
<ExpansionPanelSummary
expandIcon={
<FontAwesomeIcon icon={faChevronDown} />
}
>
<Typography>Frage 2</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>
Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus, varius pulvinar
diam eros in elit. Pellentesque convallis laoreet laoreet.
</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel expanded={panel === 'panel3'} onChange={() => this.handleChange('panel3')}>
<ExpansionPanelSummary
expandIcon={
<FontAwesomeIcon icon={faChevronDown} />
}
>
<Typography>Frage 3</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>
Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros,
vitae egestas augue. Duis vel est augue.
</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel expanded={panel === 'panel4'} onChange={() => this.handleChange('panel4')}>
<ExpansionPanelSummary
expandIcon={
<FontAwesomeIcon icon={faChevronDown} />
}
>
<Typography>Frage 4</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>
Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros,
vitae egestas augue. Duis vel est augue.
</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
*/

// {{
//     this.props.button ?
//         <Button
//             style={{ marginTop: '20px' }}
//             variant="contained"
//             color="primary"
//             onClick={() => { this.props.history.push(this.props.button.link) }}
//         >
//             {this.props.button.title}
//         </Button>
//         :
//         <Button
//             style={{ marginTop: '20px' }}
//             variant="contained"
//             color="primary"
//             onClick={() => { this.props.history.push('/') }}
//         >
//             {Blockly.Msg.button_back}
//         </Button>
// }}