import { createContext, forwardRef, MouseEvent, ReactNode } from "react"
import { DropListProps } from "./interface"
import {applyListCss, deleteCssProps } from "./style"
import { TriggerColorScheme } from "../trigger"
import { applyBoxStyle } from "../model/src/style"
import { useTheme } from "@mui/material"




export const DropListContext = createContext<{
  onClickItem?: (
    key: string | number,
    clickedNode: ReactNode,
    event: MouseEvent,
  ) => void
  hoverColorScheme?: TriggerColorScheme
}>({})

export const DropList = forwardRef<HTMLDivElement, DropListProps>(
  (props, ref) => {
    const {
      children,
      onClickItem,
      hoverColorScheme = "grayBlue",
      ...otherProps
    } = props
 const theme = useTheme()
    return (
      <div
        ref={ref}
        css={[applyListCss(theme), applyBoxStyle(props,theme)]}
        {...deleteCssProps(otherProps)}
      >
        <DropListContext.Provider
          value={{
            onClickItem,
            hoverColorScheme,
          }}
        >
          {children}
        </DropListContext.Provider>
      </div>
    )
  },
)

DropList.displayName = "DropList"
