// ** REACT Imports
import { 
  useState,
  // useRef,
  useEffect,
  // Suspense,
  // useCallback,
} from 'react'

// ** APOLLO Imports
import { 
  useReactiveVar, 
  useMutation,
} from '@apollo/client'
import { 
  isPreferencesDataSetVar, 
  preferencesDataVar,
  createPreferences,
  updatePreferences,
} from '#/lib/api/graphql/apollo'

// ** THREED DROPDOWN MENU Imports
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'


// ** ICON Imports
import {
	HamburgerMenuIcon,
	DotFilledIcon,
	CheckIcon,
	ChevronRightIcon,
} from '@radix-ui/react-icons'

// ==========================================================
// ** get app version from package.json
const appVersion: string = require('package.json').version

// ==========================================================
// ** RADIX-UI DropdownMenu
export const ThreeDDropdownMenu = () => {

  // ** USE PREFERENCES
  // const prefs = preferencesDataVar() // NO
  const prefs = useReactiveVar(preferencesDataVar) // YES !!
  // console.debug('%c⚙️ ThreeD Garden prefs', ccm.orangeAlert, prefs)

  // ** MUTATE PREFERENCES
  // ** CREATE
  // const mutationCreatePreferences = () => {
    const [formStatePreferences, setFormStatePreferences] = useState({
      title: 'PREFERENCES: defaultStatePreferences',
      content: 'HEY HEY HEY -- HEY HEY HEY',
      status: 'DRAFT',
      version: '0.17.1-alpha.0',
    })
    const [ doCreatePreferences ] = useMutation(createPreferences, {
      // variables: {...formStatePreferences}
      variables: {
        // preferencesId 
        title: formStatePreferences.title,
        content: formStatePreferences.content,
        status: formStatePreferences.status,
        // ** custom fields
        // version: formStatePreferences.version,
        version: appVersion + '_' + (new Date()).toISOString().replace(/[^0-9]/g, "").slice(0, -3),
        projectName: prefs.projectName,
        doAutoLoadData: prefs.doAutoLoadData,
        doAutoRotate: prefs.doAutoRotate,
        doWorldDebug: prefs.doWorldDebug,
        doWorldTesting: prefs.doWorldTesting,
        doWorldPhysics: prefs.doWorldPhysics,
        doWorldControl: prefs.doWorldControl,
        doWorldUnfollowCam: prefs.doWorldUnfollowCam,
        environmentBgBlur: prefs.environmentBgBlur,
        environmentPreset: prefs.environmentPreset,
        showPanelFirst: prefs.showPanelFirst,
        showPanelLast: prefs.showPanelLast,
        characterTrailColor: prefs.characterTrailColor,
        doCharacterAnimation: prefs.doCharacterAnimation,
      }
    })
  // }
  // ** UPDATE
  // const mutationUpdatePreferences = () => {
    const [ doUpdatePreferences ] = useMutation(updatePreferences, {
      // variables: {...prefs}
      variables: {
        id: prefs.preferencesId, // prefs.id,
        // preferencesId: prefs.preferencesId,
        title: prefs.title,
        content: prefs.content,
        status: 'PUBLISH', // prefs.status,
        // ** custom fields
        version: appVersion + '_' + (new Date()).toISOString().replace(/[^0-9]/g, "").slice(0, -3),
        projectName: prefs.projectName,
        doAutoLoadData: prefs.doAutoLoadData,
        doAutoRotate: prefs.doAutoRotate,
        doWorldDebug: prefs.doWorldDebug,
        doWorldTesting: prefs.doWorldTesting,
        doWorldPhysics: prefs.doWorldPhysics,
        doWorldControl: prefs.doWorldControl,
        doWorldUnfollowCam: prefs.doWorldUnfollowCam,
        environmentBgBlur: prefs.environmentBgBlur,
        environmentPreset: prefs.environmentPreset,
        showPanelFirst: prefs.showPanelFirst,
        showPanelLast: prefs.showPanelLast,
        characterTrailColor: prefs.characterTrailColor,
        doCharacterAnimation: prefs.doCharacterAnimation,
      }
    })
  // }

  // ==========================================================
  // ** doAutoLoadData: Boolean
  // **
  const handleDoAutoLoadData = () => {
    let newData = {...preferencesDataVar()} // latest prefs
    // console.debug('%c⚙️ doAutoLoadData newData', ccm.green, newData)
    newData.doAutoLoadData = !prefs.doAutoLoadData
    // console.debug('%c⚙️ doAutoLoadData newData UPDATED', ccm.green, newData)
    preferencesDataVar(newData)
    // console.debug('%c⚙️ doAutoLoadData preferencesDataVar', ccm.darkgreen, preferencesDataVar())
    // doUpdatePreferences()
  }

  // ==========================================================
  // ** doAutoRotate: Boolean
  // **
  const handleDoAutoRotate = () => {
    let newData = {...preferencesDataVar()} // latest prefs
    // console.debug('%c⚙️ doAutoRotate newData', ccm.green, newData)
    newData.doAutoRotate = !prefs.doAutoRotate
    // console.debug('%c⚙️ doAutoRotate newData UPDATED', ccm.green, newData)
    preferencesDataVar(newData)
    // console.debug('%c⚙️ doAutoRotate preferencesDataVar', ccm.darkgreen, preferencesDataVar())
    // doUpdatePreferences()
  }
  // ==========================================================
  // ** doWorldDebug: Boolean
  // **
  const handleDoWorldDebug = () => {
    let newData = {...preferencesDataVar()} // latest prefs
    // console.debug('%c⚙️ doWorldDebug newData', ccm.green, newData)
    newData.doWorldDebug = !prefs.doWorldDebug
    // console.debug('%c⚙️ doWorldDebug newData UPDATED', ccm.green, newData)
    preferencesDataVar(newData)
    // console.debug('%c⚙️ doWorldDebug preferencesDataVar', ccm.darkgreen, preferencesDataVar())
    // doUpdatePreferences()
  }

  // ==========================================================
  // ** doWorldTesting: Boolean
  // **
  const handleDoWorldTesting = () => {
    let newData = {...preferencesDataVar()} // latest prefs
    // console.debug('%c⚙️ doWorldTesting newData', ccm.green, newData)
    newData.doWorldTesting = !prefs.doWorldTesting
    // console.debug('%c⚙️ doWorldTesting newData UPDATED', ccm.green, newData)
    preferencesDataVar(newData)
    // console.debug('%c⚙️ doWorldTesting preferencesDataVar', ccm.darkgreen, preferencesDataVar())
    // doUpdatePreferences()
  }

  // ==========================================================
  // ** doWorldPhysics: Boolean
  // **
  const handleDoWorldPhysics = () => {
    let newData = {...preferencesDataVar()} // latest prefs
    // console.debug('%c⚙️ doWorldPhysics newData', ccm.green, newData)
    newData.doWorldPhysics = !prefs.doWorldPhysics
    // console.debug('%c⚙️ doWorldPhysics newData UPDATED', ccm.green, newData)
    preferencesDataVar(newData)
    // console.debug('%c⚙️ doWorldPhysics preferencesDataVar', ccm.darkgreen, preferencesDataVar())
    // doUpdatePreferences()
  }

  // ==========================================================
  // ** doWorldControl: Boolean
  // **
  const handleDoWorldControl = () => {
    let newData = {...preferencesDataVar()} // latest prefs
    // console.debug('%c⚙️ doWorldControl newData', ccm.green, newData)
    newData.doWorldControl = !prefs.doWorldControl
    // console.debug('%c⚙️ doWorldControl newData UPDATED', ccm.green, newData)
    preferencesDataVar(newData)
    // console.debug('%c⚙️ doWorldControl preferencesDataVar', ccm.darkgreen, preferencesDataVar())
    // doUpdatePreferences()
  }

  // ==========================================================
  // ** doWorldUnfollowCam: Boolean
  // **
  const handleDoWorldUnfollowCam = () => {
    let newData = {...preferencesDataVar()} // latest prefs
    // console.debug('%c⚙️ doWorldUnfollowCam newData', ccm.green, newData)
    newData.doWorldUnfollowCam = !prefs.doWorldUnfollowCam
    // console.debug('%c⚙️ doWorldUnfollowCam newData UPDATED', ccm.green, newData)
    preferencesDataVar(newData)
    // console.debug('%c⚙️ doWorldUnfollowCam preferencesDataVar', ccm.darkgreen, preferencesDataVar())
    // doUpdatePreferences()
  }

  // ==========================================================
  // ** showPanelFirst: Boolean
  // **
  const handleShowPanelFirst = () => {
    let newData = {...preferencesDataVar()} // latest prefs
    // console.debug('%c⚙️ showPanelFirst newData', ccm.green, newData)
    newData.showPanelFirst = !prefs.showPanelFirst
    // console.debug('%c⚙️ showPanelFirst newData UPDATED', ccm.green, newData)
    preferencesDataVar(newData)
    // console.debug('%c⚙️ showPanelFirst preferencesDataVar', ccm.darkgreen, preferencesDataVar())
    // doUpdatePreferences()
  }

  // ==========================================================
  // ** showPanelLast: Boolean
  // **
  const handleShowPanelLast = () => {
    let newData = {...preferencesDataVar()} // latest prefs
    // console.debug('%c⚙️ showPanelLast newData', ccm.green, newData)
    newData.showPanelLast = !prefs.showPanelLast
    // console.debug('%c⚙️ showPanelLast newData UPDATED', ccm.green, newData)
    preferencesDataVar(newData)
    // console.debug('%c⚙️ showPanelLast preferencesDataVar', ccm.darkgreen, preferencesDataVar())
    // doUpdatePreferences()
  }
  
  // ==========================================================
  // ** projectName: String
  // **
  const handleProjectName = () => {
    let newData = {...preferencesDataVar()} // latest prefs
    // console.debug('%c⚙️ projectName newData', ccm.green, newData)
    newData.projectName = prefs.projectName
    // console.debug('%c⚙️ projectName newData UPDATED', ccm.green, newData)
    preferencesDataVar(newData)
    // console.debug('%c⚙️ projectName preferencesDataVar', ccm.darkgreen, preferencesDataVar())
    // doUpdatePreferences()
  }

  // ==========================================================
  // ** environmentPreset: String
  // **
  const handleEnvironmentPreset = () => {
    let newData = {...preferencesDataVar()} // latest prefs
    // console.debug('%c⚙️ environmentPreset newData', ccm.green, newData)
    newData.environmentPreset = prefs.environmentPreset
    // console.debug('%c⚙️ environmentPreset newData UPDATED', ccm.green, newData)
    preferencesDataVar(newData)
    // console.debug('%c⚙️ environmentPreset preferencesDataVar', ccm.darkgreen, preferencesDataVar())
    // doUpdatePreferences()
  }

  // ==========================================================
  // ** environmentBgBlur: Float
  // **
  const handleEnvironmentBgBlur = () => {
    let newData = {...preferencesDataVar()} // latest prefs
    // console.debug('%c⚙️ environmentBgBlur newData', ccm.green, newData)
    newData.environmentBgBlur = prefs.environmentBgBlur
    // console.debug('%c⚙️ environmentBgBlur newData UPDATED', ccm.green, newData)
    preferencesDataVar(newData)
    // console.debug('%c⚙️ environmentBgBlur preferencesDataVar', ccm.darkgreen, preferencesDataVar())
    // doUpdatePreferences()
  }

  // ==========================================================
  // ** characterTrailColor: String
  // **
  const handleCharacterTrailColor = () => {
    let newData = {...preferencesDataVar()} // latest prefs
    // console.debug('%c⚙️ characterTrailColor newData', ccm.green, newData)
    newData.characterTrailColor = prefs.characterTrailColor
    // console.debug('%c⚙️ characterTrailColor newData UPDATED', ccm.green, newData)
    preferencesDataVar(newData)
    // console.debug('%c⚙️ characterTrailColor preferencesDataVar', ccm.darkgreen, preferencesDataVar())
    // doUpdatePreferences()
  }

  // ==========================================================
  // ** doCharacterAnimation: Boolean
  // **
  const handleDoCharacterAnimation = () => {
    let newData = {...preferencesDataVar()} // latest prefs
    // console.debug('%c⚙️ doCharacterAnimation newData', ccm.green, newData)
    newData.doCharacterAnimation = !prefs.doCharacterAnimation
    // console.debug('%c⚙️ doCharacterAnimation newData UPDATED', ccm.green, newData)
    preferencesDataVar(newData)
    // console.debug('%c⚙️ doCharacterAnimation preferencesDataVar', ccm.darkgreen, preferencesDataVar())
    // doUpdatePreferences()
  }

  // ==========================================================
  // ** react state vars
  // **
  // type TUILayout = '3dView' | 'planView' | 'default'
  const [currentUILayout, setCurrentUILayout] = useState('default') // [MM] preferencesUILayoutVar()
  // type TToolMode = 'pointer' | 'walls' | 'floor' | 'roof' | 'dimension' | 'text' | 'background' | 'ground' | 'defaults'
  const [currentToolMode, setCurrentToolMode] = useState('pointer') // [MM] preferencesToolModeVar()
  

  // ==========================================================
  // ** RETURN JSX
  return (
    <DropdownMenu.Root>

      <DropdownMenu.Trigger asChild>
        <button className='IconButton' aria-label='Set Preferences'>
          <HamburgerMenuIcon />
        </button>
      </DropdownMenu.Trigger>

      <DropdownMenu.Portal>

        <DropdownMenu.Content 
          className='DropdownMenuContent' 
          // sideOffset={5}
        >
          <DropdownMenu.Item 
            className='DropdownMenuItem'
            onClick={() => doUpdatePreferences()}
          >
            Save Session State
          </DropdownMenu.Item>

          <DropdownMenu.Separator className='DropdownMenuSeparator' />

          {/* <DropdownMenu.CheckboxItem
            className='DropdownMenuCheckboxItem'
            // checked={doShowControls}
            checked={prefs.doWorldControls}
            onCheckedChange={setDoShowControls} // TODO: SET to Apollo Reactive Var property
          >
            <DropdownMenu.ItemIndicator className='DropdownMenuItemIndicator'>
              <CheckIcon />
            </DropdownMenu.ItemIndicator>
            Show  Controls <div className='RightSlot'>⌘+B</div>
          </DropdownMenu.CheckboxItem> */}

          <DropdownMenu.CheckboxItem
            className='DropdownMenuCheckboxItem'
            checked={prefs.doAutoRotate}
            onCheckedChange={handleDoAutoRotate}
          >
            <DropdownMenu.ItemIndicator className='DropdownMenuItemIndicator'>
              <CheckIcon />
            </DropdownMenu.ItemIndicator>
            Do Auto Rotate
          </DropdownMenu.CheckboxItem>

          <DropdownMenu.CheckboxItem
            className='DropdownMenuCheckboxItem'
            checked={prefs.doAutoLoadData}
            onCheckedChange={handleDoAutoLoadData}
          >
            <DropdownMenu.ItemIndicator className='DropdownMenuItemIndicator'>
              <CheckIcon />
            </DropdownMenu.ItemIndicator>
            Do Auto Load Data
          </DropdownMenu.CheckboxItem>

          <DropdownMenu.CheckboxItem
            className='DropdownMenuCheckboxItem'
            checked={prefs.doWorldDebug}
            onCheckedChange={handleDoWorldDebug}
          >
            <DropdownMenu.ItemIndicator className='DropdownMenuItemIndicator'>
              <CheckIcon />
            </DropdownMenu.ItemIndicator>
            Do World Debug
          </DropdownMenu.CheckboxItem>

          <DropdownMenu.CheckboxItem
            className='DropdownMenuCheckboxItem'
            checked={prefs.doWorldTesting}
            onCheckedChange={handleDoWorldTesting}
          >
            <DropdownMenu.ItemIndicator className='DropdownMenuItemIndicator'>
              <CheckIcon />
            </DropdownMenu.ItemIndicator>
            Do World Testing
          </DropdownMenu.CheckboxItem>

          <DropdownMenu.CheckboxItem
            className='DropdownMenuCheckboxItem'
            checked={prefs.doWorldPhysics}
            onCheckedChange={handleDoWorldPhysics}
          >
            <DropdownMenu.ItemIndicator className='DropdownMenuItemIndicator'>
              <CheckIcon />
            </DropdownMenu.ItemIndicator>
            Do World Physics
          </DropdownMenu.CheckboxItem>

          <DropdownMenu.CheckboxItem
            className='DropdownMenuCheckboxItem'
            checked={prefs.doWorldControl}
            onCheckedChange={handleDoWorldControl}
          >
            <DropdownMenu.ItemIndicator className='DropdownMenuItemIndicator'>
              <CheckIcon />
            </DropdownMenu.ItemIndicator>
            Do World Control
          </DropdownMenu.CheckboxItem>

          <DropdownMenu.CheckboxItem
            className='DropdownMenuCheckboxItem'
            checked={prefs.doWorldUnfollowCam}
            onCheckedChange={handleDoWorldUnfollowCam}
          >
            <DropdownMenu.ItemIndicator className='DropdownMenuItemIndicator'>
              <CheckIcon />
            </DropdownMenu.ItemIndicator>
            Do World Unfollow Cam
          </DropdownMenu.CheckboxItem>

          <DropdownMenu.Separator className='DropdownMenuSeparator' />

          <DropdownMenu.Label className='DropdownMenuLabel'>
            Tool Mode
          </DropdownMenu.Label>
          <DropdownMenu.RadioGroup 
            value={currentToolMode} 
            onValueChange={setCurrentToolMode}
          >
            <DropdownMenu.RadioItem
              className='DropdownMenuRadioItem'
              value='pointer'
            >
              <DropdownMenu.ItemIndicator className='DropdownMenuItemIndicator'>
                <DotFilledIcon />
              </DropdownMenu.ItemIndicator>
              Pointer
            </DropdownMenu.RadioItem>
            <DropdownMenu.RadioItem
              className='DropdownMenuRadioItem'
              value='crop'
            >
              <DropdownMenu.ItemIndicator className='DropdownMenuItemIndicator'>
                <DotFilledIcon />
              </DropdownMenu.ItemIndicator>
              Crop
            </DropdownMenu.RadioItem>
          </DropdownMenu.RadioGroup>

          <DropdownMenu.Separator className='DropdownMenuSeparator' />

          <DropdownMenu.Label className='DropdownMenuLabel'>
            UI Layout
          </DropdownMenu.Label>
          <DropdownMenu.RadioGroup 
            value={currentUILayout} 
            onValueChange={setCurrentUILayout}
          >
            <DropdownMenu.RadioItem
              className='DropdownMenuRadioItem'
              value='default'
            >
              <DropdownMenu.ItemIndicator className='DropdownMenuItemIndicator'>
                <DotFilledIcon />
              </DropdownMenu.ItemIndicator>
              Default
            </DropdownMenu.RadioItem>
            <DropdownMenu.RadioItem
              className='DropdownMenuRadioItem'
              value='planView'
            >
              <DropdownMenu.ItemIndicator className='DropdownMenuItemIndicator'>
                <DotFilledIcon />
              </DropdownMenu.ItemIndicator>
              Plan View
            </DropdownMenu.RadioItem>
          </DropdownMenu.RadioGroup>

          <DropdownMenu.Separator className='DropdownMenuSeparator' />

          {/* <DropdownMenu.Arrow className='DropdownMenuArrow' /> */}

          {/* <DropdownMenu.Separator className='DropdownMenuSeparator' /> */}

          {/* <DropdownMenu.Item 
            className='DropdownMenuItem'
            // onClick={() => handleShowModalAbout()}
          >
            About <div className='RightSlot'>⌘+A</div>
          </DropdownMenu.Item>
          <DropdownMenu.Item 
            className='DropdownMenuItem'
            // onClick={() => handleShowModal3dModel()}
          >
            3D Model <div className='RightSlot'>⌘+N</div>
          </DropdownMenu.Item>
          <DropdownMenu.Item 
            className='DropdownMenuItem'
            // onClick={() => handleShowModalShare()}
          >
            Share <div className='RightSlot'>⌘+N</div>
          </DropdownMenu.Item>
          <DropdownMenu.Item 
            className='DropdownMenuItem'
            // onClick={() => handleShowModalLoading()}
          >
            Loading <div className='RightSlot'>⌘+N</div>
          </DropdownMenu.Item>
          <DropdownMenu.Item 
            className='DropdownMenuItem' 
            disabled
          >
            New Private Modal <div className='RightSlot'>⇧+⌘+N</div>
          </DropdownMenu.Item>
          <DropdownMenu.Sub>
            <DropdownMenu.SubTrigger className='DropdownMenuSubTrigger'>
              Files
              <div className='RightSlot'>
                <ChevronRightIcon />
              </div>
            </DropdownMenu.SubTrigger>
            <DropdownMenu.Portal>
              <DropdownMenu.SubContent
                className='DropdownMenuSubContent'
                sideOffset={2}
                alignOffset={-5}
              >
                <DropdownMenu.Item className='DropdownMenuItem'>
                  Save Page As… <div className='RightSlot'>⌘+S</div>
                </DropdownMenu.Item>
                <DropdownMenu.Item className='DropdownMenuItem'>
                  Create Shortcut…
                </DropdownMenu.Item>
                <DropdownMenu.Item className='DropdownMenuItem'>
                  Name Window…
                </DropdownMenu.Item>
                <DropdownMenu.Separator className='DropdownMenu.Separator' />
                <DropdownMenu.Item className='DropdownMenuItem'>
                  Developer Tools
                </DropdownMenu.Item>
              </DropdownMenu.SubContent>
            </DropdownMenu.Portal>
          </DropdownMenu.Sub>
          <DropdownMenu.Sub>
            <DropdownMenu.SubTrigger className='DropdownMenuSubTrigger'>
              Edits
              <div className='RightSlot'>
                <ChevronRightIcon />
              </div>
            </DropdownMenu.SubTrigger>
            <DropdownMenu.Portal>
              <DropdownMenu.SubContent
                className='DropdownMenuSubContent'
                sideOffset={2}
                alignOffset={-5}
              >
                <DropdownMenu.Item className='DropdownMenuItem'>
                  Save Page As… <div className='RightSlot'>⌘+S</div>
                </DropdownMenu.Item>
                <DropdownMenu.Item className='DropdownMenuItem'>
                  Create Shortcut…
                </DropdownMenu.Item>
                <DropdownMenu.Item className='DropdownMenuItem'>
                  Name Window…
                </DropdownMenu.Item>
                <DropdownMenu.Separator className='DropdownMenu.Separator' />
                <DropdownMenu.Item className='DropdownMenuItem'>
                  Developer Tools
                </DropdownMenu.Item>
              </DropdownMenu.SubContent>
            </DropdownMenu.Portal>
          </DropdownMenu.Sub>
          <DropdownMenu.Sub>
            <DropdownMenu.SubTrigger className='DropdownMenuSubTrigger'>
              Plan Views
              <div className='RightSlot'>
                <ChevronRightIcon />
              </div>
            </DropdownMenu.SubTrigger>
            <DropdownMenu.Portal>
              <DropdownMenu.SubContent
                className='DropdownMenuSubContent'
                sideOffset={2}
                alignOffset={-5}
              >
                <DropdownMenu.Item className='DropdownMenuItem'>
                  Save Page As… <div className='RightSlot'>⌘+S</div>
                </DropdownMenu.Item>
                <DropdownMenu.Item className='DropdownMenuItem'>
                  Create Shortcut…
                </DropdownMenu.Item>
                <DropdownMenu.Item className='DropdownMenuItem'>
                  Name Window…
                </DropdownMenu.Item>
                <DropdownMenu.Separator className='DropdownMenu.Separator' />
                <DropdownMenu.Item className='DropdownMenuItem'>
                  Developer Tools
                </DropdownMenu.Item>
              </DropdownMenu.SubContent>
            </DropdownMenu.Portal>
          </DropdownMenu.Sub>
          <DropdownMenu.Sub>
            <DropdownMenu.SubTrigger className='DropdownMenuSubTrigger'>
              3D Views
              <div className='RightSlot'>
                <ChevronRightIcon />
              </div>
            </DropdownMenu.SubTrigger>
            <DropdownMenu.Portal>
              <DropdownMenu.SubContent
                className='DropdownMenuSubContent'
                sideOffset={2}
                alignOffset={-5}
              >
                <DropdownMenu.Item className='DropdownMenuItem'>
                  Save Page As… <div className='RightSlot'>⌘+S</div>
                </DropdownMenu.Item>
                <DropdownMenu.Item className='DropdownMenuItem'>
                  Create Shortcut…
                </DropdownMenu.Item>
                <DropdownMenu.Item className='DropdownMenuItem'>
                  Name Window…
                </DropdownMenu.Item>
                <DropdownMenu.Separator className='DropdownMenu.Separator' />
                <DropdownMenu.Item className='DropdownMenuItem'>
                  Developer Tools
                </DropdownMenu.Item>
              </DropdownMenu.SubContent>
            </DropdownMenu.Portal>
          </DropdownMenu.Sub> */}

        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  )
}