import { Lock, UserRound } from 'lucide-react-native'
import { useState } from 'react'
import { Image, Text, View } from 'react-native'
import { AForm, AFormItem, AInput } from '@/components/common/ao'
import { IconQq, IconWeixin, IconZhiwen } from '@/components/iconfont'
import { Button, ButtonText } from '@/components/ui/button'
import {
  Checkbox,
  CheckboxIcon,
  CheckboxIndicator,
  CheckboxLabel,
} from '@/components/ui/checkbox'
import { Divider } from '@/components/ui/divider'

import { CheckIcon } from '@/components/ui/icon'

import alovaInstance from '@/request'
import { useToast } from '@/utils/toast'

interface LoginForm {
  username: string
  password: string
  rememberMe?: boolean
  socialType?: 'qq' | 'weixin' | 'fingerprint'
}

export default function AuthLogin() {
  const toast = useToast()

  const [form, setForm] = useState<LoginForm>({
    username: '',
    password: '',
    rememberMe: true,
  })
  const handleInputChange = (field: keyof LoginForm, value: string) => {
    setForm(prev => ({ ...prev, [field]: value }))
  }
  const defaultLogin = () => {
    alovaInstance.Post('/auth/login/default', {
      title: 'foo',
      body: 'bar',
      userId: 1,
    }).then((res) => {
      console.log(res)
    })
  }

  return (

    <View className="flex flex-col items-center px-6 h-full">
      <Image
        source={require('@/static/images/logo.png')}
        style={{ width: 120, height: 120 }}
        className="my-12"
      />

      <AForm form={form}>
        <AFormItem label="账号">
          <AInput
            value={form.username}
            onChange={text => handleInputChange('username', text)}
          />
        </AFormItem>
        <AFormItem label="密码">
          <AInput
            isPassword
            value={form.password}
            onChange={text => handleInputChange('password', text)}
          />
        </AFormItem>
      </AForm>

      <View className="w-full flex-row justify-between items-center mb-6">
        <Checkbox
          value="rememberMe"
          isChecked={form.rememberMe}
          onChange={checked =>
            setForm(prev => ({ ...prev, rememberMe: checked }))}
        >
          <CheckboxIndicator>
            <CheckboxIcon as={CheckIcon} />
          </CheckboxIndicator>
          <CheckboxLabel>记住我</CheckboxLabel>
        </Checkbox>

        <Text className="text-blue-500">
          忘记密码?
        </Text>
      </View>

      <Button className="w-full" onPress={() => defaultLogin()}>
        <ButtonText>登录</ButtonText>
      </Button>

      <View className="flex-row items-center my-8 w-full">
        <View className="flex-1">
          <Divider />
        </View>

        <Text className="mx-3 text-gray-500 text-sm">社交账号</Text>

        <View className="flex-1">
          <Divider />
        </View>
      </View>

      <View className="w-full flex-row justify-between items-center">
        <IconQq size={32} />
        <IconWeixin size={32} />
        <IconZhiwen size={32} />
      </View>

    </View>
  )
}