import React, { useEffect, useMemo, useState } from 'react'
import * as Menubar from '@radix-ui/react-menubar'
import { CheckIcon, DotFilledIcon } from '@radix-ui/react-icons'

import classes from './styles.module.css'
import { BodyEditor } from '../../editor'
import i18n, { IsChina } from '../../i18n'
import { Helper } from '../../environments/online/helper'
import { uploadImage } from '../../utils/transfer'
import { getCurrentTime } from '../../utils/time'
import useForceUpdate from '../../hooks/useFoceUpdate'
import classNames from 'classnames'
import { useLanguageSelect } from '../../hooks'
import { ShowContextMenu } from '../ContextMenu'
import { ShowDialog } from '../Dialog'
import { SetCDNBase } from '../../utils/detect'

const {
    MenubarRoot,
    MenubarTrigger,
    MenubarContent,
    MenubarItem,
    MenubarCheckboxItem,
    MenubarRadioItem,
    MenubarItemIndicator,
    MenubarSeparator,
    RightSlot,
    Blue,
    inset,
} = classes
const MenubarDemo: React.FC<{
    editor: BodyEditor
    onChangeBackground: (url: string) => void
    onScreenShot: (data: Record<string, { src: string; title: string }>) => void
    style?: React.CSSProperties
}> = ({ editor, onChangeBackground, onScreenShot, style }) => {
    const forceUpdate = useForceUpdate()
    const helper = useMemo(() => new Helper(editor), [editor])
    const { current, changeLanguage, languagList } = useLanguageSelect()

    useEffect(() => {
        const show = (data: { mouseX: number; mouseY: number }) => {
            ShowContextMenu({ ...data, editor, onChangeBackground })
        }
        editor?.ContextMenuEventManager.AddEventListener(show)
        return () => {
            editor?.ContextMenuEventManager.RemoveEventListener(show)
        }
    }, [editor])

    return (
        <Menubar.Root className={MenubarRoot} style={style}>
            <Menubar.Menu>
                <Menubar.Trigger className={MenubarTrigger}>
                    {i18n.t('File')}
                </Menubar.Trigger>
                <Menubar.Portal>
                    <Menubar.Content
                        className={MenubarContent}
                        align="start"
                        sideOffset={5}
                        alignOffset={-3}
                    >
                        <Menubar.Item
                            className={MenubarItem}
                            onSelect={() => editor.ResetScene()}
                        >
                            {i18n.t('Reset Scene')}
                        </Menubar.Item>
                        <Menubar.Item
                            className={MenubarItem}
                            onSelect={() => editor.LoadScene()}
                        >
                            {i18n.t('Load Scene')}
                        </Menubar.Item>
                        <Menubar.Item
                            className={MenubarItem}
                            onSelect={() => editor.SaveScene()}
                        >
                            {i18n.t('Save Scene')}
                        </Menubar.Item>
                        <Menubar.Item
                            className={MenubarItem}
                            onSelect={() => helper.LoadGesture()}
                        >
                            {i18n.t('Load Gesture')}
                        </Menubar.Item>
                        <Menubar.Item
                            className={MenubarItem}
                            onSelect={() => helper.SaveGesture()}
                        >
                            {i18n.t('Save Gesture')}
                        </Menubar.Item>
                        <Menubar.Item
                            className={MenubarItem}
                            onSelect={() => {
                                helper.GenerateSceneURL()
                            }}
                        >
                            {i18n.t('Generate Scene URL')}
                        </Menubar.Item>
                        <Menubar.Separator className={MenubarSeparator} />
                        <Menubar.Item
                            className={MenubarItem}
                            onSelect={() => editor.RestoreLastSavedScene()}
                        >
                            {i18n.t('Restore Last Scene')}
                        </Menubar.Item>
                        <Menubar.Separator className={MenubarSeparator} />
                        <Menubar.Item
                            className={MenubarItem}
                            onSelect={() =>
                                helper.DetectFromImage(onChangeBackground)
                            }
                        >
                            {i18n.t('Detect From Image')}
                        </Menubar.Item>
                        {IsChina() ? (
                            <Menubar.Item
                                className={MenubarItem}
                                onSelect={() => {
                                    SetCDNBase(false)
                                    helper.DetectFromImage(onChangeBackground)
                                }}
                            >
                                {i18n.t('Detect From Image') + ' [中国]'}
                            </Menubar.Item>
                        ) : undefined}
                        <Menubar.Item
                            className={MenubarItem}
                            onSelect={() => helper.SetRandomPose()}
                        >
                            {i18n.t('Set Random Pose')}
                        </Menubar.Item>
                        <Menubar.Item
                            className={MenubarItem}
                            onSelect={async () => {
                                const image = await uploadImage()
                                if (image) onChangeBackground(image)
                            }}
                        >
                            {i18n.t('Set Background Image')}
                        </Menubar.Item>
                        <Menubar.Item className={MenubarItem}>
                            v{__APP_VERSION__}
                        </Menubar.Item>
                    </Menubar.Content>
                </Menubar.Portal>
            </Menubar.Menu>

            <Menubar.Menu>
                <Menubar.Trigger className={MenubarTrigger}>
                    {i18n.t('Edit')}
                </Menubar.Trigger>
                <Menubar.Portal>
                    <Menubar.Content
                        className={MenubarContent}
                        align="start"
                        sideOffset={5}
                        alignOffset={-3}
                    >
                        <Menubar.Item
                            className={MenubarItem}
                            onSelect={() => editor.Undo()}
                        >
                            {i18n.t('Undo')}
                            <div className={RightSlot}>⌘ Z</div>
                        </Menubar.Item>
                        <Menubar.Item
                            className={MenubarItem}
                            onSelect={() => editor.Redo()}
                        >
                            {i18n.t('Redo')}
                            <div className={RightSlot}>⇧ ⌘ Z</div>
                        </Menubar.Item>
                        <Menubar.Separator className={MenubarSeparator} />
                        <Menubar.Item
                            className={MenubarItem}
                            onSelect={() => editor.CopySelectedBody()}
                        >
                            {i18n.t('Duplicate Skeleton')}
                            <div className={RightSlot}>⇧ D</div>
                        </Menubar.Item>
                        <Menubar.Item
                            className={MenubarItem}
                            onSelect={() => editor.RemoveBody()}
                        >
                            {i18n.t('Delete Skeleton')}
                            <div className={RightSlot}>{i18n.t('Del')}</div>
                        </Menubar.Item>
                    </Menubar.Content>
                </Menubar.Portal>
            </Menubar.Menu>

            <Menubar.Menu>
                <Menubar.Trigger className={MenubarTrigger}>
                    {i18n.t('View')}
                </Menubar.Trigger>
                <Menubar.Portal>
                    <Menubar.Content
                        className={MenubarContent}
                        align="start"
                        sideOffset={5}
                        alignOffset={-14}
                    >
                        <Menubar.Item
                            className={classNames(MenubarItem, inset)}
                            onSelect={() => {
                                editor.LockView()
                            }}
                        >
                            {i18n.t('Lock View')}
                        </Menubar.Item>
                        <Menubar.Item
                            className={classNames(MenubarItem, inset)}
                            onSelect={() => {
                                editor.UnlockView()
                            }}
                        >
                            {i18n.t('Unlock View')}
                        </Menubar.Item>
                        <Menubar.Item
                            className={classNames(MenubarItem, inset)}
                            onSelect={() => {
                                editor.RestoreView()
                            }}
                        >
                            {i18n.t('Restore View')}
                        </Menubar.Item>
                    </Menubar.Content>
                </Menubar.Portal>
            </Menubar.Menu>

            <Menubar.Menu>
                <Menubar.Trigger className={MenubarTrigger}>
                    {i18n.t('Setting')}
                </Menubar.Trigger>
                <Menubar.Portal>
                    <Menubar.Content
                        className={MenubarContent}
                        align="start"
                        sideOffset={5}
                        alignOffset={-14}
                    >
                        <Menubar.CheckboxItem
                            className={classNames(MenubarCheckboxItem, inset)}
                            checked={editor.MoveMode}
                            onCheckedChange={() => {
                                editor.MoveMode = !editor.MoveMode
                                forceUpdate()
                            }}
                        >
                            <Menubar.ItemIndicator
                                className={MenubarItemIndicator}
                            >
                                <CheckIcon />
                            </Menubar.ItemIndicator>
                            {i18n.t('Move Mode')}
                        </Menubar.CheckboxItem>
                        <Menubar.CheckboxItem
                            className={classNames(MenubarCheckboxItem, inset)}
                            checked={editor.FreeMode}
                            onCheckedChange={() => {
                                editor.FreeMode = !editor.FreeMode
                                forceUpdate()
                            }}
                        >
                            <Menubar.ItemIndicator
                                className={MenubarItemIndicator}
                            >
                                <CheckIcon />
                            </Menubar.ItemIndicator>
                            {i18n.t('Free Mode')}
                        </Menubar.CheckboxItem>
                        <Menubar.CheckboxItem
                            className={classNames(MenubarCheckboxItem, inset)}
                            checked={editor.OnlyHand}
                            onCheckedChange={() => {
                                editor.OnlyHand = !editor.OnlyHand
                                forceUpdate()
                            }}
                        >
                            <Menubar.ItemIndicator
                                className={MenubarItemIndicator}
                            >
                                <CheckIcon />
                            </Menubar.ItemIndicator>
                            {i18n.t('Only Hand')}
                        </Menubar.CheckboxItem>
                        <Menubar.CheckboxItem
                            className={classNames(MenubarCheckboxItem, inset)}
                            checked={editor.enablePreview}
                            onCheckedChange={() => {
                                editor.enablePreview = !editor.enablePreview
                                forceUpdate()
                            }}
                        >
                            <Menubar.ItemIndicator
                                className={MenubarItemIndicator}
                            >
                                <CheckIcon />
                            </Menubar.ItemIndicator>
                            {i18n.t('Show Preview')}
                        </Menubar.CheckboxItem>
                        <Menubar.CheckboxItem
                            className={classNames(MenubarCheckboxItem, inset)}
                            checked={editor.EnableHelper}
                            onCheckedChange={() => {
                                editor.EnableHelper = !editor.EnableHelper
                                forceUpdate()
                            }}
                        >
                            <Menubar.ItemIndicator
                                className={MenubarItemIndicator}
                            >
                                <CheckIcon />
                            </Menubar.ItemIndicator>
                            {i18n.t('Show Grid')}
                        </Menubar.CheckboxItem>
                    </Menubar.Content>
                </Menubar.Portal>
            </Menubar.Menu>

            <Menubar.Menu>
                <Menubar.Trigger className={MenubarTrigger}>
                    {i18n.t('Feedback')}
                </Menubar.Trigger>
                <Menubar.Portal>
                    <Menubar.Content
                        className={MenubarContent}
                        align="start"
                        sideOffset={5}
                        alignOffset={-14}
                    >
                        <Menubar.Item
                            className={classNames(MenubarItem, inset)}
                            onSelect={() => {
                                helper.FeedbackByGithub()
                            }}
                        >
                            Github
                        </Menubar.Item>
                        <Menubar.Item
                            className={classNames(MenubarItem, inset)}
                            onSelect={() => {
                                helper.FeedbackByQQ()
                            }}
                        >
                            QQ
                        </Menubar.Item>
                    </Menubar.Content>
                </Menubar.Portal>
            </Menubar.Menu>
            <Menubar.Menu>
                <Menubar.Trigger className={MenubarTrigger}>
                    Language
                </Menubar.Trigger>
                <Menubar.Portal>
                    <Menubar.Content
                        className={MenubarContent}
                        align="start"
                        sideOffset={5}
                        alignOffset={-14}
                    >
                        <Menubar.RadioGroup
                            value={current}
                            onValueChange={(v) => {
                                changeLanguage(v)
                            }}
                        >
                            {languagList.map((item) => (
                                <Menubar.RadioItem
                                    className={classNames(
                                        MenubarRadioItem,
                                        inset
                                    )}
                                    key={item}
                                    value={item}
                                >
                                    <Menubar.ItemIndicator
                                        className={MenubarItemIndicator}
                                    >
                                        <DotFilledIcon />
                                    </Menubar.ItemIndicator>
                                    {item}
                                </Menubar.RadioItem>
                            ))}
                        </Menubar.RadioGroup>
                    </Menubar.Content>
                </Menubar.Portal>
            </Menubar.Menu>
            <Menubar.Menu>
                <Menubar.Trigger
                    className={classNames(MenubarTrigger, Blue)}
                    onClick={async () => {
                        const image = editor.MakeImages()
                        const result = Object.fromEntries(
                            Object.entries(image).map(([name, imgData]) => [
                                name,
                                {
                                    src: imgData,
                                    title: name + '_' + getCurrentTime(),
                                },
                            ])
                        )
                        onScreenShot(result)
                    }}
                >
                    {i18n.t('Generate')}
                </Menubar.Trigger>
            </Menubar.Menu>
        </Menubar.Root>
    )
}

export default MenubarDemo