import React from "react"
import PropTypes from "prop-types"
import { useGetFileQuery } from "../generated/graphql"
import ImageOpener from "./ImageOpener"
import TextOpener from "./TextOpener"

interface Props {
    id: string
	show: boolean
	onCloseClick?: ()=>void
}

const FileOpen: React.FC<Props> = (props) => {

	const { data } = useGetFileQuery({
		variables:{
			id: props.id
		}
	})

	let opener = <div>TODO</div>
	
	if(data?.file != null){
		// https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
		if (data.file.contentType?.startsWith("image/")){
			opener = <ImageOpener file={data?.file} />
		}else if (data.file.contentType?.startsWith("text/")){
			opener = <TextOpener file={data.file} />
		}else{
			// Get Opener bases on file extension
			const ext = data.file.name?.split(".").pop()
			switch (ext) {
			case "png":
			case "jpg":
			case "jpeg":
			case "gif":
				// TODO: more ext
				opener = <ImageOpener file={data.file} />
				break
			case "txt":
			case "md":
				opener = <TextOpener file={data.file} />
				break
			default:
				opener = <ImageOpener file={data?.file} />
				break
			}
		}
	}

	return (
		<div className={`modal modal-sm ${props.show ? "active":""}`}>
			<a className="modal-overlay" onClick={()=>{
				props.onCloseClick?.()
			}}>❌</a>
			<div className="modal-container">
				{opener}
			</div>
		</div>
	)
}

FileOpen.propTypes = {
	id: PropTypes.string.isRequired,
	show: PropTypes.bool.isRequired,
	onCloseClick: PropTypes.func
}

export default FileOpen