import { colors } from "../styles/colors.js";
import { themeOr } from "../styles/themes.js";
import { standardBorderRadius } from "../styles/common.js";
import { overflowAutoWithoutScrollbars } from "../styles/utils.js";
import { CopyToClipboardButton } from "./CopyToClipboardButton.js";
import styled from "@emotion/styled";
import { useLayoutEffect } from "react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
import Select from "react-select";
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";
//#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 = 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;
`;
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 ? colors.gray25 : backgroundColor,
		"&:hover": { backgroundColor: colors.gray25 }
	}),
	singleValue: (styles) => ({
		...styles,
		color: "#ffffff",
		margin: 0
	}),
	valueContainer: (styles) => ({
		...styles,
		padding: 0
	})
};
const 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?.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
			})
		})]
	});
};
const StyledCodeBlock = styled.div``;
const 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;
`;
const 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;` : ""}
  }
`;
const CodeBlockHeaderTitle = styled.div`
  width: 100%;
  font-weight: 500;
  color: ${({ theme }) => theme.hcNeutralFromBg(backgroundColor)};
`;
//#endregion
export { CodeBlock, InlineCode, ProgrammingLanguageOptions, StyledCodeBlock };
