import { ListItem, Sheet } from '@my/ui'
import type { SettingsItemProps, SettingsItemType } from '@my/ui'
import { useState, ComponentType } from 'react'

export type WithSettingsSheetProps<T extends SettingsItemType> = SettingsItemProps<T> & {
  onClose: () => void
}

export const withSettingsSheet = <T extends SettingsItemType>(
  SheetComponent: ComponentType<WithSettingsSheetProps<T>>
) => {
  return (props: SettingsItemProps<T>) => {
    const { label, icon, description, disabled, options } = props
    const [open, setOpen] = useState(false)

    const openSheet = () => setOpen(true)
    const closeSheet = () => setOpen(false)

    return (
      <>
        <ListItem
          hoverTheme
          pressTheme
          title={label}
          subTitle={description}
          icon={icon}
          disabled={disabled}
          onPress={openSheet}
        />

        <Sheet
          forceRemoveScrollEnabled={open}
          open={open}
          onOpenChange={setOpen}
          modal={true}
          snapPointsMode="fit"
          dismissOnSnapToBottom
          zIndex={100_000}
          animation="100ms"
        >
          <Sheet.Overlay
            animation="lazy"
            backgroundColor="$shadow6"
            enterStyle={{ opacity: 0 }}
            exitStyle={{ opacity: 0 }}
          />

          <Sheet.Handle />
          <Sheet.Frame
            padding="$4"
            justifyContent="center"
            alignItems="center"
            gap="$5"
            style={{ height: 'auto' }}
          >
            <SheetComponent {...props} onClose={closeSheet} />
          </Sheet.Frame>
        </Sheet>
      </>
    )
  }
}
