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

import Spotlight from "@enact/spotlight";

import TBody from "../../../../components/TBody/TBody";
import TButtonTab from "../../../../components/TButtonTab/TButtonTab";
import THeader from "../../../../components/THeader/THeader";
import { $L } from "../../../../utils/helperMethods";
import ContactContents from "./ContactContents/ContactContents";
import ListContents from "./ListContents/ListContents";
import css from "./Support.module.less";

export default function Support({ title, cbScrollTo }) {
  const [selectedTab, setSelectedTab] = useState(0);

  const tabList = [$L("FAQ"), $L("Contact"), $L("Notice")];
  const handleItemClick = useCallback(
    ({ index, ...rest }) => {
      setSelectedTab(index);
    },
    [selectedTab]
  );

  useEffect(() => {
    setTimeout(() => {
      Spotlight.focus("tab-" + selectedTab);
    }, 50);
  }, [selectedTab]);
  return (
    <>
      <THeader title={title} ariaLabel={title + ", heading 1"} />
      <TBody cbScrollTo={cbScrollTo} className={css.tBody}>
        <div className={css.supportContainer}>
          <div className={css.header}>
            <TButtonTab
              contents={tabList}
              className={css.tTab}
              onItemClick={handleItemClick}
              selectedIndex={selectedTab && selectedTab}
            />
          </div>
          <div className={css.supportContents}>
            {selectedTab && selectedTab === 1 ? (
              <ContactContents />
            ) : (
              <ListContents selectedTab={selectedTab} />
            )}
          </div>
        </div>
      </TBody>
    </>
  );
}
