import React, {
  useCallback,
  useEffect,
  useState,
} from 'react';

import {
  useDispatch,
  useSelector,
} from 'react-redux';

import Spottable from '@enact/spotlight/Spottable';
import Marquee from '@enact/ui/Marquee';

import { sendLogMyPageNotice } from '../../../../../actions/logActions';
import {
  getMyFaqInfo,
  getNotice,
} from '../../../../../actions/myPageActions';
import TButton from '../../../../../components/TButton/TButton';
import TButtonScroller
  from '../../../../../components/TButtonScroller/TButtonScroller';
import TPopUp from '../../../../../components/TPopUp/TPopUp';
import TScroller from '../../../../../components/TScroller/TScroller';
import useScrollTo from '../../../../../hooks/useScrollTo';
import {
  scaleH,
  scaleW,
} from '../../../../../utils/helperMethods';
import css from './ListContents.module.less';

const SpottableComponent = Spottable("li");

export default function ListContents({ selectedTab }) {
  const dispatch = useDispatch();

  const faqInfos = useSelector((state) => state.myPage.faqData.faqInfos);
  const noticeInfos = useSelector(
    (state) => state.myPage.noticeData.noticeInfos
  );

  const [faqPopUpOpen, setFaqPopUpOpen] = useState(false);
  const [currentInfos, setCurrentInfos] = useState(null);
  const [listInfos, setListInfos] = useState([]);
  const [openIdx, setOpenIdx] = useState(null);
  const [resetScroll, setResetScroll] = useState(false);

  const { getScrollTo, scrollTop } = useScrollTo();

  useEffect(() => {
    dispatch(getMyFaqInfo({}));
    dispatch(getNotice({}));
  }, [dispatch]);

  useEffect(() => {
    selectedTab === 0 ? setListInfos(faqInfos) : setListInfos(noticeInfos);
    setOpenIdx(null);
    scrollTop();
  }, [selectedTab, faqInfos, noticeInfos]);

  let selectedData = null;
  const handleListClick = useCallback(
    (idx) => {
      if (listInfos) {
        selectedData = listInfos[idx];
        setOpenIdx(idx);
        setFaqPopUpOpen(true);

        dispatch(
          sendLogMyPageNotice({
            itemId: `${selectedTab === 0 ? "FAQ/" : "Notice/"}${
              listInfos[idx]?.notiNo
            }`,
            title: `${selectedTab === 0 ? "FAQ/" : "Notice/"}${
              listInfos[idx]?.notiTitl
            }`,
          })
        );
      }
    },
    [listInfos, currentInfos, faqInfos, noticeInfos, selectedTab]
  );
  const onLeftClick = useCallback(() => {
    if (openIdx !== 0) {
      setOpenIdx((openIdx) => (openIdx > 0 ? openIdx - 1 : openIdx));
      setResetScroll(true);
    }
  }, [openIdx, currentInfos, listInfos]);
  const onRightClick = useCallback(() => {
    setOpenIdx((openIdx) => openIdx + 1);
    setResetScroll(true);
  }, [openIdx, currentInfos, listInfos]);

  useEffect(() => {
    selectedData = listInfos[openIdx];
    setCurrentInfos(selectedData);
  }, [openIdx]);

  useEffect(() => {
    if (resetScroll) {
      setResetScroll(false);
    }
  }, [resetScroll]);

  return (
    <>
      <TScroller
        className={css.scrollContainer}
        verticalScrollbar="visible"
        cbScrollTo={getScrollTo}
      >
        <ul className={css.listContainer}>
          {listInfos &&
            listInfos.map((list, idx) => {
              return (
                <SpottableComponent
                  key={`list:${idx}`}
                  onClick={() => {
                    handleListClick(idx);
                  }}
                  aria-label={
                    selectedTab === 0
                      ? "FAQ " + list.notiTitl
                      : "Notice " + list.notiTitl
                  }
                >
                  <Marquee className={css.marquee} marqueeOn="focus">
                    {list.notiTitl}
                  </Marquee>
                </SpottableComponent>
              );
            })}
        </ul>
      </TScroller>

      <TPopUp
        kind="supportPopup"
        open={faqPopUpOpen}
        onClose={() => {
          setFaqPopUpOpen(false);
        }}
        hasButton
        hasIndicator
        onLeftClick={onLeftClick}
        onRightClick={onRightClick}
        itemLength={listInfos?.length}
        currentPage={openIdx}
        button1Text="CLOSE"
      >
        {currentInfos && (
          <div className={css.faqConts}>
            <div className={css.faqTitle} aria-label={currentInfos.notiTitl}>
              <Marquee className={css.marquee} marqueeOn="render">
                {currentInfos.notiTitl}
              </Marquee>

              <div
                className={css.expDate}
                aria-label={currentInfos.expsDt.substring(0, 10)}
              >
                {currentInfos.expsDt.substring(0, 10)}
              </div>
            </div>
            <TButtonScroller
              className={css.faqDesc}
              boxHeight={scaleH(458)}
              width={scaleW(948)}
              verticalScrollbar="visible"
              resetScrollPosition={resetScroll}
            >
              {currentInfos.notiCntt}
            </TButtonScroller>
          </div>
        )}
      </TPopUp>
    </>
  );
}
