import React, { useState } from 'react'
import { __ } from '@wordpress/i18n'
import { ImportCard } from '../../common/ImportCard'
import { DragDropUploadArea } from './DragDropUploadArea'
import { SelectedFilesList } from './SelectedFilesList'
import { UploadButton } from './UploadButton'
import type { UploadedFile } from './UploadButton'
import type { ImportResult } from '../SelectSnippets/ImportResultDisplay'
import type { ImportableSnippetSchema } from '../../../../types/schema/ImportableSnippetSchema'
import type { Dispatch, RefObject, SetStateAction } from 'react'

const processFileList = (fileList: FileList): UploadedFile[] => {
	const uuids = new Uint32Array(fileList.length)
	window.crypto.getRandomValues(uuids)

	return Array.from(uuids).map((uuid, index) => ({
		id: uuid.toString(),
		name: fileList[index].name,
		file: fileList[index]
	}))
}

const buildFileList = (files: UploadedFile[]): FileList => {
	const dataTransfer = new DataTransfer()
	files.forEach(newFile => dataTransfer.items.add(newFile.file))
	return dataTransfer.files
}

export interface SelectFilesProps {
	onSuccess: (snippets: ImportableSnippetSchema[]) => void
	fileInputRef: RefObject<HTMLInputElement>
	selectedFiles: UploadedFile[] | undefined
	setImportResult: (result: ImportResult | undefined) => void
	setSelectedFiles: Dispatch<SetStateAction<UploadedFile[] | undefined>>
}

export const SelectFiles: React.FC<SelectFilesProps> = ({
	onSuccess,
	fileInputRef,
	selectedFiles,
	setImportResult,
	setSelectedFiles
}) => {
	const [isUploading, setIsUploading] = useState(false)

	const handleRemoveFile = (file: UploadedFile) => {
		setSelectedFiles(previous => {
			const newFiles = previous?.filter(fileItem => fileItem.id !== file.id)

			if (newFiles && fileInputRef.current) {
				fileInputRef.current.files = buildFileList(newFiles)
			}

			return newFiles
		})
	}

	return (
		<ImportCard className="import-upload-card">
			<h2>{__('Choose files', 'code-snippets')}</h2>
			<p className="description">
				{__('Choose one or more Code Snippets (.xml or .json) files to parse and preview.', 'code-snippets')}
			</p>

			<DragDropUploadArea
				fileInputRef={fileInputRef}
				disabled={isUploading}
				onFileSelect={fileList => {
					setSelectedFiles(fileList && processFileList(fileList))
					setImportResult(undefined)
				}}
			/>

			{selectedFiles && 0 < selectedFiles.length && (
				<SelectedFilesList
					files={selectedFiles}
					onRemoveFile={handleRemoveFile}
				/>)}

			<footer>
				<UploadButton {...{ isUploading, setIsUploading, onSuccess, selectedFiles, setImportResult }} />
			</footer>
		</ImportCard>
	)
}