import { memo, useEffect, useState } from "react"
import { useTranslation } from "react-i18next"
import { Subheading, TabHeader, TabsContainer } from "~/shared/styled"
import { CloudTab } from "./Cloud"
import { ImporterTab } from "./Importer"

export const SyncTab = memo<{
  className: string
  hidden: boolean
}>(({ className, hidden }) => {
  const { t } = useTranslation()
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    if (!hidden && !mounted) {
      setMounted(true)
    }
  }, [hidden])

  if (!mounted) {
    return null
  }

  return (
    <TabsContainer className={className}>
      <TabHeader>
        <Subheading>{t("tab.import")}</Subheading>
      </TabHeader>

      <CloudTab />
      <br />
      <hr />
      <ImporterTab />
    </TabsContainer>
  )
})
