import { useRef, useEffect } from "react";
import "../../styles/AppealWidget.css";
import { TouchableLayout } from "../TouchableLayout";
import { ReactMarkdownComponent } from "../ReactMarkdown";

function AppealWidget({
  widgetImgPath,
  widgetLabel,
  widgetText,
  style,
  isOpen,
}) {
  const stopProp = (e) => {
    e.stopPropagation();
    e.preventDefault();
  };
  const layoutRef = useRef(null);

  useEffect(() => {
    if (isOpen && layoutRef.current) {
      const scrollable = layoutRef.current.querySelector(".scrollable");
      if (scrollable) scrollable.scrollTop = 0;
    }
  }, [isOpen]);

  return (
    <div
      style={style}
      className="dynamic-widget"
      onPointerDown={stopProp}
      onPointerMove={stopProp}
      onPointerUp={stopProp}
    >
      {widgetImgPath && (
        <img className="dynamic-widget-image" src={widgetImgPath} />
      )}
      <div className="dynamic-widget-label">{widgetLabel}</div>
      <TouchableLayout
        ref={layoutRef}
        className="dynamic-widget-text-scroll"
      >
        <div className="dynamic-widget-text">
          <ReactMarkdownComponent value={widgetText} />
        </div>
      </TouchableLayout>
    </div>
  );
}

export default AppealWidget;