import { ListItem, Switch } from '@my/ui'
import type { SettingsItemProps } from '@my/ui'
import { useState } from 'react'
import { settingsStore } from '../../store'

export interface SettingsAlertProps {
  title: string
  message: string
}

export const SettingsSwitch = (props: SettingsItemProps<'switch'>) => {
  const { id, label, icon, description, disabled, options } = props
  const { defaultValue } = options
  const [value, setValue] = useState(!!defaultValue)

  const handleToggle = disabled
    ? undefined
    : () => {
        setValue((prev) => {
          const next = !prev
          settingsStore.setSetting(props.id, next)
          return next
        })
      }

  return (
    <>
      <ListItem
        hoverTheme
        pressTheme
        title={<>{label}</>}
        subTitle={description}
        icon={icon}
        disabled={disabled}
        onPress={handleToggle}
        iconAfter={
          <Switch
            id={id}
            size={'$2'}
            onCheckedChange={handleToggle}
            disabled={disabled}
            checked={value}
          >
            <Switch.Thumb animation="100ms" />
          </Switch>
        }
      />
    </>
  )
}
