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

type FormData = {
  username: string;
  email: string;
  password: string;
  confirmPassword: string;
  description: string;
  feedback: string;
};

const InputExamplesDemo: React.FC = () => {
  const form = Form.useForm<FormData>({
    defaultValues: {
      username: '',
      email: '',
      password: '',
      confirmPassword: '',
      description: '',
      feedback: '',
    },
  });

  const [usernameFixed, setUsernameFixed] =
    React.useState<string>('外部指定的用户名');
  const onSubmit = (data: FormData) => {
    console.log('Form submitted:', data);
    Toast(
      `提交成功 用户名: ${data.username}\n邮箱: ${
        data.email
      }\n个人简介: ${data.description.substring(0, 20)}...`
    );
  };

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

  return (
    <View style={styles.container}>
      <ScrollView
        style={styles.scrollContainer}
        keyboardShouldPersistTaps="handled"
      >
        <Form.FormProvider {...form}>
          {/* 组合用法示例 */}
          <Card
            title="1. 组合用法（Form.Item + Input）"
            style={styles.cardStyle}
            noSpace
          >
            <Form.Item
              name="username"
              label="用户名"
              rules={{ required: '用户名是必填项' }}
              message="注册用户获得100美元"
            >
              <Input placeholder="请输入用户名" />
            </Form.Item>
            <Form.Select
              name="test"
              selectConfirmButtonText="确认"
              accessibilityLabel="选择测试"
              options={[
                {
                  label: '选项1',
                  value: '1',
                },
                {
                  label: '选项2',
                  value: '2',
                },
              ]}
            />

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

          {/* 快捷用法示例 */}
          <Card
            title="2. 快捷用法（Form.Input）"
            style={styles.cardStyle}
            noSpace
          >
            <Form.Input
              name="password"
              label="密码"
              showQuestionIcon
              tooltip="密码必须包含字母、数字和特殊字符"
              notice={{
                text: '请输入密码',
                leftIcon: true,
              }}
              message="注册用户获得100美元"
              placeholder="请输入密码"
              secureTextEntry
              rules={{
                required: '密码是必填项',
                minLength: {
                  value: 6,
                  message: '密码至少6位',
                },
              }}
            />

            <Form.Input
              name="confirmPassword"
              label="确认密码"
              placeholder="请再次输入密码"
              secureTextEntry
              rules={{
                required: '确认密码是必填项',
                validate: (value: string) => {
                  const password = form.getValues('password');
                  return value === password || '两次密码不匹配';
                },
              }}
            />
          </Card>

          {/* TextArea 示例 */}
          <Card
            title="3. TextArea 多行文本输入示例"
            style={styles.cardStyle}
            noSpace
          >
            <Form.Item
              name="description"
              label="个人简介"
              message="请简要介绍一下您自己"
              rules={{
                required: '个人简介是必填项',
                minLength: {
                  value: 10,
                  message: '个人简介至少10个字符',
                },
                maxLength: {
                  value: 200,
                  message: '个人简介不能超过200个字符',
                },
              }}
            >
              <Input.TextArea
                placeholder="请输入您的个人简介..."
                maxLength={200}
                showCount
                rows={4}
              />
            </Form.Item>

            <Form.TextArea
              name="feedback"
              label="意见反馈"
              placeholder="请输入您的宝贵意见和建议..."
              maxLength={500}
              showCount
              rows={3}
              rules={{
                validate: (value: string) => {
                  if (value && value.length < 5) {
                    return '意见反馈至少需要5个字符';
                  }
                  return true;
                },
              }}
              message="您的反馈对我们很重要"
            />
          </Card>
        </Form.FormProvider>
        <Card title="4. 传入 value 优先级示例" style={styles.cardStyle} noSpace>
          <View style={{ padding: 12 }}>
            <Text style={{ marginBottom: 8 }}>当前值：{usernameFixed}</Text>
            <Form.Input
              control={form.control}
              name="usernameFixed"
              label="用户名（外部指定）"
              placeholder="此处应以外部值为准"
              value={usernameFixed}
              onChange={(v) => setUsernameFixed(v)}
            />
          </View>
        </Card>
      </ScrollView>

      <View style={styles.fixedButtonContainer}>
        <Button onPress={form.handleSubmit(onSubmit, onError)}>提交</Button>
        <View style={styles.buttonSpacer} />
        <Button fill={Fill.dashed} onPress={() => form.reset()}>
          重置
        </Button>
        <BottomSafeArea />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  scrollContainer: {
    flex: 1,
    padding: 20,
    paddingBottom: 0,
  },
  cardStyle: {
    marginBottom: 16,
  },
  fixedButtonContainer: {
    backgroundColor: '#fff',
    paddingHorizontal: 20,
    paddingTop: 16,
    paddingBottom: 30,
    borderTopWidth: 1,
    borderTopColor: '#e5e5e5',
    flexDirection: 'row',
    justifyContent: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: -2,
    },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 8,
  },
  buttonSpacer: {
    width: 20,
  },
});

export default InputExamplesDemo;