import * as React from 'react'

import {
	useState,
	useContext,
	createContext,
} from '@wordpress/element'

import {
	__experimentalVStack as VStack,
	Modal,
} from '@wordpress/components'

import {
	ButtonGroup,
	ImportExportStringsContext,
} from '@ska/components'

import OptionImporter from './OptionImporter'
import RecordImporter from './RecordImporter'
import ContentImporter from './ContentImporter'
import AutoImporter from './AutoImporter'

import type {
	SiteEntityRecord,
} from './util'

export interface ImportContextType {
	site?: Partial<SiteEntityRecord>
	stylesheet?: string
	ska_theme?: object
	ska_blocks?: object
	ska_blocks_presets?: object
	ska_blocks_variations?: object
	ska_blocks_tailwind4?: object
	content?: object
}

export const ImportContext = createContext<ImportContextType>({})

export interface ImportModalProps {
	valueToImport: any
	onRequestClose: () => void
}

const ImportModal: React.FC<ImportModalProps> = ({
	valueToImport,
	onRequestClose,
}) => {

	const [mode, setMode] = useState<'auto' | 'manual'>('auto')

	const {
		importLabel,
		importInstructions,
	} = useContext(ImportExportStringsContext)

	const {
		site = {},
		stylesheet = 'ska-theme',
		ska_theme = {},
		ska_blocks = {},
		ska_blocks_presets = {},
		ska_blocks_variations = {},
		ska_blocks_tailwind4 = {},
		content = {},
	} = valueToImport

	return (
		<Modal
			className='ska__import-export__import-modal'
			title={importLabel}
			size={mode === 'manual' ? 'fill' : 'medium'}
			onRequestClose={onRequestClose}
		>
			<ImportContext.Provider value={valueToImport}>
				<VStack spacing={8}>
					<p>{importInstructions}</p>
					<ButtonGroup.Radio
						pills
						label={'Mode'}
						options={[
							{
								label: 'Auto',
								value: 'auto',
							},
							{
								label: 'Manual',
								value: 'manual',
							},
						]}
						value={mode}
						onChange={value => setMode(value as 'auto' | 'manual' | undefined || 'auto')}
					/>
					{mode === 'auto' && <AutoImporter valueToImport={valueToImport} />}
					{mode === 'manual' && <>
						{Object.keys(ska_theme).length > 0 && (
							<OptionImporter
								slug='ska_theme'
								valueToImport={ska_theme}
							/>
						)}
						{Object.keys(ska_blocks).length > 0 && (
							<OptionImporter
								slug='ska_blocks'
								valueToImport={ska_blocks}
							/>
						)}
						{Object.keys(ska_blocks_presets).length > 0 && (
							<RecordImporter
								slug='ska_blocks_presets'
								recordKey='presets'
								valueToImport={ska_blocks_presets}
							/>
						)}
						{Object.keys(ska_blocks_variations).length > 0 && (
							<RecordImporter
								slug='ska_blocks_variations'
								recordKey='variations'
								valueToImport={ska_blocks_variations}
							/>
						)}
						{Object.keys(ska_blocks_tailwind4).length > 0 && (
							<OptionImporter
								slug='ska_blocks_tailwind4'
								valueToImport={ska_blocks_tailwind4}
							/>
						)}
						{Object.keys(content).length > 0 && (
							<ContentImporter
								valueToImport={content}
								stylesheet={stylesheet}
							/>
						)}
					</>}
				</VStack>
			</ImportContext.Provider>
		</Modal>
	)
}

export default ImportModal