import * as React from 'react'

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

import {
	__experimentalVStack as VStack,
	__experimentalHStack as HStack,
	__experimentalGrid as Grid,
	__experimentalView as View,
	Button,
} from '@wordpress/components'

import {
	store as coreDataStore,
	useEntityRecord,
} from '@wordpress/core-data'

import {
	useSelect,
	useDispatch,
} from '@wordpress/data'

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

import {
	ImportContext,
} from './ImportModal'

import PostTypeLabel from './PostTypeLabel'

import {
	EXPORTABLES,
} from './util'

interface TemplateImportButtonProps {
	post: any
	postType?: 'wp_template' | 'wp_template_part'
	/** Slug of the stylesheet that the data was exported from. */
	stylesheet?: string
	/** Slug of the stylesheet that is currently in use. */
	currentStylesheet?: string
}

const TemplateImportButton: React.FC<TemplateImportButtonProps> = ({
	post,
	postType = 'wp_template',
	stylesheet = 'ska-theme',
	currentStylesheet = 'ska-theme',
}) => {

	const {
		id,
		title = '',
		content = '',
	} = post

	const {
		importLabel,
		importedLabel,
		createLabel,
		createdLabel,
		overwriteLabel,
	} = useContext(ImportExportStringsContext)

	const [creating, setCreating] = useState(false)
	const [created, setCreated] = useState(false)

	const {
		saveEntityRecord,
	} = useDispatch(coreDataStore)

	const getPost = EXPORTABLES.find(({value}) => value === postType)?.getPost || ((...args: any) => false)
	const processedPost = getPost(post, postType, {stylesheet, currentStylesheet}) || {}
	const {
		id: ID = -1,
		...postToImport
	} = processedPost

	const {
		hasResolved,
		editedRecord,
		edit,
		status,
	} = useEntityRecord('postType', postType, ID)

	if(!hasResolved) {
		return null
	}

	if(status !== 'SUCCESS') {
		return (
			<Button
				variant='primary'
				size='compact'
				children={created ? createdLabel : createLabel}
				disabled={creating || created}
				onClick={async () => {
					setCreating(true)
					await saveEntityRecord('postType', postType, postToImport)
					setCreating(false)
					setCreated(true)
				}}
			/>
		)
	}

	// @ts-ignore
	const isSame = (editedRecord?.content || '') === content

	return (
		<Button
			variant='primary'
			size='compact'
			children={isSame ? importedLabel : overwriteLabel}
			disabled={isSame}
			onClick={() => {
				edit({content})
			}}
		/>
	)
}

interface PostImportButtonProps {
	postType?: string
	post: any
}

const PostImportButton: React.FC<PostImportButtonProps> = ({
	postType = 'post',
	post,
}) => {

	const {
		site = {},
	} = useContext(ImportContext)

	const {
		page_on_front = -1,
		page_for_posts = -1,
	} = site

	const {
		createLabel,
		createdLabel,
	} = useContext(ImportExportStringsContext)

	const [creating, setCreating] = useState(false)
	const [created, setCreated] = useState(false)

	const {
		editEntityRecord,
		saveEntityRecord,
	} = useDispatch(coreDataStore)

	const getPost = EXPORTABLES.find(({value}) => value === postType)?.getPost || ((...args: any) => false)
	const postToImport = getPost(post, postType)
	if(postToImport === false) {
		return null
	}

	return (
		<Button
			variant='primary'
			size='compact'
			children={created ? createdLabel : createLabel}
			disabled={creating || created}
			onClick={async () => {

				setCreating(true)
				const createdPost = await saveEntityRecord('postType', postType, postToImport)
				setCreating(false)
				setCreated(true)

				/** Set front page. */
				if(post.id === page_on_front) {
					editEntityRecord('root', 'site', undefined!, {
						show_on_front: 'page',
						page_on_front: createdPost.id,
					})
				}

				/** Set blog page. */
				if(post.id === page_for_posts) {
					editEntityRecord('root', 'site', undefined!, {
						page_for_posts: createdPost.id,
					})
				}
			}}
		/>
	)
}

export interface ContentImporterProps {
	/** Value to import. */
	valueToImport: any
	/** Slug of the stylesheet that the data was exported from. */
	stylesheet?: string
}

const ContentImporter: React.FC<ContentImporterProps> = ({
	valueToImport,
	stylesheet = 'ska-theme',
}) => {

	const {
		site = {},
	} = useContext(ImportContext)

	const {
		page_on_front = -1,
		page_for_posts = -1,
	} = site

	const {
		titleLabel,
		noTitleLabel,
	} = useContext(ImportExportStringsContext)

	const currentStylesheet = useSelect((select) => {
		const {getCurrentTheme} = select(coreDataStore)
		return getCurrentTheme()?.stylesheet || 'ska-theme'
	}, [])

	return (
		<View className='ska__import-export__content-importer'>
			<VStack spacing={8}>
				{Object.keys(valueToImport).map(postType => {

					const posts = valueToImport[postType]

					return (
						<View key={postType}>
							<h2>
								<PostTypeLabel postType={postType} />
							</h2>
							<Grid
								columns={3}
								align='center'
							>
								<h3>ID</h3>
								<h3>{titleLabel}</h3>
								<div></div>
							</Grid>
							<VStack>
								{posts.map((post: any) => {

									const key = post.id

									return (
										<Grid
											key={key}
											align='flex-start'
											columns={3}
										>
											<code>{post.id}</code>
											<div>
												{post?.title || noTitleLabel}
												{post.id === page_on_front && ` (Front page)`}
												{post.id === page_for_posts && ` (Blog page)`}
											</div>
											<HStack justify='flex-end'>
												{postType === 'wp_template' && (
													<TemplateImportButton
														post={post}
														stylesheet={stylesheet}
														currentStylesheet={currentStylesheet}
													/>
												)}
												{postType === 'wp_template_part' && (
													<TemplateImportButton
														post={post}
														postType='wp_template_part'
														stylesheet={stylesheet}
														currentStylesheet={currentStylesheet}
													/>
												)}
												{!['wp_template', 'wp_template_part'].includes(postType) && (
													<PostImportButton
														postType={postType}
														post={post}
													/>
												)}
											</HStack>
										</Grid>
									)
								})}
							</VStack>
						</View>
					)
				})}
			</VStack>
		</View>
	)
}

export default ContentImporter