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 { 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;
  allowNotifications: boolean;
  agreeTerms: boolean;
};

const TooltipDemo: React.FC = () => {
  const form = Form.useForm<FormData>({
    defaultValues: {
      username: '',
      email: '',
      password: '',
      allowNotifications: false,
      agreeTerms: false,
    },
  });

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

  return (
    <ScrollView style={styles.container}>
      <Form.FormProvider {...form}>
        {/* 基础 tooltip 示例 */}
        <Card title="1. 基础 Tooltip 示例" style={styles.cardStyle} noSpace>
          <Form.Item
            name="username"
            label="用户名"
            tooltip="用户名将作为您的唯一标识，注册后不可修改"
            rules={{ required: '用户名是必填项' }}
          >
            <Input placeholder="请输入用户名" />
          </Form.Item>

          <Form.Item
            name="email"
            label="邮箱地址"
            tooltip="我们将向此邮箱发送重要通知和验证信息"
            rules={{
              required: '邮箱是必填项',
              pattern: {
                value: /^\S+@\S+$/i,
                message: '请输入有效邮箱地址',
              },
            }}
          >
            <Input placeholder="请输入邮箱" />
          </Form.Item>
        </Card>

        {/* 带标题的 tooltip 示例 */}
        <Card title="2. 带标题的 Tooltip 示例" style={styles.cardStyle} noSpace>
          <Form.Item
            name="password"
            label="密码"
            tooltip="密码必须包含至少8个字符，包括大小写字母、数字和特殊字符，以确保账户安全"
            tooltipTitle="密码安全提示"
            rules={{
              required: '密码是必填项',
              minLength: {
                value: 8,
                message: '密码至少8位',
              },
            }}
          >
            <Input placeholder="请输入密码" secureTextEntry />
          </Form.Item>
        </Card>

        {/* 自定义确认按钮文本的 tooltip 示例 */}
        <Card
          title="3. 自定义确认按钮的 Tooltip 示例"
          style={styles.cardStyle}
          noSpace
        >
          <Form.Item
            name="allowNotifications"
            label="允许推送通知"
            tooltip="开启后您将收到重要消息提醒、系统更新通知等。您可以随时在设置中关闭此功能"
            tooltipTitle="关于推送通知"
            confirmButtonText="我知道了"
          >
            <Switch />
          </Form.Item>

          <Form.Item
            name="agreeTerms"
            label="同意服务条款"
            tooltip="请仔细阅读我们的用户协议和隐私政策。继续使用本服务即表示您同意遵守相关条款"
            tooltipTitle="服务条款说明"
            confirmButtonText="已阅读"
            rules={{
              validate: (value: boolean) =>
                value === true || '必须同意服务条款才能继续',
            }}
          >
            <Switch />
          </Form.Item>
        </Card>

        {/* 复杂场景 tooltip 示例 */}
        <Card title="4. 复杂场景 Tooltip 示例" style={styles.cardStyle} noSpace>
          <Form.Item
            name="email"
            label="企业邮箱"
            tooltip="企业邮箱用于接收工作相关通知和重要文件。请使用您的公司邮箱地址，避免使用个人邮箱。邮箱格式示例：yourname@company.com"
            tooltipTitle="企业邮箱使用指南"
            confirmButtonText="明白了"
            message="建议使用公司统一邮箱域名"
            rules={{
              required: '企业邮箱是必填项',
              pattern: {
                value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
                message: '请输入有效的邮箱地址',
              },
            }}
          >
            <Input placeholder="请输入企业邮箱地址" />
          </Form.Item>
        </Card>

        <View style={styles.buttonContainer}>
          <Button onPress={form.handleSubmit(onSubmit)}>提交表单</Button>
          <View style={styles.buttonSpacer} />
          <Button fill={Fill.dashed} onPress={() => form.reset()}>
            重置表单
          </Button>
        </View>
      </Form.FormProvider>

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  cardStyle: {
    marginBottom: 16,
  },
  buttonContainer: {
    marginTop: 30,
    flexDirection: 'row',
    justifyContent: 'center',
  },
  buttonSpacer: {
    width: 20,
  },
});

export default TooltipDemo;