import React, { useState } from "react";
import styled from "styled-components";

import ArrowLeft from "./assets/arrowLeft";
import SectionSwitch from "./sectionSwitch";
import Relevant from "./relevant";
import Grammer from "./grammer";
import Speech from "./speech";
import useTranslation from "../../hooks/useTranslation";
import wordStore from "../../mc/wordStore.json";

const AIAnalysis = ({ title = "", options = [], data, onClose, hideScore }) => {
  const { findText } = useTranslation(wordStore);
  const [selected, setSelectied] = useState(options[0]?.value);

  return (
    <Container>
      <h1 onClick={onClose}>
        <ArrowLeft />
        {title || findText("Full analysis")}
      </h1>
      <Wrapper>
        <SectionSwitch
          options={options}
          valueSelect={selected}
          onChange={setSelectied}
        />
        {selected === "relevance" && (
          <Relevant
            data={data?.relevance[0]?.model_data}
            student_text={data?.student_text}
            hideScore={hideScore}
          />
        )}
        {selected === "grammar" && (
          <Grammer data={data?.grammar[0]?.model_data} hideScore={hideScore} />
        )}
        {selected === "speech" &&
          data?.speech_analysis?.[0]?.model_data?.Reference && (
            <Speech
              data={data?.speech_analysis?.[0]?.model_data}
              audio={data?.audio}
              hideScore={hideScore}
            />
          )}
      </Wrapper>
    </Container>
  );
};

const Container = styled.div`
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  padding-bottom: 60px;
  h1 {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 22px;
    width: fit-content;
    cursor: pointer;
    font-weight: 700;
    line-height: 40px;
  }
`;

const Wrapper = styled.div`
  border-radius: 30.913px;
  background: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
`;

export default AIAnalysis;
