import * as React from "react";
import Image from "next/image";
import { Text, Classes, Drawer, TextProps, Divider } from "@blueprintjs/core";
import breakpointsImg from "./assets/guide-breakpoints.png";
import execControlsImg from "./assets/guide-exec-controls.png";
import infoBtnImg from "./assets/guide-info-btn.png";
import syntaxCheckImg from "./assets/guide-syntax-check.png";

const BigText = (props: TextProps & { children: React.ReactNode }) => {
  const { children, ...rest } = props;
  return (
    <Text className={Classes.RUNNING_TEXT} {...rest}>
      {children}
    </Text>
  );
};

const SideBySideSection = (props: {
  title: string;
  children: React.ReactNode;
  image: JSX.Element;
}) => {
  return (
    <div>
      <Text>
        <h3>{props.title}</h3>
      </Text>
      <div style={{ display: "flex", alignItems: "center" }}>
        <div style={{ flexShrink: 0, width: "30%", marginRight: 20 }}>
          <div style={{ borderRadius: 10, overflowY: "hidden" }}>
            {props.image}
          </div>
        </div>
        <BigText>{props.children}</BigText>
      </div>
    </div>
  );
};

const SyntaxCheckSection = () => {
  return (
    <SideBySideSection
      title="Live syntax checking"
      image={<Image src={syntaxCheckImg} alt="syntax checking" />}
    >
      <p>
        Esolang Park checks the syntax of your source code{" "}
        <b>while {"you're"} typing</b>. Any errors in the syntax of your program
        are highlighted in the editor.
      </p>
    </SideBySideSection>
  );
};

const BreakpointsSection = () => {
  return (
    <SideBySideSection
      title="Set breakpoints in your code"
      image={<Image src={breakpointsImg} alt="breakpoints" />}
    >
      <p>
        Esolang Park allows you to <b>set debugging breakpoints in your code</b>
        . When you run your program and execution reaches a line with
        breakpoint, the program will pause and you can inspect its state.
      </p>
      <p>
        Click on the left of any line number to set a breakpoint on that line.
        Click on the red circle to remove the breakpoint.
      </p>
    </SideBySideSection>
  );
};

const ExecControlsSection = () => {
  return (
    <div>
      <Text>
        <h3>Pause, inspect and step through execution</h3>
      </Text>
      <div style={{ textAlign: "center" }}>
        <div
          style={{
            width: "60%",
            marginLeft: "auto",
            marginRight: "auto",
            borderRadius: 10,
            overflowY: "hidden",
          }}
        >
          <Image src={execControlsImg} alt="execution controls" />
        </div>
      </div>
      <BigText>
        <p>
          When your run a program, the {'"Run code"'} button changes to the
          execution controls. Pause execution to{" "}
          <b>
            inspect the runtime state, start stepping through execution, change
            the execution interval or stop execution entirely
          </b>
          .
        </p>
        <p>
          The execution interval dictates how fast your program should be run by
          Esolang Park. This must be at least 5ms.
        </p>
      </BigText>
    </div>
  );
};

type Props = {
  isOpen: boolean;
  onClose: () => void;
};

export const FeaturesGuide = (props: Props) => {
  return (
    <Drawer
      isOpen={props.isOpen}
      onClose={props.onClose}
      title="Esolang Park"
      style={{ overflowY: "auto" }}
    >
      <div className={Classes.DIALOG_BODY}>
        <SyntaxCheckSection />
        <Divider style={{ margin: 20 }} />
        <BreakpointsSection />
        <Divider style={{ margin: 20 }} />
        <ExecControlsSection />
      </div>
    </Drawer>
  );
};