import { rosePineDawn } from "thememirror";
import CodeMirror from "@uiw/react-codemirror";

import { javascript } from "@codemirror/lang-javascript";
import { css } from "@codemirror/lang-css";
import { go } from "@codemirror/lang-go";
import { html } from "@codemirror/lang-html";
import { java } from "@codemirror/lang-java";
import { php } from "@codemirror/lang-php";
import { python } from "@codemirror/lang-python";
import { rust } from "@codemirror/lang-rust";
import { sql } from "@codemirror/lang-sql";
import { vue } from "@codemirror/lang-vue";
import { xml } from "@codemirror/lang-xml";
import { yaml } from "@codemirror/lang-yaml";
import { Button, message, Select, Tooltip, Popover } from "antd";

const langMap = {
  javascript: javascript(),
  css: css(),
  go: go(),
  html: html(),
  java: java(),
  php: php(),
  python: python(),
  rust: rust(),
  sql: sql(),
  vue: vue(),
  xml: xml(),
  yaml: yaml(),
};
export default function Editor({
  code,
  language,
  onChange,
  onLanguageChange,
  width,
  height,
  onDelete
}: {
  code: string;
  language:
    | "javascript"
    | "css"
    | "go"
    | "html"
    | "java"
    | "php"
    | "python"
    | "rust"
    | "sql"
    | "vue"
    | "xml"
    | "yaml";
  onChange: (code: string) => void;
  onLanguageChange: (language: string) => void;
  width: number;
  height: number;
  onDelete?: () => void;
}) {

  const languageOptions = [
    { value: "javascript", label: "JavaScript" },
    { value: "css", label: "CSS" },
    { value: "go", label: "Go" },
    { value: "html", label: "HTML" },
    { value: "java", label: "Java" },
    { value: "php", label: "PHP" },
    { value: "python", label: "Python" },
    { value: "rust", label: "Rust" },
    { value: "sql", label: "SQL" },
    { value: "typescript", label: "TypeScript" },
    { value: "xml", label: "XML" },
    { value: "yaml", label: "YAML" },
  ];

  const handleCopy = () => {
    navigator.clipboard.writeText(code).then(() => {
      message.success("复制成功");
    });
  };

  const handleKeyDown = (e: KeyboardEvent) => {
    e.preventDefault();
    e.stopPropagation();
  }

  const handleClick = (e: MouseEvent) => {
    e.stopPropagation();
    e.preventDefault();
  }

  return (
    <>
      <div className="relative w-full h-full">
        <Popover
          content={
            <div className="w-190px flex gap-8px" style={{ left: 0, top: -35, zIndex: 1 }}>
              <Tooltip title="切换代码语言">
                <Select
                  style={{ width: 120 }}
                  value={language}
                  options={languageOptions}
                  onChange={(l) => onLanguageChange?.(l)}
                />
              </Tooltip>
              <Tooltip title="复制内容">
                <Button
                  icon={<i className="iconfont icon-fuzhi" />}
                  onClick={handleCopy}
                ></Button>
              </Tooltip>
              <Tooltip title="删除代码">
                <Button
                  icon={<i className="iconfont icon-shanchu" />}
                  onClick={() => onDelete?.()}
                ></Button>
              </Tooltip>
            </div>
          }
        >
          <CodeMirror
            value={code}
            height={height + "px"}
            width={width + "px"}
            extensions={[rosePineDawn, langMap[language]]}
            onChange={onChange}
            onKeyDown={handleKeyDown as any}
            onClick={handleClick as any}
          />
        </Popover>
      </div>
    </>
  );
}
