import Image from "next/image";
import logoImg from "./assets/logo.png";
import { GitHubIcon } from "./custom-icons";
import { useDarkMode } from "./providers/dark-mode-provider";
import { Button, Card, Icon, Tag } from "@blueprintjs/core";

/** Link to the project's GitHub repository */
const REPO_LINK = "https://github.com/nilaymaj/esolang-park";

/** Link to the language's README.md page on GitHub */
const NOTES_LINK = (id: string) =>
  `https://github.com/nilaymaj/esolang-park/blob/main/languages/${id}/README.md`;

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

export const Header = (props: Props) => {
  const DarkMode = useDarkMode();

  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 }}>
      <a
        href={NOTES_LINK(props.langId)}
        title="View implementation notes for this esolang"
      >
        <Button minimal icon={<Icon icon="info-sign" />} />
      </a>
      <Button
        minimal
        title="Toggle between dark and light mode"
        icon={<Icon icon={DarkMode.isDark ? "flash" : "moon"} />}
        onClick={DarkMode.toggleDark}
      />
      <a href={REPO_LINK} title="GitHub repository">
        <Button minimal icon={<Icon icon={<GitHubIcon />} />} />
      </a>
    </div>
  );

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