import { ListItem, Toast, useToastController, useToastState, YStack } from '@my/ui'
import type { SettingsItemProps } from '@my/ui'
import { useCallback } from 'react'

export interface SettingsAlertProps {
  title: string
  message: string
}

export const SettingsPage = (props: SettingsItemProps<'alert'>) => {
  const { label, icon, description, disabled, options } = props
  const toast = useToastController()

  const doAlert = useCallback(() => {
    const { type, message = '', description = '' } = options
    toast.show(message, {
      message: description,
      type,
      demo: true,
    })
  }, [options])

  return (
    <>
      <CurrentToast />
      <ListItem
        hoverTheme
        pressTheme
        title={label}
        subTitle={description}
        icon={icon}
        onPress={disabled ? undefined : () => doAlert()}
      />
    </>
  )
}

const CurrentToast = () => {
  const currentToast = useToastState()

  if (!currentToast || currentToast.isHandledNatively) return null

  return (
    <Toast
      animation="100ms"
      key={currentToast.id}
      duration={currentToast.duration}
      enterStyle={{ opacity: 0, transform: [{ translateY: 100 }] }}
      exitStyle={{ opacity: 0, transform: [{ translateY: 100 }] }}
      transform={[{ translateY: 0 }]}
      opacity={1}
      scale={1}
      viewportName={currentToast.viewportName}
    >
      <YStack>
        <Toast.Title>{currentToast.title}</Toast.Title>
        {!!currentToast.message && <Toast.Description>{currentToast.message}</Toast.Description>}
      </YStack>
    </Toast>
  )
}
