import { useCallback, useMemo, useEffect, useRef, useState } from "react";
import BinWhite from "./assets/binWhite";
import MoveUpDownWhite from "./assets/moveUppDownWhite";
import "./style.scss";
import { createEditor, Editor } from "slate";
import { Slate, Editable, withReact } from "slate-react";
import DropDownComponent from "../dropdown component";
import ButtonComponent from "../button";
import OutsideAlerter from "../outsideEventChecker";
// import { fontList } from "../../pages/createLectures/defaults";

import EmojiPicker from "emoji-picker-react";
import Grammerly from "./assets/grammerly";
import { CompactPicker } from "react-color";
import ColorModal from "./colorModal";

/**
 * @param {{
 * valueData: Object,
 * placeHolder: string,
 * }} props - properties of the editor
 */
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";
const TextEditor = ({
  valueData,
  showOptions,
  announce,
  click,
  placeHolder,
  onChange,
}) => {
  const { findText } = useTranslation(wordStore);
  const [heading, setHeading] = useState("");
  const [value, setValue] = useState(valueData);
  const editor = useMemo(() => withReact(createEditor()), []);
  const [fontColor, setFontColor] = useState("#000");
  const [active, setActive] = useState(false);
  const [boldActive, setBoldActive] = useState(false);
  const [italicActive, setItalicActive] = useState(false);
  const [underlinective, setUnderlineActive] = useState(false);
  const [listActive, setListActive] = useState(false);
  const [leftActive, setLeftActive] = useState(false);
  const [rightActive, setRightActive] = useState(false);
  const [centerActive, setCenterActive] = useState(false);
  const [showEmoji, setShowEmoji] = useState();
  const [showColor, setShowColor] = useState();

  // const [showEmoji, setShowEmoji] = useState();
  // const dropdownRef = useRef(null);

  const handleClickOutside = () => {
    // event.preventDefault();
    setShowEmoji(false);
    setActive(false);
  };

  // useEffect(() => {
  //   document.addEventListener("mousedown", handleClickOutside);
  //   return () => {
  //     document.removeEventListener("mousedown", handleClickOutside);
  //   };
  // }, []);

  const toggleMark = (editor, format, value = true) => {
    const isActive = isMarkActive(editor, format);
    if (isActive) {
      editor.removeMark(format);
      // setActive(true)
    } else {
      editor.addMark(format, value);
      // setActive(false)
    }
  };
  const isMarkActive = (editor, format) => {
    const marks = Editor.marks(editor);
    return marks ? marks[format] === true : false;
  };
  const colorInput = useRef();
  const defaultFontSize = useMemo(() => 16);
  const fontSizes = useCallback(() => {
    const numbers = [];
    const startNum = 10;
    const maxNum = 30;
    for (let x = startNum; x <= maxNum; x++) {
      numbers.push({
        name: x,
      });
    }
    return numbers;
  }, []);
  const handleEmojiButton = () => {
    setShowEmoji(!showEmoji);
  };
  const insertEmoji = useCallback((emoji) => {
    editor.insertText(emoji);
  }, []);
  useEffect(() => {
    onChange && onChange(value);
  }, [value]);
  return (
    <OutsideAlerter handleClick={handleClickOutside}>
      <div className="editor">
        <Slate
          editor={editor}
          value={value}
          autoFocus={true}
          onChange={(val) => {
            setValue(val);
          }}
        >
          <div className="editor-wrapper">
            {showEmoji && (
              <div
                className="emoji_picker"
                onMouseDown={(e) => {
                  e.preventDefault();
                }}
              >
                <EmojiPicker
                  onEmojiClick={(data) => {
                    insertEmoji(data.emoji);
                  }}
                  autoFocusSearch={false}
                  suggestedEmojisMode={findText("frequent")}
                  lazyLoadEmojis={true}
                  previewConfig={{
                    showPreview: false,
                  }}
                  searchPlaceholder=""
                />
              </div>
            )}
            <ColorModal
              isOpen={showColor}
              onClose={() => setShowColor(false)}
              display={findText("none")}
              marginLeft={findText("0%")}
              top={findText("6%")}
            >
              <div className="color_picker">
                <CompactPicker
                  color={fontColor}
                  onChangeComplete={(color) => {
                    setFontColor(color.hex);
                    toggleMark(editor, "color", color.hex);
                  }}
                />
              </div>
            </ColorModal>
            <div className="editor_area">
              {announce && (
                <input
                  placeholder={findText("Announcement Heading")}
                  value={heading}
                  onChange={(e) => setHeading(e.target.value)}
                />
              )}

              <div className="editable">
                <Editable
                  renderLeaf={(props) => <Leaf {...props} />}
                  placeholder={placeHolder}
                />
              </div>
            </div>

            <div className="bottom">
              <div
                className="tool-bar"
                onMouseDown={(e) => {
                  e.preventDefault();
                }}
              >
                {/* <div className="font">
                 <DropDownComponent
                  className="font-dd"
                  default={{ name: "Nunito" }}
                  dropdownData={fontList.map((font) => ({ name: font }))}
                  onSelect={({ name }) => {
                    //console.log(name);
                    toggleMark(editor, "fontFamily", name);
                  }}
                 />
                 </div> */}
                <div className="font-size">
                  <DropDownComponent
                    className="sizes"
                    default={{
                      name: defaultFontSize,
                    }}
                    dropdownData={fontSizes()}
                    onSelect={({ name }) => {
                      toggleMark(editor, "fontSize", name);
                    }}
                  />
                </div>
                <div
                  className="color-box"
                  onMouseDown={(e) => {
                    e.preventDefault();
                    colorInput.current.click();
                    setShowColor((state) => !state);
                  }}
                >
                  <div className="wrap">
                    <input
                      type="color"
                      name="color"
                      defaultValue={fontColor}
                      ref={colorInput}
                      onChange={(e) => {
                        setFontColor(e.target.value);
                        toggleMark(editor, "color", e.target.value);
                      }}
                    />
                    <div
                      className="indicator"
                      style={{
                        backgroundColor: fontColor,
                      }}
                    />
                    <ArrowDown />
                  </div>
                </div>
                <div className="font-style">
                  <div
                    className={boldActive ? "active" : ""}
                    onMouseDown={(event) => {
                      event.preventDefault();
                      toggleMark(editor, "bold");
                      setBoldActive(!boldActive);
                    }}
                  >
                    <BoldIcons />
                  </div>
                  <div
                    className={italicActive ? "active" : ""}
                    onMouseDown={(event) => {
                      event.preventDefault();
                      toggleMark(editor, "italic");
                      setItalicActive(!italicActive);
                    }}
                  >
                    <ItalicIcon />
                  </div>
                  <div
                    className={underlinective ? "active" : "underline"}
                    onMouseDown={(event) => {
                      event.preventDefault();
                      toggleMark(editor, "underline");
                      setUnderlineActive(!underlinective);
                    }}
                  >
                    <UnderlineIcon />
                  </div>
                </div>
                <div className="alignments">
                  <div
                    className={leftActive ? "a-left active" : "a-left"}
                    onMouseDown={(event) => {
                      event.preventDefault();
                      toggleMark(editor, "textAlign", "left");
                      setLeftActive(!leftActive);
                      setCenterActive(false);
                      setRightActive(false);
                    }}
                  >
                    <TextAlignLeftIcon />
                  </div>
                  <div
                    className={centerActive ? "a-center active" : "a-center"}
                    onMouseDown={(event) => {
                      event.preventDefault();
                      toggleMark(editor, "textAlign", "center");
                      setCenterActive(!centerActive);
                      setLeftActive(false);
                      setRightActive(false);
                    }}
                  >
                    <TextAlignCenterIcon />
                  </div>
                  <div
                    className={rightActive ? "a-right active" : "a-right"}
                    onMouseDown={(event) => {
                      event.preventDefault();
                      toggleMark(editor, "textAlign", "right");
                      setRightActive(!rightActive);
                      setCenterActive(false);
                      setLeftActive(false);
                    }}
                  >
                    <TextAlignRight />
                  </div>
                </div>
                <div className="list">
                  <div
                    className={listActive ? "list-icon active" : "list-icon"}
                    onClick={() => {
                      toggleMark(editor, "list");
                      setListActive(!listActive);
                    }}
                  >
                    <ListIcon />
                  </div>
                  {/* <div className="first-line-icon">
                   <FirstLineIcon />
                   </div> */}
                </div>
                <button
                  className={active ? "emoji_button_active" : "emoji_button"}
                  // onClick={handleEmojiButton}
                  onMouseDown={(e) => {
                    e.preventDefault();
                    setShowEmoji((state) => !state);
                    setActive(!active);
                  }}
                >
                  {" "}
                  <Grammerly />{" "}
                </button>
              </div>
              {announce && (
                <ButtonComponent
                  text={findText("Create Announcement")}
                  styles={{
                    fontSize: "18px",
                    width: "30%",
                    // textAlign: "center",
                    padding: "8px 17px",
                    borderRadius: "12px",
                    marginTop: "15px",
                    height: "50px",
                    // marginLeft: "15px",
                  }}
                  onClick={click}
                />
              )}
            </div>
          </div>
        </Slate>
        {showOptions && (
          <div className="options">
            <div className="options">
              <span>
                <MoveUpDownWhite />
              </span>
              <span onClick={handleDeleteContent.bind(this, temporaryId)}>
                <BinWhite />
              </span>
            </div>
          </div>
        )}
      </div>
    </OutsideAlerter>
  );
};
const Leaf = ({ attributes, children, leaf }) => {
  if (leaf.bold) {
    children = <strong>{children}</strong>;
  }
  if (leaf.italic) {
    children = <em>{children}</em>;
  }
  if (leaf.underline) {
    children = (
      <span
        {...attributes}
        style={{
          textDecoration: "underline",
        }}
      >
        {children}
      </span>
    );
  }
  if (leaf.color) {
    children = (
      <span
        {...attributes}
        style={{
          color: leaf.color,
        }}
      >
        {children}
      </span>
    );
  }
  if (leaf.textAlign) {
    children = (
      <p
        style={{
          textAlign: leaf.textAlign,
        }}
      >
        <span {...attributes}>{children}</span>
      </p>
    );
  }
  if (leaf.fontFamily) {
    children = (
      <span
        {...attributes}
        style={{
          fontFamily: leaf.fontFamily,
        }}
      >
        {children}
      </span>
    );
  }
  if (leaf.fontSize) {
    children = (
      <span
        {...attributes}
        style={{
          fontSize: leaf.fontSize,
        }}
      >
        {children}
      </span>
    );
  }
  if (leaf.list) {
    children = (
      // <ul {...attributes}>
      <li {...attributes}>{children}</li>
    );
    // </ul>
  }
  return <span {...attributes}>{children}</span>;
};
const BoldIcons = (props) => (
  <svg
    width="25"
    height="25"
    viewBox="0 0 25 25"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M5.80664 5.27344C5.80664 4.17344 6.70664 3.27344 7.80664 3.27344H12.9266C15.5466 3.27344 17.6766 5.40344 17.6766 8.02344C17.6766 10.6434 15.5466 12.7734 12.9266 12.7734H5.80664V5.27344Z"
      stroke={props.stroke ?? "#313333"}
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M5.80664 12.7734H15.3066C17.9266 12.7734 20.0566 14.9034 20.0566 17.5234C20.0566 20.1434 17.9266 22.2734 15.3066 22.2734H7.80664C6.70664 22.2734 5.80664 21.3734 5.80664 20.2734V12.7734V12.7734Z"
      stroke={props.stroke ?? "#313333"}
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);
const ItalicIcon = () => (
  <svg
    width="25"
    height="25"
    viewBox="0 0 25 25"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M10.5449 3.77344H19.7949"
      stroke="#949999"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M6.04492 21.7734H15.2949"
      stroke="#949999"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M15.1758 3.77344L10.6758 21.7734"
      stroke="#949999"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);
