import React from "react";
import { Tab, TabSection, TabView, TabViews, Tabs } from "@komi-app/components";

import { HtmlCodeEditor } from "../HtmlCodeEditor";
import { ImportedEmailEditor } from "../ImportedEmailEditor/ImportedEmailEditor";

import { ClassicEditor, UnlayerEditor } from "types/unlayer";

import classnames from "classnames";
import "./ImportedTemplateEditor.scss";

export interface ImportedTemplateEditorProps {
  emailEditor: ClassicEditor | null;
  html: string;
  setHtml: (html: string) => void;
  setIsLoading: (isLoading: boolean) => void;
  setEmailEditor: (editor: UnlayerEditor | null) => void;
}

export const ImportedTemplateEditor: React.FC<ImportedTemplateEditorProps> = ({
  emailEditor,
  html,
  setHtml,
  setIsLoading,
  setEmailEditor,
}) => {
  const classNames = classnames("imported-template--editor");

  const handleDesignUpdated = (html: string) => {
    setHtml(html);
  };

  return (
    <div /* {...props} */ className={classNames}>
      <TabSection>
        <Tabs>
          <Tab label="Visual Editor" value="visual" />
          <Tab label="HTML Editor" value="html" />
        </Tabs>
        <TabViews>
          <TabView value="visual">
            <ImportedEmailEditor
              className="imported-template--editor__email-editor"
              emailEditor={emailEditor}
              html={html}
              onHtmlChange={handleDesignUpdated}
              setIsLoading={setIsLoading}
              setEmailEditor={setEmailEditor}
            />
          </TabView>
          <TabView value="html">
            <HtmlCodeEditor
              className="imported-template--editor__html-editor"
              html={html}
              onHtmlChange={handleDesignUpdated}
            />
          </TabView>
        </TabViews>
      </TabSection>
    </div>
  );
};
