import React, { useEffect, useState } from "react"
import { Link } from "gatsby"

import { Container, CustomLink } from "@/components"
import { ACTIVITY_LINK } from "@/constants/scrmtech"
import CompanyProfile from "@/components/about-us/company-profile"
import DevelopmentPath from "@/components/about-us/development-path"
import CoverNews from "@/components/about-us/cover-news"
import NewsTab from "@/components/about-us/news-tab"
import t from "@/constants/wording"

import * as styles from "./index.module.scss"
interface IProps {
  tabText: string
  subTabText: string
}
const newsSubTabs = ["companyNews", "mediaReports"]

const AboutUsTab: React.FC<IProps> = ({ tabText, subTabText }) => {
  const menuList = [
    {
      id: "companyOverview",
      title: t("Company Overview"),
    },
    {
      id: "developmentPath",
      title: t("Development Path"),
    },
    {
      id: "news",
      title: t("news center"),
    },
    {
      id: "activity",
      title: t("Activity"),
    },
  ]

  const [tabName, setTabName] = useState("")
  const [subTabName, setSubTabName] = useState("")

  useEffect(() => {
    setTabName(tabText)
    const text = newsSubTabs.includes(subTabText) ? subTabText : newsSubTabs[0]
    setSubTabName(text)
  }, [])

  const menuClick = (id: string) => {
    setTabName(id)
    id === "news" ? setSubTabName(newsSubTabs[0]) : void 0
  }

  return (
    <>
      <Container isSmall={true}>
        <div className={styles.aboutUs}>
          {menuList.map(list =>
            list.id === "activity" ? (
              <CustomLink linkTo={`${ACTIVITY_LINK}`} key={list.id}>
                {list.title}
              </CustomLink>
            ) : (
              <Link
                to={`/about-us?tab=${list.id}`}
                onClick={() => menuClick(list.id)}
                className={tabName === list.id ? styles.active : ""}
                key={list.id}
              >
                {list.title}
              </Link>
            )
          )}
        </div>
      </Container>
      {tabName && tabName === "companyOverview" && <CompanyProfile />}
      {tabName && tabName === "developmentPath" && <DevelopmentPath />}
      {tabName && tabName === "news" && (
        <>
          <CoverNews />
          <NewsTab tab={subTabName} />
        </>
      )}
    </>
  )
}

export default AboutUsTab