import React, { Component } from "react";

import Hardware from "./Hardware";
import Requirement from "./Requirement";
import BlocklyWindow from "../Blockly/BlocklyWindow";

import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import remarkGemoji from "remark-gemoji";

class Instruction extends Component {
  render() {
    var step = this.props.step;
    var isHardware = step.hardware && step.hardware.length > 0;
    var areRequirements = step.requirements && step.requirements.length > 0;
    return (
      <div>
        <Typography style={isHardware ? {} : { marginBottom: "5px" }}>
          <ReactMarkdown
            className={"tutorial"}
            linkTarget={"_blank"}
            skipHtml={false}
            allowDangerousHtml={true}
            remarkPlugins={[remarkGfm, remarkGemoji]}
          >
            {step.text}
          </ReactMarkdown>
        </Typography>
        {isHardware ? <Hardware picture={step.hardware} /> : null}
        {areRequirements > 0 ? (
          <Requirement requirements={step.requirements} />
        ) : null}
        {step.media ? (
          step.media.picture ? (
            <div
              style={{
                display: "flex",
                justifyContent: "center",
                marginBottom: "5px",
              }}
            >
              <img
                src={`${process.env.REACT_APP_BLOCKLY_API}/media/${step.media.picture.path}`}
                alt=""
                style={{ maxHeight: "40vH", maxWidth: "100%" }}
              />
            </div>
          ) : step.media.youtube ? (
            /*16:9; width: 800px; height: width/16*9=450px*/
            <div style={{ maxWidth: "800px", margin: "auto" }}>
              <div
                style={{
                  position: "relative",
                  height: 0,
                  paddingBottom: "calc(100% / 16 * 9)",
                }}
              >
                <iframe
                  title={step.media.youtube}
                  style={{
                    position: "absolute",
                    top: "0",
                    left: "0",
                    width: "100%",
                    maxWidth: "800px",
                    height: "100%",
                    maxHeight: "450px",
                  }}
                  src={`https://www.youtube.com/embed/${step.media.youtube}`}
                  frameBorder="0"
                  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                  allowFullScreen
                />
              </div>
            </div>
          ) : null
        ) : null}
        {step.xml ? (
          <Grid container spacing={2} style={{ marginBottom: "5px" }}>
            <Grid
              item
              xs={12}
              style={{ display: "flex", justifyContent: "center" }}
            >
              <BlocklyWindow svg blockDisabled initialXml={step.xml} />
            </Grid>
          </Grid>
        ) : null}
      </div>
    );
  }
}

export default Instruction;