import { useState } from "react"
import { SVGS } from "../assets/svgs"
import { ContentCard } from "./ContentCard"
import LinkUploader from "./LinkUploader"
import FileUploader from "./FileUploader"
import { useTranslation } from "react-i18next"

const TextUploader = ({ onFinish }: { onFinish: (text: string) => void }) => {
  const [text, setText] = useState("")
  const { t } = useTranslation()

  return (
    <div className="flex flex-col gap-2 w-full">
      <textarea
        className="mt-4 p-2 border rounded w-full bg-white border-heavy-blue"
        placeholder={t("uploader.text.placeholder")}
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <button
        className="mt-4 p-2 border rounded w-full bg-learnpack text-white"
        onClick={() => onFinish(text)}
      >
        {t("uploader.text.finish")}
      </button>
    </div>
  )
}

export const Uploader = ({
  onFinish,
}: {
  onFinish: (text: string) => void
}) => {
  const [selectedOption, setSelectedOption] = useState<string | null>(null)
  const { t } = useTranslation()

  const handleSelectOption = (option: string) => {
    setSelectedOption(option)
  }

  return (
    <div className="flex flex-col md:flex-row gap-2 justify-center items-center">
      {!selectedOption && (
        <>
          <ContentCard
            description={t("uploader.text.description")}
            icon={SVGS.contentTable}
            onClick={() => handleSelectOption("text")}
          />
          <ContentCard
            description={t("uploader.files.description")}
            icon={SVGS.pdf}
            onClick={() => handleSelectOption("files")}
          />

          <ContentCard
            description={t("uploader.youtube.description")}
            icon={SVGS.youtube}
            onClick={() => handleSelectOption("youtube")}
          />
        </>
      )}

      {selectedOption === "text" && <TextUploader onFinish={onFinish} />}

      {selectedOption === "files" && (
        <FileUploader
          styledAs="card"
          onFinish={() => {
            // We'll pass the uploaded files in hte context, no need to fill the content index
            onFinish("")
          }}
        />
      )}

      {selectedOption === "youtube" && (
        <LinkUploader
          onResult={(link) => {
            onFinish(
              `The following information comes from a Youtube video uploaded by the user. Use the transcript to create the course: ${JSON.stringify(
                link
              )}`
            )
          }}
        />
      )}
    </div>
  )
}
