import React, { useRef } from 'react';
import { View, StyleSheet } from 'react-native';
import { ScrollView } from 'react-native';
import Form from '../index';
import Input from '../../Input';
import Switch from '../../Switch';
import Button from '../../Button';
import BottomSafeArea from '../../BottomSafeArea';
import { Fill, Toast } from '@xrnjs/ui';
import Card from '_global/Card';

type FormData = {
  username: string;
  email: string;
  isVip: boolean;
  notifications: boolean;
};

// 使用高阶组件创建表单组件
const FormSwitch = Form.withFormItem(Switch, 'FormSwitch');

const RefDemo: React.FC = () => {
  const form = Form.useForm<FormData>({
    defaultValues: {
      username: '',
      email: '',
      isVip: false,
      notifications: true,
    },
  });
  const refUser = useRef<any>(null);
  const refVip = useRef<any>(null);

  const onSubmit = (data: FormData) => {
    console.log('Form submitted:', data);
    Toast(`提交成功! 用户名: ${data.username}`);
  };

  const onError = (errors: Record<string, any>) => {
    console.log('Form errors:', errors);

    // 演示：当有错误时，可以通过 ref 定位到第一个错误字段
    const firstErrorField = Object.keys(errors)[0];
    if (firstErrorField) {
      console.log(`First error field: ${firstErrorField}`);
      // 这里可以实现滚动到错误字段的逻辑
    }
  };

  const handleScrollToField = () => {
    // 演示如何手动滚动到某个字段
    // 由于 field.ref 现在指向 Field 组件，可以实现精确定位
    Toast('Ref 现在正确指向 Field 组件，支持错误定位');
    console.log('Input Ref', refUser.current);
    refUser.current?.focus();
    console.log('VIP Ref', refVip.current);
  };

  return (
    <ScrollView style={styles.container}>
      <Form.FormProvider {...form}>
        <Card title="1. 基础表单字段" style={styles.cardStyle} noSpace>
          <Form.Input
            name="username"
            label="用户名"
            rules={{ required: '用户名是必填项' }}
            placeholder="请输入用户名"
            ref={refUser}
          />

          <Form.Item
            name="email"
            label="邮箱地址"
            rules={{
              required: '邮箱是必填项',
              pattern: {
                value: /^\S+@\S+$/i,
                message: '请输入有效邮箱地址',
              },
            }}
          >
            <Input placeholder="请输入邮箱" />
          </Form.Item>
        </Card>

        <Card title="2. 高阶组件示例" style={styles.cardStyle} noSpace>
          <FormSwitch
            name="isVip"
            label="VIP用户"
            message="开启VIP获得更多权益"
            ref={refVip}
          />

          <FormSwitch
            name="notifications"
            label="接收通知"
            message="开启后将接收系统通知"
          />
        </Card>

        <View style={styles.buttonContainer}>
          <Button onPress={form.handleSubmit(onSubmit, onError)}>
            提交表单
          </Button>

          <Button
            fill={Fill.outline}
            onPress={() => form.reset()}
            style={styles.resetButton}
          >
            重置
          </Button>

          <Button
            fill={Fill.outline}
            onPress={handleScrollToField}
            style={styles.demoButton}
          >
            演示 Ref 定位
          </Button>
        </View>
      </Form.FormProvider>

      <BottomSafeArea />
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
    textAlign: 'center',
    color: '#333',
  },
  description: {
    fontSize: 14,
    color: '#666',
    marginBottom: 20,
    lineHeight: 20,
    textAlign: 'center',
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: '600',
    marginTop: 20,
    marginBottom: 10,
    color: '#333',
  },
  cardStyle: {
    marginBottom: 16,
  },
  buttonContainer: {
    marginTop: 30,
    gap: 15,
  },
  resetButton: {
    marginTop: 10,
  },
  demoButton: {
    marginTop: 10,
  },
  infoCardStyle: {
    marginTop: 16,
    backgroundColor: '#e8f4f8',
    borderLeftWidth: 4,
    borderLeftColor: '#1890ff',
  },
  infoText: {
    fontSize: 14,
    color: '#666',
    lineHeight: 20,
  },
});

export default RefDemo;