import * as React from "react";
import Image from "next/image";
import logoImg from "./assets/logo.png";
import { useDarkMode } from "./providers/dark-mode-provider";
import { Button, Card, Icon, Tag } from "@blueprintjs/core";
import { useFeaturesGuide } from "./providers/features-guide-provider";

type Props = {
  langId: string;
  langName: string;
  renderExecControls: () => React.ReactNode;
};

export const Header = (props: Props) => {
  const DarkMode = useDarkMode();
  const featuresGuide = useFeaturesGuide();
  const [showNotesHint, setShowNotesHint] = React.useState(true);

  const brandSection = (
    <div
      style={{
        flex: 1,
        textAlign: "left",
        display: "flex",
        alignItems: "center",
      }}
    >
      <a href="/" title="Return to home page">
        <Button minimal large>
          <div style={{ display: "flex", alignItems: "center" }}>
            <Image src={logoImg} alt="logo" width={20} height={20} />
            <span style={{ marginLeft: 10 }}>Esolang Park</span>
          </div>
        </Button>
      </a>
      <Tag large minimal style={{ marginLeft: 10 }}>
        {props.langName}
      </Tag>
    </div>
  );

  const controlsSection = (
    <div style={{ textAlign: "center" }}>{props.renderExecControls()}</div>
  );

  const infoSection = (
    <div
      style={{
        flex: 1,
        textAlign: "right",
        paddingRight: 8,
        display: "flex",
        justifyContent: "flex-end",
        alignItems: "center",
      }}
    >
      <Button
        minimal
        title="View the feature guide"
        icon={<Icon icon="help" />}
        onClick={featuresGuide.show}
      />
      <Button
        minimal
        title="Toggle light mode"
        icon={<Icon icon={DarkMode.isDark ? "flash" : "moon"} />}
        onClick={DarkMode.toggleDark}
      />
    </div>
  );

  return (
    <div style={{ padding: 5 }}>
      <Card
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          padding: 3,
        }}
      >
        {brandSection}
        {controlsSection}
        {infoSection}
      </Card>
    </div>
  );
};