const UnderlineIcon = () => (
  <svg
    width="25"
    height="25"
    viewBox="0 0 25 25"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M5.92578 21.7734H19.9258"
      stroke="#949999"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M5.92578 3.77344V10.7734C5.92578 14.6434 9.05578 17.7734 12.9258 17.7734C16.7958 17.7734 19.9258 14.6434 19.9258 10.7734V3.77344"
      stroke="#949999"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);
const ArrowDown = () => (
  <svg
    width="15"
    height="15"
    viewBox="0 0 15 15"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M12.5466 5.99219L8.74331 9.79552C8.29414 10.2447 7.55914 10.2447 7.10997 9.79552L3.30664 5.99219"
      stroke="#949999"
      strokeWidth="1.5"
      strokeMiterlimit="10"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);
const TextAlignLeftIcon = () => (
  <svg
    width="25"
    height="25"
    viewBox="0 0 25 25"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M3.92578 5.27344H21.9258"
      stroke="#949999"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M3.92578 10.2734H13.3958"
      stroke="#949999"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M3.92578 15.2734H21.9258"
      stroke="#949999"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M3.92578 20.2734H13.3958"
      stroke="#949999"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);
const TextAlignCenterIcon = () => (
  <svg
    width="25"
    height="25"
    viewBox="0 0 25 25"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M3.92578 5.27344H21.9258"
      stroke="#949999"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M8.18555 10.2734H17.6655"
      stroke="#949999"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M3.92578 15.2734H21.9258"
      stroke="#949999"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M8.18555 20.2734H17.6655"
      stroke="#949999"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);
