import {useRef} from 'react'
import {parse} from 'yaml'
import {Upload} from 'lucide-react'

export function CloudFormationTemplateUpload({onLoad, onError}: {onLoad: (template: string, name: string) => void; onError: (message: string) => void}) {
    const input = useRef<HTMLInputElement>(null)
    async function load(file?: File) {
        if (!file) return
        if (!/\.(json|ya?ml)$/i.test(file.name)) return onError('Choose a JSON, YAML, or YML template file.')
        const template = await file.text()
        try {
            if (/\.json$/i.test(file.name)) JSON.parse(template)
            else parse(template)
            onLoad(template, file.name)
        } catch {
            onError(`${file.name} is not valid ${/\.json$/i.test(file.name) ? 'JSON' : 'YAML'}.`)
        }
    }
    return <><input ref={input} type="file" accept=".json,.yaml,.yml,application/json,application/x-yaml,text/yaml" hidden onChange={(event) => void load(event.target.files?.[0])}/><button className="button compact" type="button" onClick={() => input.current?.click()}><Upload size={13}/> Upload JSON or YAML</button></>
}