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

// 方式1: 使用 withFormItem 高阶组件
const FormSwitch = Form.withFormItem(Switch, 'FormSwitch');

// 方式3: 使用 createFormComponents 批量创建
const FormComponents = Form.createFormComponents({
  CustomInput: Input,
});

type FormData = {
  username: string;
  email: string;
  category: string;
  birthday: Date;
  isVip: boolean;
  customField: string;
};

const HOCExampleDemo: React.FC = () => {
  const form = Form.useForm<FormData>({
    defaultValues: {
      username: '',
      email: '',
      category: '',
      birthday: new Date(),
      isVip: false,
      customField: '',
    },
  });

  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="1. 使用 withFormItem 创建的组件"
          style={styles.cardStyle}
          noSpace
        >
          <Form.Input
            name="username"
            label="用户名"
            placeholder="请输入用户名"
            rules={{ required: '用户名是必填项' }}
          />

          <Form.Select
            name="category"
            label="分类"
            placeholder="请选择分类"
            options={[
              { label: '前端开发', value: 'frontend' },
              { label: '后端开发', value: 'backend' },
              { label: '移动开发', value: 'mobile' },
            ]}
            rules={{ required: '请选择分类' }}
          />

          <Form.Options
            name="color"
            label="选择颜色"
            options={[
              { label: '红色', value: 'red' },
              { label: '蓝色', value: 'blue' },
            ]}
            columns={3}
            single
            rules={{ required: '请选择颜色' }}
            showIcon
          />

          <Form.DatePicker
            name="birthday"
            label="生日"
            placeholder="请选择生日"
            rules={{ required: '请选择生日' }}
          />

          <FormSwitch
            name="isVip"
            label="VIP用户"
            rules={{
              validate: (value: boolean) =>
                value === true || '必须是VIP用户才能继续',
            }}
          />
        </Card>

        <Card
          title="3. 使用 createFormComponents 批量创建的组件"
          style={styles.cardStyle}
          noSpace
        >
          <FormComponents.CustomInput
            name="customField"
            label="自定义字段"
            placeholder="这是批量创建的组件"
            rules={{
              required: '自定义字段是必填项',
              minLength: {
                value: 5,
                message: '至少输入5个字符',
              },
            }}
          />
        </Card>

        <Card title="4. 传统组合方式对比" style={styles.cardStyle} noSpace>
          <Form.Item
            name="email"
            label="邮箱（传统方式）"
            rules={{
              required: '邮箱是必填项',
              pattern: {
                value: /^\S+@\S+$/i,
                message: '请输入有效邮箱',
              },
            }}
          >
            <Input placeholder="请输入邮箱" />
          </Form.Item>
        </Card>

        <View style={styles.buttonContainer}>
          <Button onPress={form.handleSubmit(onSubmit, onError)}>
            提交表单
          </Button>
          <Button onPress={() => form.reset()} style={styles.resetButton}>
            重置
          </Button>
        </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',
  },
  cardStyle: {
    marginBottom: 16,
  },
  buttonContainer: {
    marginTop: 30,
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
  submitButton: {
    backgroundColor: '#007AFF',
    paddingHorizontal: 30,
  },
  resetButton: {
    backgroundColor: '#666',
    paddingHorizontal: 30,
  },
  infoContainer: {
    marginTop: 30,
    padding: 15,
    backgroundColor: '#e8f4f8',
    borderRadius: 8,
    borderLeftWidth: 4,
    borderLeftColor: '#007AFF',
  },
  infoTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 8,
    color: '#333',
  },
  infoText: {
    fontSize: 14,
    lineHeight: 20,
    color: '#666',
  },
  mockSelect: {
    height: 40,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 4,
    paddingHorizontal: 12,
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  mockSelectText: {
    fontSize: 16,
    color: '#333',
  },
  mockDatePicker: {
    height: 40,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 4,
    paddingHorizontal: 12,
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  mockDateText: {
    fontSize: 16,
    color: '#333',
  },
});

export default HOCExampleDemo;