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

// 测试不同类型的yup schema
const complexSchema = yup.object({
  // 基础必填字段
  requiredString: yup.string().required('必填字符串'),

  // 可选字段
  optionalString: yup.string(),

  // 必填数字
  requiredNumber: yup.number().required('必填数字'),

  // 可选数字
  optionalNumber: yup.number(),

  // 必填布尔值
  requiredBoolean: yup.boolean().required('必填布尔值'),

  // 可选布尔值
  optionalBoolean: yup.boolean(),

  // 必填邮箱
  requiredEmail: yup.string().email('无效邮箱').required('邮箱必填'),

  // 可选邮箱
  optionalEmail: yup.string().email('无效邮箱'),

  // 必填数组
  requiredArray: yup.array().min(1, '至少选择一项').required('数组必填'),

  // 可选数组
  optionalArray: yup.array(),

  // 嵌套对象
  nestedObject: yup
    .object({
      nestedRequired: yup.string().required('嵌套必填'),
      nestedOptional: yup.string(),
    })
    .required('嵌套对象必填'),

  // 可选嵌套对象
  optionalNestedObject: yup.object({
    nestedField: yup.string(),
  }),

  // 条件字段 - lazy schema
  conditionalField: yup.lazy((value) =>
    typeof value === 'string' ? yup.string().required('条件必填') : yup.number()
  ),

  // 自定义验证
  customValidation: yup
    .string()
    .test('custom', '自定义验证失败', (value) => value !== 'invalid')
    .required('自定义必填'),
});

const YupSchemaTestDemo: React.FC = () => {
  const form = Form.useForm<any>({
    defaultValues: {
      requiredString: '',
      optionalString: '',
      requiredNumber: undefined,
      optionalNumber: undefined,
      requiredBoolean: undefined,
      optionalBoolean: false,
      requiredEmail: '',
      optionalEmail: '',
      requiredArray: [],
      optionalArray: [],
      nestedObject: {
        nestedRequired: '',
        nestedOptional: '',
      },
      optionalNestedObject: {
        nestedField: '',
      },
      conditionalField: '',
      customValidation: '',
    },
    resolver: yupResolver(complexSchema), // 用于自动推断必填状态
  });

  const onSubmit = (data: FormData) => {
    console.log('Form submitted:', data);
    Toast('提交成功' + JSON.stringify(data, null, 2));
  };

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

  return (
    <ScrollView style={styles.container}>
      <Form.FormProvider {...form}>
        <Card title="基础字段测试" style={styles.cardStyle} noSpace>
          {/* 必填字符串 - 应该显示必填标记 */}
          <Form.Input
            name="requiredString"
            label="必填字符串"
            placeholder="这应该显示必填标记"
          />

          {/* 可选字符串 - 应该显示选填标记 */}
          <Form.Input
            name="optionalString"
            label="可选字符串"
            placeholder="这应该显示选填标记"
          />

          {/* 必填数字 - 应该显示必填标记 */}
          <Form.Input
            name="requiredNumber"
            label="必填数字"
            placeholder="这应该显示必填标记"
            keyboardType="numeric"
          />

          {/* 可选数字 - 应该显示选填标记 */}
          <Form.Input
            name="optionalNumber"
            label="可选数字"
            placeholder="这应该显示选填标记"
            keyboardType="numeric"
          />
        </Card>

        <Card title="布尔值字段测试" style={styles.cardStyle} noSpace>
          {/* 必填布尔值 - 应该显示必填标记 */}
          <Form.Item name="requiredBoolean" label="必填布尔值">
            <Switch />
          </Form.Item>

          {/* 可选布尔值 - 应该显示选填标记 */}
          <Form.Item name="optionalBoolean" label="可选布尔值">
            <Switch />
          </Form.Item>
        </Card>

        <Card title="邮箱字段测试" style={styles.cardStyle} noSpace>
          {/* 必填邮箱 - 应该显示必填标记 */}
          <Form.Input
            name="requiredEmail"
            label="必填邮箱"
            placeholder="这应该显示必填标记"
            keyboardType="email-address"
          />

          {/* 可选邮箱 - 应该显示选填标记 */}
          <Form.Input
            name="optionalEmail"
            label="可选邮箱"
            placeholder="这应该显示选填标记"
            keyboardType="email-address"
          />
        </Card>

        <Card title="嵌套对象测试" style={styles.cardStyle} noSpace>
          {/* 嵌套必填字段 - 应该显示必填标记 */}
          <Form.Input
            name="nestedObject.nestedRequired"
            label="嵌套必填字段"
            placeholder="这应该显示必填标记"
          />

          {/* 嵌套可选字段 - 应该显示选填标记 */}
          <Form.Input
            name="nestedObject.nestedOptional"
            label="嵌套可选字段"
            placeholder="这应该显示选填标记"
          />
        </Card>

        <Card title="条件字段测试" style={styles.cardStyle} noSpace>
          {/* 条件字段 (lazy schema) - 可能无法正确推断 */}
          <Form.Input
            name="conditionalField"
            label="条件字段 (Lazy Schema)"
            placeholder="lazy schema 可能无法推断"
          />

          {/* 自定义验证字段 - 应该显示必填标记 */}
          <Form.Input
            name="customValidation"
            label="自定义验证字段"
            placeholder="这应该显示必填标记"
          />
        </Card>

        <View style={styles.buttonContainer}>
          <Form.Item name="submit" style={styles.submitContainer}>
            <Button onPress={form.handleSubmit(onSubmit, onError)}>
              提交测试
            </Button>
          </Form.Item>
        </View>
      </Form.FormProvider>

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
    color: '#333',
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: '600',
    marginTop: 20,
    marginBottom: 10,
    color: '#666',
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
    paddingBottom: 5,
  },
  cardStyle: {
    marginBottom: 16,
  },
  buttonContainer: {
    marginTop: 30,
    alignItems: 'center',
  },
  submitContainer: {
    width: '100%',
  },
  submitButton: {
    backgroundColor: '#007AFF',
    color: 'white',
    padding: 15,
    textAlign: 'center',
    borderRadius: 8,
    fontSize: 16,
    fontWeight: 'bold',
  },
  infoCardStyle: {
    marginTop: 16,
    backgroundColor: '#e8f4f8',
    borderLeftWidth: 4,
    borderLeftColor: '#007AFF',
  },
  infoText: {
    fontSize: 14,
    lineHeight: 20,
    color: '#666',
  },
});

export default YupSchemaTestDemo;