TopicScreen

import React, { useEffect, useState } from "react";
import Navbar from "../components/Navbar";
import { MobileSmallLogo } from "../components/MainLogo";
import topicApi from "../common/api/topicApi";
import ColumnContainer from "../components/ColumnContainer";
import SecondaryButton from "../components/SecondaryButton";
import { connect, useDispatch } from "react-redux";
import {
  setTopic,
  setTopicId,
  startSession,
  setDemoCode,
} from "../redux/session";
import MainText from "../components/MainText";
import { getString } from "../common/locale";
import Container from "../components/Container";
import DemoCodeDialog from "../components/DemoCodeDialog";
import { readText } from "../redux/audio";
import { setCurReading, setWavesActive } from "../redux/chat";

const TopicScreen = ({
  language,
  languageId,
  setTopicId,
  setTopic,
  setCurReading,
  setWavesActive,
  setDemoCode,
  demoCode,
  history,
}) => {
  const [loading, setLoading] = useState(false);
  const [topics, setTopics] = useState([]);
  const [hasError, setHasError] = useState(false);
  const [clickedTopic, setClickedTopic] = useState(null);
  const [demoCodeDialogOpen, setDemoCodeDialogOpen] = useState(false);

  const dispatch = useDispatch();

  useEffect(() => {
    setLoading(true);
    topicApi.getTopics(languageId).then((res) => {
      setLoading(false);
      setTopics(res);
    });
    // eslint-disable-next-line
  }, []);

  useEffect(() => {
    if (!clickedTopic?.id) return;
    topicApi.getTopic(clickedTopic?.id).then((res) => {
      setTopics(res?.ChildTopics);
    });
  }, [clickedTopic?.id]);

  // console.log(topicId, 11);

  const handleSelect = (topic) => {
    setClickedTopic(topic);
    setTopicId(topic.id);
    setLoading(true);
    setTopic(topic);
    if (topic.ChildTopics?.length === 0) {
      dispatch(startSession()).then((action) => {
        if (action.error) {
          if (action.error.message === "Request failed with status code 401") {
            setHasError(true);
            setDemoCodeDialogOpen(true);
          }
          return;
        }
        setCurReading([action.payload.data.welcomeText]);
        setWavesActive(true);
        // read text here to avoid issues on iOS (audio playback needs to be triggered by user interaction)
        dispatch(
          readText({
            text: action.payload.data.welcomeText,
            callback: () => {
              setCurReading([]);
              setWavesActive(false);
            },
            persist: true,
          })
        );
        history.push("/chat");
      });
    }
  };

  return (
    <>
      <Navbar showBack showQuickSettings />
      <DemoCodeDialog
        open={demoCodeDialogOpen}
        handleClose={() => {
          setDemoCodeDialogOpen(false);
        }}
        onConfirm={() => {
          handleSelect(clickedTopic);
        }}
        language={language}
        onDemoCodeChange={setDemoCode}
        demoCode={demoCode}
        hasError={hasError}
      />
      <Container style={{ width: "100%" }}>
        <MobileSmallLogo spinning={loading} />

        <MainText>{getString("topic.main", language)}</MainText>

        <ColumnContainer
          className="hide-scrollbar"
          style={{
            overflowY: "scroll",
            width: "100%",
            flex: 1,
            msOverflowStyle: "none",
            scrollbarWidth: "none",
            paddingBottom: 80,
          }}
        >
          {topics?.map((topic) => (
            <SecondaryButton
              width="90%"
              key={topic.id}
              height="unset"
              onClick={() => handleSelect(topic)}
            >
              {topic.name}
            </SecondaryButton>
          ))}
        </ColumnContainer>
      </Container>
    </>
  );
};

const mapStateToProps = (state) => ({
  language: state.settings.language,
  languageId: state.settings.languageId,
  demoCode: state.session.demoCode,
  topicId: state.session.topicId,
});

const mapDispatchToProps = {
  setTopicId,
  setTopic,
  setCurReading,
  setWavesActive,
  setDemoCode,
};

export default connect(mapStateToProps, mapDispatchToProps)(TopicScreen);