import {
  CopyToClipboardButton
} from "./chunk-7C4MHI6Q.js";
import {
  overflowAutoWithoutScrollbars
} from "./chunk-FCZJILMW.js";
import {
  standardBorderRadius
} from "./chunk-JK4BP73A.js";
import {
  colors,
  themeOr
} from "./chunk-2VBDEO6M.js";
import {
  __spreadProps,
  __spreadValues
} from "./chunk-CIGAQ47A.js";

// src/components/CodeBlock.tsx
import styled from "@emotion/styled";
import Prism from "prismjs";
import "prismjs/components/prism-dart.min.js";
import "prismjs/components/prism-go.min.js";
import "prismjs/components/prism-graphql.min.js";
import "prismjs/components/prism-java.min.js";
import "prismjs/components/prism-json.min.js";
import "prismjs/components/prism-jsx.min.js";
import "prismjs/components/prism-kotlin.min.js";
import "prismjs/components/prism-python.min.js";
import "prismjs/components/prism-rust.min.js";
import "prismjs/components/prism-swift.min.js";
import "prismjs/themes/prism-tomorrow.css";
import { useLayoutEffect } from "react";
import Select from "react-select";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
var ProgrammingLanguageOptions = {
  Bash: "bash",
  Flutter: "dart",
  Go: "go",
  GraphQL: "graphql",
  Java: "java",
  JavaScript: "js",
  JSON: "json",
  Kotlin: "kotlin",
  Python: "python",
  React: "react",
  ReactNative: "tsx",
  Rust: "rust",
  Swift: "swift",
  Text: "txt"
};
var backgroundColor = "#2d2d2d";
var InlineCode = styled.span`
  font-family: "Roboto Mono", monospace;
  background-color: #2d2d2d;
  border: 1px solid ${themeOr(colors.gray90, colors.gray20)};
  border-radius: 3px;
  line-height: 24px;
  padding: 0 4px;
`;
var codeSelectStyles = {
  container: (styles) => __spreadProps(__spreadValues({}, styles), {
    display: "flex"
  }),
  control: (styles) => __spreadProps(__spreadValues({}, styles), {
    backgroundColor,
    border: "none",
    cursor: "pointer",
    "&:hover": {
      border: "#none"
    },
    boxShadow: "none",
    minHeight: 0
  }),
  dropdownIndicator: (styles) => __spreadProps(__spreadValues({}, styles), {
    color: "#ffffff",
    padding: "0 0 0 4px",
    "&:hover": {
      color: "#ffffff"
    }
  }),
  indicatorSeparator: (styles) => ({
    display: "none"
  }),
  input: (styles) => __spreadProps(__spreadValues({}, styles), {
    fontSize: "1rem",
    margin: 0,
    color: "transparent"
  }),
  menu: (styles) => __spreadProps(__spreadValues({}, styles), {
    backgroundColor,
    width: "auto"
  }),
  menuList: (styles) => __spreadProps(__spreadValues({}, styles), {
    borderRadius: "4px",
    padding: 0
  }),
  option: (styles, state) => __spreadProps(__spreadValues({}, styles), {
    cursor: "pointer",
    backgroundColor: state.isSelected ? colors.gray25 : backgroundColor,
    "&:hover": {
      backgroundColor: colors.gray25
    }
  }),
  singleValue: (styles) => __spreadProps(__spreadValues({}, styles), {
    color: "#ffffff",
    margin: 0
  }),
  valueContainer: (styles) => __spreadProps(__spreadValues({}, styles), {
    padding: 0
  })
};
var CodeBlock = ({
  title,
  children,
  className,
  language = "Text",
  languageOptions,
  onSelectLanguage,
  withCopyButton
}) => {
  useLayoutEffect(() => {
    Prism.highlightAll();
  }, [children, language]);
  const header = withCopyButton || languageOptions && onSelectLanguage ? /* @__PURE__ */ jsxs(CodeBlockHeader, { children: [
    title && /* @__PURE__ */ jsx(CodeBlockHeaderTitle, { children: title }),
    /* @__PURE__ */ jsxs(
      "div",
      {
        css: {
          display: "flex",
          alignItems: "center",
          justifyContent: title ? "flex-end" : "space-between",
          width: "100%"
        },
        children: [
          languageOptions && onSelectLanguage ? /* @__PURE__ */ jsx("div", { css: { margin: title ? "0 16px 0 auto" : "0" }, children: /* @__PURE__ */ jsx(
            Select,
            {
              value: { value: language, label: language },
              options: languageOptions.map((lang) => ({
                value: lang,
                label: lang
              })),
              onChange: (selected) => {
                if (selected == null ? void 0 : selected.value) {
                  onSelectLanguage(selected.value);
                }
              },
              styles: codeSelectStyles
            }
          ) }) : null,
          withCopyButton ? /* @__PURE__ */ jsx(CopyToClipboardButton, { value: children }) : null
        ]
      }
    )
  ] }) : null;
  return /* @__PURE__ */ jsxs(StyledCodeBlock, { className, children: [
    header,
    /* @__PURE__ */ jsx(CodeBlockContainer, { hasHeader: header !== null, children: /* @__PURE__ */ jsx("code", { className: `language-${ProgrammingLanguageOptions[language]}`, children }) })
  ] });
};
var StyledCodeBlock = styled.div``;
var CodeBlockHeader = styled.div`
  align-items: center;
  background-color: #2d2d2d;
  border-bottom: 1px solid ${colors.gray25};
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 16px 20px;
`;
var CodeBlockContainer = styled.pre`
  ${overflowAutoWithoutScrollbars}
  &[class*="language-"] {
    padding: 20px;
    font-weight: 500;
    ${standardBorderRadius(8)}
    ${(props) => props.hasHeader ? `border-top-left-radius: 0;
            border-top-right-radius: 0;
            margin-top: 0;` : ""}
  }
`;
var CodeBlockHeaderTitle = styled.div`
  width: 100%;
  font-weight: 500;
  color: ${({ theme }) => theme.hcNeutralFromBg(backgroundColor)};
`;

export {
  ProgrammingLanguageOptions,
  InlineCode,
  CodeBlock,
  StyledCodeBlock
};