const TextAlignRight = () => (
  <svg
    width="25"
    height="25"
    viewBox="0 0 25 25"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M3.92578 5.27344H21.9258"
      stroke="#949999"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M12.4551 10.2734H21.9251"
      stroke="#949999"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M3.92578 15.2734H21.9258"
      stroke="#949999"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M12.4551 20.2734H21.9251"
      stroke="#949999"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);
const ListIcon = () => (
  <svg
    width="25"
    height="25"
    viewBox="0 0 25 25"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M11.9258 20.2734H21.9258"
      stroke="#949999"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M11.9258 13.2734H21.9258"
      stroke="#949999"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M11.9258 6.27344H21.9258"
      stroke="#949999"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M3.92578 6.27344L4.92578 7.27344L7.92578 4.27344"
      stroke="#949999"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M3.92578 13.2734L4.92578 14.2734L7.92578 11.2734"
      stroke="#949999"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M3.92578 20.2734L4.92578 21.2734L7.92578 18.2734"
      stroke="#949999"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);
const FirstLineIcon = () => (
  <svg
    width="25"
    height="25"
    viewBox="0 0 25 25"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M14.9258 5.27344H21.9258"
      stroke="#949999"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M14.9258 10.2734H21.9258"
      stroke="#949999"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M3.92578 15.2734H21.9258"
      stroke="#949999"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M3.92578 20.2734H21.9258"
      stroke="#949999"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M10.4258 9.20344V6.34344C10.4258 5.22344 9.97578 4.77344 8.84578 4.77344H5.99578C4.87578 4.77344 4.42578 5.22344 4.42578 6.34344V9.19344C4.42578 10.3234 4.87578 10.7734 5.99578 10.7734H8.84578C9.97578 10.7734 10.4258 10.3234 10.4258 9.20344Z"
      stroke="#949999"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);
export default TextEditor;
