"use client"

import { includes, lowerCase } from "lodash"
import { useSearchParams } from "next/navigation"
import { useEffect, useState } from "react"
// @ts-ignore
import FileViewer from "react-file-viewer"

export default function FileRender() {
  const searchParams = useSearchParams()
  const [file, setFile] = useState<any>(null)
  const [type, setType] = useState<any>(null)
  const docs = ["docx", "doc", "pptx", "ppt", "xlsx", "xls"]

  useEffect(() => {
    if (searchParams.has("file") && searchParams.has("type")) {
      setFile(searchParams.get("file") || null)
      setType(searchParams.get("type") || null)
    }
  }, [searchParams])

  const onError = (e: any) => {
    console.log(e, "error in file-viewer")
  }

  return (
    <div className="h-screen">
      {includes(docs, lowerCase(type)) ? (
        <iframe
          src={`https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(file)}`}
          style={{ width: "100%", height: "100%", border: "none" }}
        />
      ) : (
        <FileViewer
          fileType={type}
          filePath={file}
          onError={onError}
        />
      )}
    </div>
  )
}