import React from "react";
import BoldIcon from "./icon/boldIcon";
import ItalicIcon from "./icon/italicIcon";
import UnderlineIcon from "./icon/underlineIcon";
import AlignLeftIcon from "./icon/alignLeftIcon";
import AlignCenterIcon from "./icon/alignCenterIcon";
import AlignRightIcon from "./icon/alignRightIcon";
import ListIcon from "./icon/listIcon";
import { ColorAction, ColorsWrapper, FontAction } from "./styled";
import ArrowDown from "./icon/arrowDown";
import ColorModal from "./colorModal";
import EmojiIcon from "./icon/emojiIcon";
import EmojiModal from "./emojiModal";
import { fontSizes } from "./toalbarOptions";
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";
const Inline = ({ currentState, onChange }) => {
  const { findText } = useTranslation(wordStore);
  const options = [
    {
      value: "Bold",
      icon: BoldIcon,
    },
    {
      value: "Italic",
      icon: ItalicIcon,
    },
    {
      value: "Underline",
      icon: UnderlineIcon,
    },
  ];
  return (
    <div
      className="rdw-inline-wrapper"
      aria-label={findText("rdw-inline-control")}
    >
      {options?.map((opt) => (
        <div
          key={opt?.value}
          className="rdw-option-wrapper"
          aria-selected={currentState[opt?.value?.toLocaleLowerCase()]}
          title={opt?.value}
          onClick={() => {
            onChange(opt?.value);
          }}
        >
          <opt.icon />
        </div>
      ))}
    </div>
  );
};
const TextAlign = ({ currentState, onChange }) => {
  const { findText } = useTranslation(wordStore);
  const options = [
    {
      value: "left",
      label: "Left",
      icon: AlignLeftIcon,
    },
    {
      value: "center",
      label: "Center",
      icon: AlignCenterIcon,
    },
    {
      value: "right",
      label: "Right",
      icon: AlignRightIcon,
    },
  ];
  return (
    <div
      className="rdw-text-align-wrapper"
      aria-label={findText("rdw-textalign-control")}
    >
      {options?.map((opt) => (
        <div
          key={opt?.value}
          className={`rdw-option-wrapper`}
          aria-selected={currentState?.textAlignment === opt?.value}
          title={opt?.value}
          onClick={() => {
            onChange(opt?.value);
          }}
        >
          <opt.icon />
        </div>
      ))}
    </div>
  );
};
const List = ({ currentState, onChange }) => {
  const { findText } = useTranslation(wordStore);
  return (
    <div className="rdw-list-wrapper" aria-label={findText("rdw-list-control")}>
      <div
        className="rdw-option-wrapper"
        aria-selected={currentState?.listType === "unordered"}
        title={findText("Unordered")}
        onClick={() => {
          onChange("unordered");
        }}
      >
        <ListIcon />
      </div>
    </div>
  );
};
const Colors = ({ onChange, expanded, onExpandEvent, currentState }) => {
  const { findText } = useTranslation(wordStore);
  return (
    <div
      className="rdw-colorpicker-wrapper"
      aria-haspopup={"true"}
      aria-label={"rdw-color-picker"}
      title={findText("Color picker")}
      aria-expanded={expanded}
    >
      {expanded && (
        <ColorModal
          color={currentState?.color || "#000000"}
          onChange={(v) => {
            onChange("color", v?.hex);
          }}
        />
      )}
      <div className="rdw-option-wrapper">
        <ColorsWrapper onClick={onExpandEvent}>
          <ColorAction>
            <div
              className="label"
              style={{
                background: currentState?.color,
              }}
            ></div>
            <ArrowDown />
          </ColorAction>
        </ColorsWrapper>
      </div>
    </div>
  );
};
const Emoji = ({ onExpandEvent, expanded, onChange }) => {
  const { findText } = useTranslation(wordStore);
  return (
    <div
      className="rdw-emoji-wrapper"
      aria-haspopup={findText("true")}
      aria-label={findText("rdw-emoji-control")}
      aria-expanded={findText("false")}
      title={findText("Emoji")}
    >
      {expanded && (
        <EmojiModal
          onChange={(v) => {
            onChange(v?.emoji);
          }}
        />
      )}
      <div className="rdw-option-wrapper" onClick={onExpandEvent}>
        <EmojiIcon />
      </div>
    </div>
  );
};
const Fontsize = ({ onExpandEvent, expanded, onChange, currentState }) => {
  const { findText } = useTranslation(wordStore);
  return (
    <div
      className="rdw-fontsize-wrapper"
      aria-label={findText("rdw-font-size-control")}
    >
      <div
        className="rdw-dropdown-wrapper"
        aria-label={findText("rdw-dropdown")}
        aria-expanded={findText("true")}
        onClick={onExpandEvent}
      >
        <FontAction>
          <span>{currentState?.fontSize || 16}</span>
          <ArrowDown />
        </FontAction>
      </div>
      {expanded && (
        <div className="rdw-dropdown">
          <ul className="rdw-dropdown-optionwrapper">
            {fontSizes?.map((i) => (
              <li
                className="rdw-dropdownoption-default rdw-fontsize-option "
                key={i}
                onClick={() => {
                  onChange(i);
                }}
              >
                {i}{" "}
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
};
export { Inline, TextAlign, List, Colors, Emoji, Fontsize };
