import React, { useEffect } from 'react'
import Merge from 'react-codemirror-merge'
import CodeMirror from '@uiw/react-codemirror'
import * as shopify from '@shopify/lang-jsonc'
import { ClientOnly } from 'remix-utils/client-only'
import { ErrorBoundary } from 'react-error-boundary'
import { githubDark, githubLight } from '@uiw/codemirror-theme-github'
import { useState } from 'react'
import { cn } from '~/utils/cn'

import Fallback from './fallback'

interface EditorProps {
	isDisabled?: boolean
	value: string
	onChange: (value: string) => void
}

export function Editor(props: EditorProps) {
	const [light, setLight] = useState(false)
	useEffect(() => {
		const theme = window.matchMedia('(prefers-color-scheme: light)')
		setLight(theme.matches)
		theme.addEventListener('change', (theme) => {
			setLight(theme.matches)
		})
	})

	return (
		<div className={cn(
			'border border-gray-200 dark:border-gray-700',
			'rounded-b-lg rounded-tr-lg mb-2 z-10 overflow-x-hidden',
		)}>
			<div className="overflow-y-scroll h-editor text-sm">
				<ErrorBoundary fallback={
					<p className={cn(
						'w-full h-full flex items-center justify-center',
						'text-gray-400 dark:text-gray-500 text-xl',
					)}>
						Failed to load the editor.
					</p>
				}>
					<ClientOnly fallback={<Fallback acl={props.value} />}>
					{() => (
						<CodeMirror
							value={props.value}
							height="100%"
							extensions={[shopify.jsonc()]}
							style={{ height: "100%" }}
							theme={light ? githubLight : githubDark}
							onChange={(value) => props.onChange(value)}
						/>
					)}
					</ClientOnly>
				</ErrorBoundary>
			</div>
		</div>
	)
}

interface DifferProps {
	left: string
	right: string
}

export function Differ(props: DifferProps) {
	const [light, setLight] = useState(false)
	useEffect(() => {
		const theme = window.matchMedia('(prefers-color-scheme: light)')
		setLight(theme.matches)
		theme.addEventListener('change', (theme) => {
			setLight(theme.matches)
		})
	})

	return (
		<div className={cn(
			'border border-gray-200 dark:border-gray-700',
			'rounded-b-lg rounded-tr-lg mb-2 z-10 overflow-x-hidden',
		)}>
			<div className="overflow-y-scroll h-editor text-sm">
				{props.left === props.right ? (
					<p className={cn(
						'w-full h-full flex items-center justify-center',
						'text-gray-400 dark:text-gray-500 text-xl',
					)}>
						No changes
					</p>
				) : (
					<ErrorBoundary fallback={
						<p className={cn(
							'w-full h-full flex items-center justify-center',
							'text-gray-400 dark:text-gray-500 text-xl',
						)}>
							Failed to load the editor.
						</p>
					}>
						<ClientOnly fallback={<Fallback acl={props.right} />}>
						{() => (
							<Merge
								orientation="a-b"
								theme={light ? githubLight : githubDark}
							>
								<Merge.Original
									readOnly
									value={props.left}
									extensions={[shopify.jsonc()]}
								/>
								<Merge.Modified
									readOnly
									value={props.right}
									extensions={[shopify.jsonc()]}
								/>
							</Merge>
						)}
						</ClientOnly>
					</ErrorBoundary>
				)}
			</div>
		</div>
	)
}