import { Inline, List, TextAlign, Colors, Emoji, Fontsize } from "./tools";
import { convertFromHTML, convertToHTML } from "draft-convert";
import { EditorState } from "draft-js";

export const fontSizes = [
  8, 9, 10, 11, 12, 14, 16, 18, 24, 30, 36, 48, 60, 72, 96,
];

export const editorColors = [
  "#000000", // Black
  "#FFFFFF", // White
  "#F44336", // Red
  "#E91E63", // Pink
  "#9C27B0", // Purple
  "#3F51B5", // Indigo
  "#2196F3", // Blue
  "#03A9F4", // Light Blue
  "#00BCD4", // Cyan
  "#009688", // Teal
  "#4CAF50", // Green
  "#8BC34A", // Light Green
  "#CDDC39", // Lime
  "#FFEB3B", // Yellow
  "#FFC107", // Amber
  "#FF9800", // Orange
  "#FF5722", // Deep Orange
  "#795548", // Brown
  "#808080", // Grey
  "#FFB6C1", // Light Pink
  "#ADD8E6", // Light Blue
  "#90EE90", // Light Green
  "#FFD700", // Gold
  "#FF4500", // Orange Red
];

const alignments = ["LEFT", "CENTER", "RIGHT"]; // Supported alignments

// Dynamically generate alignment styles
const generateAlignmentStyles = () => {
  return alignments.reduce((acc, align) => {
    acc[`TEXTALIGN-${align}`] = { textAlign: align.toLowerCase() };
    return acc;
  }, {});
};

const generateFontSizeStyles = () => {
  return fontSizes.reduce((acc, size) => {
    acc[`FONTSIZE-${size}`] = { fontSize: `${size}px` };
    return acc;
  }, {});
};

const generateColorStyles = () => {
  return editorColors.reduce((acc, color) => {
    acc[`COLOR-${color}`] = { color };
    return acc;
  }, {});
};

export const styleMap = {
  ...generateFontSizeStyles(),
  // ...generateColorStyles(),
  ...generateAlignmentStyles(),
};

export const htmlToEditorState = (html) => {
  const customHTML = convertFromHTML({
    htmlToStyle: (nodeName, node, currentStyle) => {
      if (nodeName === "span" && node.style.fontSize) {
        const fontSize = parseInt(node.style.fontSize, 10);
        return currentStyle.add(`fontsize-${fontSize}`);
      }

      return currentStyle;
    },

    htmlToBlock: (nodeName, node) => {
      const align = node.style.textAlign;

      if ((nodeName === "p" || nodeName === "li") && align) {
        return {
          type: nodeName === "p" ? "PARAGRAPH" : "unordered-list-item",
          data: { "text-align": align },
        };
      }
      return null; // Default behavior for other blocks
    },

    htmlToEntity: (nodeName, node, createEntity) => null,
  });

  const contentState = customHTML(html);
  return EditorState.createWithContent(contentState);
};

export const editorStateToHtml = (editorState) => {
  return convertToHTML({
    styleToHTML: (style) => {
      if (style.includes("fontsize")) {
        const size = style.split("-")[1] + "px";
        return <span style={{ fontSize: size }} />;
      }
    },
    blockToHTML: (block) => {
      const textAlign = block.data["text-align"];

      if (block.type === "PARAGRAPH") {
        if (textAlign) {
          return <p style={{ textAlign: textAlign }} />;
        }
        return <p />;
      }
      if (block.type === "unstyled") {
        if (block.data["text-align"]) {
          return <p style={{ textAlign: textAlign }} />;
        }
      }
      if (block.type === "unordered-list-item") {
        if (block.data["text-align"]) {
          return <li style={{ textAlign: textAlign }} />;
        }
      }
    },
  })(editorState.getCurrentContent());
};
export default {
  options: ["emoji", "colorPicker", "fontSize", "inline", "textAlign", "list"],
  inline: {
    inDropdown: false,
    component: Inline,
  },
  emoji: {
    inDropdown: false,
    component: Emoji,
  },
  list: {
    inDropdown: false,
    component: List,
  },
  textAlign: {
    inDropdown: false,
    component: TextAlign,
  },
  colorPicker: {
    component: Colors,
  },
  fontSize: {
    component: Fontsize,
  },
};
