import { lazy, Suspense } from "react";
import InputText from "./InputText";
import clsx from "clsx";
import { useTranslation } from "react-i18next";

const NovelEditor = lazy(() => import("~/modules/novel/ui/editor"));

interface Props {
  contentType: "wysiwyg" | "markdown";
  value: string;
  onChangeValue: (e: string) => void;
  onChangeContentType?: (e: "wysiwyg" | "markdown") => void;
  name?: string;
  className?: string;
  editorLanguage?: string;
  editorTheme?: "vs-dark" | "light";
  autoFocus?: boolean;
  disabled?: boolean;
}
export default function InputContent({
  contentType,
  onChangeContentType,
  value,
  onChangeValue,
  name,
  className,
  editorLanguage = "markdown",
  editorTheme = "vs-dark",
  autoFocus = false,
  disabled = false,
}: Props) {
  const { t } = useTranslation();

  return (
    <div className="space-y-2">
      <div className="grid gap-3">
        <div className="space-y-2">
          {onChangeContentType && (
            <div className="flex items-center space-x-1">
              <button type="button" onClick={() => onChangeContentType("wysiwyg")} className="text-text-neutral-tertiary text-xs hover:underline">
                <div className={clsx(contentType === "wysiwyg" ? "font-bold" : "")}>{t("components.editor.modes.wysiwyg")}</div>
              </button>
              <div>•</div>
              <button type="button" onClick={() => onChangeContentType("markdown")} className="text-text-neutral-tertiary text-xs hover:underline">
                <div className={clsx(contentType === "markdown" ? "font-bold" : "")}>{t("components.editor.modes.markdown")}</div>
              </button>
            </div>
          )}
          <input name="contentType" value={contentType} readOnly hidden />
          {contentType === "wysiwyg" ? (
            <div className={clsx(className)}>
              {name && <input type="hidden" name={name} value={value} hidden readOnly />}
              <Suspense fallback={null}>
                <NovelEditor
                  content={value}
                  onChange={(e) => onChangeValue(e.html ?? "")}
                  usingLocalStorage={false}
                  autoFocus={autoFocus}
                  disabled={disabled}
                  readOnly={disabled}
                />
              </Suspense>
            </div>
          ) : contentType === "markdown" ? (
            <InputText
              className={clsx(className, "min-h-[500px]")}
              rows={6}
              editor="monaco"
              editorLanguage={editorLanguage}
              editorTheme={editorTheme}
              editorFontSize={14}
              name={name}
              value={value}
              setValue={(e) => onChangeValue(e.toString())}
              autoFocus={autoFocus}
              disabled={disabled}
              readOnly={disabled}
            />
          ) : null}
        </div>
      </div>
    </div>
  );
}