import {
	createElement,
	Fragment,
	Component,
	useEffect,
	useMemo,
	createPortal,
	useState,
	useCallback,
	createContext,
	useReducer
} from '@wordpress/element'
import PlacementsBuilder from './PlacementsBuilder'
import DraggableItems from './DraggableItems'
import ViewSwitch from './ViewSwitch'
import AvailableItems from './AvailableItems'
import { builderReducer } from './builderReducer'
import { useDeviceManager } from '../../components/useDeviceManager'
import ctEvents from 'ct-events'

export const DragDropContext = createContext({})

const BuilderRoot = ({
	value: allBuilderSections,
	option,
	onChange: onBuilderValueChange
}) => {
	const [builderValueCollection, builderValueDispatchInternal] = useReducer(
		builderReducer,
		allBuilderSections
	)

	const builderValue = useMemo(
		() =>
			builderValueCollection.sections.find(
				({ id }) => id === builderValueCollection.current_section
			),
		[builderValueCollection]
	)

	const [isDragging, setIsDragging] = useState(false)

	// desktop | mobile
	const [currentView, setCurrentView] = useDeviceManager({
		withTablet: false
	})

	const inlinedItemsFromBuilder = builderValue[currentView].reduce(
		(currentItems, { id, placements }) => [
			...currentItems,
			...(placements || []).reduce(
				(c, { id, items }) => [...c, ...items],
				[]
			)
		],
		[]
	)

	const builderValueDispatch = useCallback(
		payload =>
			builderValueDispatchInternal({
				...payload,
				onBuilderValueChange
			}),
		[builderValueDispatchInternal, onBuilderValueChange]
	)

	const getList = useCallback(id => {
		return []

		const [barId, placementId] = id.split(':')

		return builderValue[currentView]
			.find(({ id }) => id === barId)
			.placements.find(({ id }) => id === placementId).items
	}, [])

	const setList = useCallback(
		lists =>
			builderValueDispatch({
				type: 'SET_LIST',
				onBuilderValueChange,
				payload: {
					currentView,
					lists
				}
			}),
		[currentView, onBuilderValueChange]
	)

	const handleHeaderFetch = useCallback(({ newHeaderId }) => {
		builderValueDispatch({
			type: 'PICK_BUILDER_SECTION',
			payload: {
				id: newHeaderId,
				silent: true
			}
		})
	}, [])

	useEffect(() => {
		ctEvents.on('blocksy:header:fetch-latest-id', handleHeaderFetch)

		return () => {
			ctEvents.off('blocksy:header:fetch-latest-id', handleHeaderFetch)

			builderValueDispatch({
				type: 'BUILDER_FORCED_REFRESH',
				payload: {}
			})

			setTimeout(() => {
				const getDocument = x =>
					x.document || x.contentDocument || x.contentWindow.document
				const document = getDocument(
					wp.customize.previewer.container.find('iframe')[0]
				)

				const newHeaderId = wp.customize.previewer.container
					.find('iframe')[0]
					.contentDocument.querySelector('header#header').dataset.id

				const {
					__forced_dynamic_header__,
					__should_refresh__,
					...old
				} = wp.customize('header_placements')()

				wp.customize('header_placements')({
					...old,

					current_section: newHeaderId
				})
			}, 1000)
		}
	}, [])

	return (
		<Fragment>
			<DragDropContext.Provider
				value={{
					currentView,
					isDragging,
					setIsDragging,
					setList,
					builderValueDispatch,
					builderValue,
					onChange: ({ id, value }) => setList({ [id]: value }),
					builderValueCollection
				}}>
				<AvailableItems
					allBuilderSections={allBuilderSections}
					builderValue={builderValue}
					inlinedItemsFromBuilder={inlinedItemsFromBuilder}
					builderValueDispatch={builderValueDispatch}
				/>

				{createPortal(
					<div className="ct-builder-header">
						<ViewSwitch
							currentView={currentView}
							setCurrentView={setCurrentView}
						/>

						<PlacementsBuilder
							builderValueWithView={builderValue[currentView]}
							view={currentView}
						/>
					</div>,
					document.querySelector('.ct-panel-builder')
				)}
			</DragDropContext.Provider>
		</Fragment>
	)
}

export default BuilderRoot