import React, { useCallback, useEffect, useMemo } from "react";

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

import Spottable from "@enact/spotlight/Spottable";

import defaultLogoImg from "../../../../../../assets/images/ic-tab-partners-default@3x.png";
import { getMyCustomers } from "../../../../../actions/myPageActions";
import CustomImage from "../../../../../components/CustomImage/CustomImage";
import TScroller from "../../../../../components/TScroller/TScroller";
import useScrollTo from "../../../../../hooks/useScrollTo";
import { $L } from "../../../../../utils/helperMethods";
import css from "./ContactContents.module.less";
import Marquee from "@enact/ui/Marquee";

const SpottableComponent = Spottable("li");

export default function ContactContents() {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getMyCustomers({}));
    scrollTop();
  }, [dispatch]);

  const contactInfos = useSelector(
    (state) => state.myPage.contactData.partners
  );

  const { getScrollTo, scrollTop } = useScrollTo();

  const getMailTitle = (patncNm, index) => {
    if (patncNm === "Pinkfong") {
      return index === 0
        ? "Pinkfong Goods - Email"
        : "Pinkfong Plus Subscriptions";
    }
    return $L("Email");
  };

  return (
    <>
      <TScroller
        className={css.scrollContainer}
        verticalScrollbar="visible"
        cbScrollTo={getScrollTo}
      >
        {contactInfos && contactInfos.length > 0 && (
          <ul className={css.listContainer}>
            {contactInfos &&
              contactInfos.length > 0 &&
              contactInfos.map((contact, idx) => {
                return (
                  <SpottableComponent key={`contact: ${idx}`}>
                    <div className={css.partners}>
                      {contact.patncLogoPath && (
                        <CustomImage
                          src={contact.patncLogoPath}
                          alt="partnerImg"
                          fallbackSrc={defaultLogoImg}
                        />
                      )}
                      <Marquee className={css.marquee} marqueeOn="render">
                        {contact.patncNm && contact.patncNm}
                      </Marquee>
                    </div>
                    <div className={css.contents}>
                      {contact.csInfos &&
                        contact.csInfos.length > 0 &&
                        contact.csInfos.map((cs, idx) => {
                          return (
                            <div
                              key={`csInfos: ${idx}`}
                              aria-label={
                                contact.patncNm &&
                                contact.patncNm + cs.csPhnNo &&
                                cs.csPhnNo + cs.csMail &&
                                cs.csMail + cs.csSiteUrl &&
                                cs.csSiteUrl
                              }
                            >
                              {cs.csPhnNo && (
                                <span>
                                  {$L("Phone")} {`: ${cs.csPhnNo}`}
                                </span>
                              )}
                              {cs.csMail && (
                                <span>
                                  {`${getMailTitle(contact.patncNm, idx)}: ${
                                    cs.csMail
                                  }`}
                                </span>
                              )}
                              {cs.csSiteUrl && (
                                <span>
                                  {$L("URL")} {`: ${cs.csSiteUrl}`}
                                </span>
                              )}
                            </div>
                          );
                        })}
                    </div>
                  </SpottableComponent>
                );
              })}
          </ul>
        )}
      </TScroller>
      <div
        className={css.notiBottom}
        aria-label="For any other LG TV Shopping app related inquires, please contact us below. Support email address – shoptime.support@lge.com When you make an inquiry, please let us know your country to provide you with some quick instructions. 
Please refer to the information below for product, payment and delivery."
      >
        <div>
          {$L(
            "For any other LG TV Shopping app related inquires, please contact us below  Support email address – shoptime.support@lge.com"
          )}
        </div>
        <div>
          {$L(
            "When you make an inquiry, please let us know your country to provide you with some quick instructions. Please refer to the information below for product, payment and delivery."
          )}
        </div>
      </div>
    </>
  );
}
