import React from "react";
import { ChatIconButton } from "../../components/TableChatLeftSection/ChatIconButton/ChatIconButton";
import AttachFileIcon from "@mui/icons-material/AttachFile";
import ImageIcon from "@mui/icons-material/Image";
import InsertEmoticonIcon from "@mui/icons-material/InsertEmoticon";
import FormatBoldIcon from "@mui/icons-material/FormatBold";
import FormatItalicIcon from "@mui/icons-material/FormatItalic";
import LinkIcon from "@mui/icons-material/Link";
import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
import FormatListNumberedIcon from "@mui/icons-material/FormatListNumbered";
import StrikethroughSIcon from "@mui/icons-material/StrikethroughS";
import BrushIcon from "@mui/icons-material/Brush";
import LooksOneIcon from "@mui/icons-material/LooksOne";
import LooksTwoIcon from "@mui/icons-material/LooksTwo";
import Looks3Icon from "@mui/icons-material/Looks3";
import Looks4Icon from "@mui/icons-material/Looks4";
import Looks5Icon from "@mui/icons-material/Looks5";
import Looks6Icon from "@mui/icons-material/Looks6";
import "./EditorToolbar.styles.scss";

const TOOLBAR_ITEMS = {
  bold: {
    icon: FormatBoldIcon,
    ariaLabel: "Bold text",
    command: "toggleBold",
  },
  italic: {
    icon: FormatItalicIcon,
    ariaLabel: "Italic text",
    command: "toggleItalic",
  },
  link: {
    icon: LinkIcon,
    ariaLabel: "Add link",
    command: "toggleLink",
  },
  bulletList: {
    icon: FormatListBulletedIcon,
    ariaLabel: "Bullet list",
    command: "toggleBulletList",
  },
  orderedList: {
    icon: FormatListNumberedIcon,
    ariaLabel: "Numbered list",
    command: "toggleOrderedList",
  },
  strike: {
    icon: StrikethroughSIcon,
    ariaLabel: "Strike through",
    command: "toggleStrike",
  },
  highlight: {
    icon: BrushIcon,
    ariaLabel: "Highlight text",
    command: "toggleHighlight",
  },
  h1: {
    icon: LooksOneIcon,
    ariaLabel: "Heading 1",
    command: "toggleH1",
  },
  h2: {
    icon: LooksTwoIcon,
    ariaLabel: "Heading 2",
    command: "toggleH2",
  },
  h3: {
    icon: Looks3Icon,
    ariaLabel: "Heading 3",
    command: "toggleH3",
  },
  h4: {
    icon: Looks4Icon,
    ariaLabel: "Heading 4",
    command: "toggleH4",
  },
  h5: {
    icon: Looks5Icon,
    ariaLabel: "Heading 5",
    command: "toggleH5",
  },
  h6: {
    icon: Looks6Icon,
    ariaLabel: "Heading 6",
    command: "toggleH6",
  },
};

export const EditorToolbar = React.forwardRef(
  (
    {
      editor,
      activeStates = {},
      enabledItems = Object.keys(TOOLBAR_ITEMS),
      onFileSelect,
      onImageSelect,
      onEmojiSelect,
      className = "",
    },
    ref
  ) => {
    const fileInputRef = React.useRef(null);
    const imageInputRef = React.useRef(null);

    // Expose refs to parent
    React.useImperativeHandle(ref, () => ({
      fileInput: fileInputRef.current,
      imageInput: imageInputRef.current,
    }));
    const handleCommand = React.useCallback(
      (command) => {
        console.log("EditorToolbar - editor[command]:", editor?.[command]);
        if (editor && editor[command]) {
          editor[command]();
        } else {
          console.warn(`Command ${command} not available on editor:`, editor);
        }
      },
      [editor]
    );

    return (
      <div className={`editor-toolbar ${className}`}>
        {onFileSelect && (
          <>
            <input
              type="file"
              ref={fileInputRef}
              onChange={onFileSelect}
              style={{ display: "none" }}
              accept=".pdf,.doc,.docx,.txt,.xls,.xlsx"
            />
            <ChatIconButton
              icon={
                <AttachFileIcon
                  fontSize="small"
                  style={{ width: "16px", height: "16px" }}
                />
              }
              onClick={() => fileInputRef.current?.click()}
              ariaLabel="Attach file"
              className="format-button"
            />
          </>
        )}

        {onImageSelect && (
          <>
            <input
              type="file"
              ref={imageInputRef}
              accept="image/*"
              onChange={onImageSelect}
              style={{ display: "none" }}
            />
            <ChatIconButton
              icon={
                <ImageIcon
                  fontSize="small"
                  style={{ width: "16px", height: "16px" }}
                />
              }
              onClick={() => imageInputRef.current?.click()}
              ariaLabel="Upload image"
              className="format-button"
            />
          </>
        )}

        {onEmojiSelect && (
          <ChatIconButton
            icon={
              <InsertEmoticonIcon
                fontSize="small"
                style={{ width: "16px", height: "16px" }}
              />
            }
            onClick={onEmojiSelect}
            ariaLabel="Add emoji"
            className="format-button"
          />
        )}

        {enabledItems.map((itemKey) => {
          const item = TOOLBAR_ITEMS[itemKey];
          if (!item) return null;

          const Icon = item.icon;
          return (
            <ChatIconButton
              key={itemKey}
              icon={
                <Icon
                  fontSize="small"
                  style={{ width: "16px", height: "16px" }}
                />
              }
              onClick={() => handleCommand(item.command)}
              ariaLabel={item.ariaLabel}
              className={`format-button ${
                activeStates[itemKey] ? "is-active" : ""
              }`}
            />
          );
        })}
      </div>
    );
  }
);
