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

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

  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="Add your text here..."
        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)}
      >
        Finish
      </button>
    </div>
  )
}

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

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

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

          <ContentCard
            description="Share a Youtube link"
            icon={SVGS.youtube}
            onClick={() => handleSelectOption("youtube")}
          />
        </>
      )}

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

      {selectedOption === "files" && <FileUploader styledAs="card" />}

      {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>
  )
}
