Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_chunk = require("../chunk-BN4qSVkS.cjs");
const require_styles_colors = require("../styles/colors.cjs");
const require_styles_themes = require("../styles/themes.cjs");
const require_styles_common = require("../styles/common.cjs");
const require_styles_utils = require("../styles/utils.cjs");
const require_components_CopyToClipboardButton = require("./CopyToClipboardButton.cjs");
let _emotion_styled = require("@emotion/styled");
_emotion_styled = require_chunk.__toESM(_emotion_styled);
let react = require("react");
let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
let react_select = require("react-select");
react_select = require_chunk.__toESM(react_select);
let prismjs = require("prismjs");
prismjs = require_chunk.__toESM(prismjs);
require("prismjs/components/prism-dart.min.js");
require("prismjs/components/prism-go.min.js");
require("prismjs/components/prism-graphql.min.js");
require("prismjs/components/prism-java.min.js");
require("prismjs/components/prism-json.min.js");
require("prismjs/components/prism-jsx.min.js");
require("prismjs/components/prism-kotlin.min.js");
require("prismjs/components/prism-python.min.js");
require("prismjs/components/prism-rust.min.js");
require("prismjs/components/prism-swift.min.js");
require("prismjs/themes/prism-tomorrow.css");
//#region src/components/CodeBlock.tsx
const 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"
};
const backgroundColor = "#2d2d2d";
const InlineCode = _emotion_styled.default.span`
  font-family: "Roboto Mono", monospace;
  background-color: #2d2d2d;
  border: 1px solid ${require_styles_themes.themeOr(require_styles_colors.colors.gray90, require_styles_colors.colors.gray20)};
  border-radius: 3px;
  line-height: 24px;
  padding: 0 4px;
`;
const codeSelectStyles = {
	container: (styles) => ({
		...styles,
		display: "flex"
	}),
	control: (styles) => ({
		...styles,
		backgroundColor,
		border: "none",
		cursor: "pointer",
		"&:hover": { border: "#none" },
		boxShadow: "none",
		minHeight: 0
	}),
	dropdownIndicator: (styles) => ({
		...styles,
		color: "#ffffff",
		padding: "0 0 0 4px",
		"&:hover": { color: "#ffffff" }
	}),
	indicatorSeparator: () => ({ display: "none" }),
	input: (styles) => ({
		...styles,
		fontSize: "1rem",
		margin: 0,
		color: "transparent"
	}),
	menu: (styles) => ({
		...styles,
		backgroundColor,
		width: "auto"
	}),
	menuList: (styles) => ({
		...styles,
		borderRadius: "4px",
		padding: 0
	}),
	option: (styles, state) => ({
		...styles,
		cursor: "pointer",
		backgroundColor: state.isSelected ? require_styles_colors.colors.gray25 : backgroundColor,
		"&:hover": { backgroundColor: require_styles_colors.colors.gray25 }
	}),
	singleValue: (styles) => ({
		...styles,
		color: "#ffffff",
		margin: 0
	}),
	valueContainer: (styles) => ({
		...styles,
		padding: 0
	})
};
const CodeBlock = ({ title, children, className, language = "Text", languageOptions, onSelectLanguage, withCopyButton }) => {
	(0, react.useLayoutEffect)(() => {
		prismjs.default.highlightAll();
	}, [children, language]);
	const header = withCopyButton || languageOptions && onSelectLanguage ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(CodeBlockHeader, { children: [title && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(CodeBlockHeaderTitle, { children: title }), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
		css: {
			display: "flex",
			alignItems: "center",
			justifyContent: title ? "flex-end" : "space-between",
			width: "100%"
		},
		children: [languageOptions && onSelectLanguage ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
			css: { margin: title ? "0 16px 0 auto" : "0" },
			children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_select.default, {
				value: {
					value: language,
					label: language
				},
				options: languageOptions.map((lang) => ({
					value: lang,
					label: lang
				})),
				onChange: (selected) => {
					if (selected?.value) onSelectLanguage(selected.value);
				},
				styles: codeSelectStyles
			})
		}) : null, withCopyButton ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_CopyToClipboardButton.CopyToClipboardButton, { value: children }) : null]
	})] }) : null;
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(StyledCodeBlock, {
		className,
		children: [header, /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(CodeBlockContainer, {
			hasHeader: header !== null,
			children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("code", {
				className: `language-${ProgrammingLanguageOptions[language]}`,
				children
			})
		})]
	});
};
const StyledCodeBlock = _emotion_styled.default.div``;
const CodeBlockHeader = _emotion_styled.default.div`
  align-items: center;
  background-color: #2d2d2d;
  border-bottom: 1px solid ${require_styles_colors.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;
`;
const CodeBlockContainer = _emotion_styled.default.pre`
  ${require_styles_utils.overflowAutoWithoutScrollbars}
  &[class*="language-"] {
    padding: 20px;
    font-weight: 500;
    ${require_styles_common.standardBorderRadius(8)}
    ${(props) => props.hasHeader ? `border-top-left-radius: 0;
            border-top-right-radius: 0;
            margin-top: 0;` : ""}
  }
`;
const CodeBlockHeaderTitle = _emotion_styled.default.div`
  width: 100%;
  font-weight: 500;
  color: ${({ theme }) => theme.hcNeutralFromBg(backgroundColor)};
`;
//#endregion
exports.CodeBlock = CodeBlock;
exports.InlineCode = InlineCode;
exports.ProgrammingLanguageOptions = ProgrammingLanguageOptions;
exports.StyledCodeBlock = StyledCodeBlock;
