import { Button, Input, XStack, YStack, styled, Text, View } from '@my/ui'
import { withSettingsSheet, WithSettingsSheetProps } from './SettingsSheet'
import { useState } from 'react'
import { settingsStore } from '../../store'

const Title = styled(Text, {
  color: '$color',
  fontSize: '$6',
})

const Description = styled(Text, {
  color: '$placeholderColor',
  fontSize: '$4',
})

const Container = styled(YStack, {
  width: '100%',
  // TODO 这是一个 bug 会导致输入框顶部莫名奇妙的空间
  height: 380,
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  gap: '$4',
  // backgroundColor: '#333',
  paddingTop: 0,
  paddingBottom: '$6',
})

const Footer = styled(XStack, {
  justifyContent: 'flex-end',
  alignItems: 'center',
  gap: '$2',
})

const SettingsInputComponent = (props: WithSettingsSheetProps<'input'>) => {
  const { label, icon, description, disabled, options, onClose } = props
  const [value, setValue] = useState('')
  /**
   * 确认按钮事件
   * @param value
   */
  const handleConfirm = (value: string) => {
    // TODO: 这里可以处理确认逻辑，如回调、校验等
    settingsStore.setSetting(props.id, value)
    onClose()
  }

  return (
    <Container>
      <Title>{label}</Title>
      <Input
        width="100%"
        size={'$4'}
        placeholder={`请输入${label}...`}
        value={value}
        onChangeText={setValue}
      />
      {description && <Description>{description}</Description>}
      <Footer>
        <Button onPress={onClose}>取消</Button>
        <Button themeInverse onPress={() => handleConfirm(value)}>
          确定
        </Button>
      </Footer>
    </Container>
  )
}

export const SettingsInput = withSettingsSheet(SettingsInputComponent)
