import React, { useState } from 'react';
import {
  CardContainer,
  CardRightSection,
  CardLeftSection,
} from './index.styled';
import DropDownComponent from '../dropdown component';
import bannerImg from './assets/learngual_developer_api_doc.png';
import { ArrowIcon, FolderOpenIcon, FolderCloseIcon } from './assets/icons';

/**
 * @param {{
 *  style: CSSProperties,
 * }} props - properties of Component
 *
 */
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";
const DevAPIdocs = (props) => {
  const { findText } = useTranslation(wordStore);
  const [activeTab, setActiveTab] = useState(0);
  const documentationList = [
    'Learngual API',
    'Introduction',
    'API Keys',
    'API Regions',
    'API Versioning',
    'API Limits ',
    'Terms of Service',
  ];
  const handleActiveTab = (idx) => {
    setActiveTab(idx);
  };
  return (
    <CardContainer style={props.style}>
      <CardLeftSection>
        <h1>{findText("Documentation")}</h1>
        <div className="docs__contents">
          {documentationList.map((item, idx) => (
            <p
              className={activeTab === idx ? 'active' : ''}
              onClick={() => {
                handleActiveTab(idx);
              }}
              key={idx}
            >
              {item}
            </p>
          ))}
          <div className="folder__structure">
            <div className="folder__group">
              <p>
                <span>
                  <ArrowIcon /> <FolderCloseIcon />{' '}
                </span>
                {findText("v9 (Latest)")}
              </p>
            </div>

            <div className="folder__group folder__open_group">
              <p>
                <span>
                  <ArrowIcon /> <FolderOpenIcon />{' '}
                </span>
                {findText("v9 (Latest)")}
              </p>
              <div className="api__info">
                <p>
                  <span className="api__type">{findText("POST")}</span>
                  {findText("Score a word or sentence")}
                </p>
              </div>
            </div>
          </div>
        </div>
      </CardLeftSection>

      <CardRightSection>
        <div className="top__header">
          <DropDownComponent
            className="dropdown-content"
            header={findText("Environment")}
            inputPlaceHolder={findText("Select")}
            dropdownData={[
              {
                name: findText("Option 1"),
                value: findText("Option One"),
              },
              {
                name: findText("Option 2"),
                value: findText("Option Two"),
              },
              {
                name: findText("Option 3"),
                value: findText("Option Three"),
              },
            ]}
          />

          <DropDownComponent
            className="dropdown-content"
            header={findText("Layout")}
            inputPlaceHolder={findText("Select")}
            dropdownData={[
              {
                name: findText("Option 1"),
                value: findText("Option One"),
              },
              {
                name: findText("Option 2"),
                value: findText("Option Two"),
              },
              {
                name: findText("Option 3"),
                value: findText("Option Three"),
              },
            ]}
          />

          <DropDownComponent
            className="dropdown-content"
            header={findText("Language")}
            inputPlaceHolder={findText("Select")}
            dropdownData={[
              {
                name: findText("Option 1"),
                value: findText("Option One"),
              },
              {
                name: findText("Option 2"),
                value: findText("Option Two"),
              },
              {
                name: findText("Option 3"),
                value: findText("Option Three"),
              },
            ]}
          />
        </div>

        <section className="details__section">
          <h2>{findText("Learngual API")}</h2>
          <img src={bannerImg} alt={findText("Learngual Developer ApI")} />

          <p>
            {findText(
              "Speechace is a Speech Recognition API for fluency and pronunciation assessment. Our patented technology is unique in its ability to score a learner's speech and pinpoint individual syllable and phoneme level mistakes in a user's pronunciation in real time."
            )}
          </p>

          <div className="new__section">
            <h4>{findText("NEW! v9 Spontaneous Speech Scoring")}</h4>
            <h4>
              {findText(
                "with Relevance Assessment & Comprehensive IELTS, PTE, TOEIC, CEFR Speaking scores"
              )}
            </h4>

            <p>
              {findText(
                "Speechace API v9.0 now supports transcription and assessment of spontaneous speech questions in context if a given question prompt. The API:"
              )}{" "}
            </p>
            <p>{findText("Transcribes the audio response")}</p>
            <p>
              {findText(
                "Evaluates Relevance of the response given a relevance_context"
              )}{" "}
            </p>
            <p>
              {findText(
                "Evaluates: Pronunciation, Fluency, Coherence, Vocabulary, Grammar"
              )}
            </p>
            <p>
              {findText(
                "Returns scores on multiple standard scales: IELTS, PTE, TOEIC, CEFR See Transcribe & Score API for details."
              )}
            </p>
          </div>
        </section>
      </CardRightSection>
    </CardContainer>
  );
};
export default DevAPIdocs;
