import React, { useCallback, useState } from "react";

import { Marquee, MarqueeController } from "@enact/sandstone/Marquee";
import Spottable from "@enact/spotlight/Spottable";

import TBody from "../../../../components/TBody/TBody";
import TPopUp from "../../../../components/TPopUp/TPopUp";
import TScroller from "../../../../components/TScroller/TScroller";
import { $L } from "../../../../utils/helperMethods";
import css from "./Support.module.less";

const SpottableComponent = Spottable("li");

export default function Support({ faqs }) {
  const [faqPopUpOpen, setFaqPopUpOpen] = useState(false);
  const [currentFaqs, setCurrentFaqs] = useState(null);

  const handleListClick = useCallback(
    (notiNo) => {
      if (faqs) {
        const selectedFaq = faqs.find((faq) => faq.notiNo === notiNo);
        setCurrentFaqs(selectedFaq);
        setFaqPopUpOpen(true);
      }
    },
    [faqs, currentFaqs]
  );

  const confirmClick = useCallback(() => {
    console.log("#####close");
  });

  return (
    <div className={css.supportContainer}>
      <div className={css.title}>{$L("Support")}</div>
      <TBody>
        {/* FAQ */}
        <ul className={css.liContainer}>
          {faqs &&
            faqs.map((faq, idx) => {
              return (
                <SpottableComponent
                  className={css.supportList}
                  key={`faq:${idx}`}
                  onClick={() => {
                    handleListClick(faq.notiNo);
                  }}
                >
                  {faq.notiTitl}
                </SpottableComponent>
              );
            })}
        </ul>
      </TBody>
      <TPopUp
        kind="supportPopup"
        open={faqPopUpOpen}
        onClose={() => {
          setFaqPopUpOpen(false);
        }}
        hasButton
        button1Text="OK"
      >
        {currentFaqs && (
          <div className={css.faqConts}>
            <div className={css.faqTitle}>
              {/* <Marquee className={css.marquee} marqueeOn="render"> */}
              {/* <div className={css.notTitle}> */}
              {currentFaqs.notiTitl}
              {/* </div> */}
              {/* </Marquee> */}
              <div className={css.expDate}>
                {currentFaqs.expsDt.substring(0, 10)}
              </div>
            </div>
            {/* <TBody */}
            <TScroller
              className={css.faqDesc}
              verticalScrollbar="visible"
              // focusableScrollbar={true}
              // dangerouslySetInnerHTML={{
              // __html: currentFaqs && currentFaqs.notiCntt,
              // }}
            >
              {currentFaqs.notiCntt}
              {/* </TBody> */}
            </TScroller>
          </div>
        )}
      </TPopUp>
    </div>
  );
}
