import React from 'react';
import { View, StyleSheet } from 'react-native';
import Form from '../index';
import Input from '../../Input';
import Switch from '../../Switch';
import Radio from '../../Radio';
import Checkbox from '../../Checkbox';
import Button from '../../Button';
import { Values } from '../../AmountInput/interface';
import { ScrollView } from 'react-native';
import BottomSafeArea from '../../BottomSafeArea';
import { Fill, Toast } from '@xrnjs/ui';
import Card from '_global/Card';
import AmountInput from '../../AmountInput';
import OptionGroup from '../../OptionGroup';
import Options from '../../Options';

type FormData = {
  username: string;
  email: string;
  password: string;
  confirmPassword: string;
  description: string;
  feedback: string;
  transferAmount: Values;
  depositAmount: Values;
  isVip: boolean;
  notifications: boolean;
  gender: string;
  city: string;
  plan: string;
  hobbies: string[];
  agreements: boolean;
  permissions: string[];
  tags: string[];
  category: string;
  priority: number;
  withdrawMethod: string;
  paymentMethods: string[];
  cardType: string;
  // 新增字段
  birthDate: string;
  vacationPeriod: [string, string];
  loginPassword: string;
  country: string;
  skills: string[];
  projectTags: string[];
};

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

const FormBasicDemo: React.FC = () => {
  const form = Form.useForm({
    defaultValues: {
      username1: '',
      username: '',
      email: '',
      password: '',
      confirmPassword: '',
      description: '',
      feedback: '',
      transferAmount: { amount: '', currency: 'USD' },
      depositAmount: { amount: '', currency: 'CNY' },
      isVip: false,
      notifications: true,
      gender: '',
      city: 'beijing',
      plan: 'basic',
      hobbies: [],
      agreements: false,
      permissions: ['read'],
      tags: [],
      category: '',
      priority: 1,
      withdrawMethod: '',
      paymentMethods: [],
      cardType: '',
      // 新增字段默认值
      birthDate: '',
      vacationPeriod: ['', ''] as [string, string],
      loginPassword: '',
      country: '',
      skills: [],
      projectTags: [],
    },
  });

  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"
      >
        {/* 显式传递 control prop 示例 */}
        <Card
          title="0. 显式传递 control prop（Form.Input）"
          style={styles.cardStyle}
          noSpace
        >
          <Form.Input
            name="username1"
            label="用户名1 (显式 control)"
            placeholder="请输入用户名"
            control={form.control}
            rules={{ required: '用户名1是必填项' }}
            message="显式传递 control prop 到 Form.Input"
          />
        </Card>

        <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.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="密码"
              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>

          {/* AmountInput 示例 */}
          <Card
            title="4. AmountInput 金额输入示例"
            style={styles.cardStyle}
            noSpace
          >
            <Form.AmountInput
              name="transferAmount"
              label="转账金额"
              message="请输入转账金额和选择货币类型"
              showSelectCurrency
              showBalance
              availableBalanceText="可用余额"
              options={[
                {
                  label: 'USD',
                  subLabel: '美元',
                  value: 'USD',
                  contentLabel: '10000',
                  balance: '10000',
                  prefixIcon:
                    'https://images.unsplash.com/photo-1567945716310-4745a6b7844b',
                },
                {
                  label: 'EUR',
                  subLabel: '欧元',
                  value: 'EUR',
                  contentLabel: '8500',
                  balance: '8500',
                  prefixIcon:
                    'https://images.pexels.com/photos/33183864/pexels-photo-33183864.jpeg',
                },
                {
                  label: 'CNY',
                  subLabel: '人民币',
                  value: 'CNY',
                  contentLabel: '68000',
                  balance: '68000',
                  prefixIcon:
                    'https://images.pexels.com/photos/33121633/pexels-photo-33121633.jpeg',
                },
              ]}
              rules={{
                required: '请输入转账金额',
                validate: (value: Values) => {
                  if (!value.amount || parseFloat(value.amount) <= 0) {
                    return '转账金额必须大于0';
                  }
                  if (parseFloat(value.amount) > 10000) {
                    return '转账金额不能超过可用余额';
                  }
                  return true;
                },
              }}
            />

            <Form.Item
              name="depositAmount"
              label="存款金额"
              message="选择存款货币和金额"
              hideInternalMessage
              rules={{
                required: '请输入存款金额',
                validate: (value: Values) => {
                  if (!value.amount) {
                    return '请输入存款金额';
                  }
                  if (parseFloat(value.amount) < 100) {
                    return '最小存款金额为100';
                  }
                  return true;
                },
              }}
            >
              <AmountInput
                placeholder="0.00"
                precision={2}
                showSellAll={false}
                options={[
                  {
                    label: 'CNY',
                    subLabel: '人民币',
                    value: 'CNY',
                    contentLabel: '50000',
                  },
                  {
                    label: 'USD',
                    subLabel: '美元',
                    value: 'USD',
                    contentLabel: '7500',
                  },
                  {
                    label: 'HKD',
                    subLabel: '港币',
                    value: 'HKD',
                    contentLabel: '15000',
                  },
                ]}
              />
            </Form.Item>
          </Card>

          <Card title="5. 高阶组件示例" style={styles.cardStyle} noSpace>
            <FormSwitch
              name="isVip"
              label="VIP用户"
              rules={{
                validate: (value: boolean) =>
                  value === true || '必须开启VIP才能继续',
              }}
            />

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

          <Card title="6. Radio 单选组件示例" style={styles.cardStyle} noSpace>
            <Form.Item
              name="gender"
              label="性别"
              rules={{ required: '请选择性别' }}
            >
              <Radio
                options={[
                  { label: '男', value: 'male' },
                  { label: '女', value: 'female' },
                  { label: '其他', value: 'other' },
                ]}
              />
            </Form.Item>

            <Form.Radio
              name="city"
              label="城市"
              split
              rules={{ required: '请选择城市' }}
              options={[
                { label: '北京', value: 'beijing' },
                { label: '上海', value: 'shanghai' },
                { label: '深圳', value: 'shenzhen' },
                { label: '广州', value: 'guangzhou' },
              ]}
            />

            <Form.Radio<string>
              name="plan"
              label="会员套餐"
              message="选择适合您的套餐"
              rules={{
                required: '请选择会员套餐',
                validate: (value: string) =>
                  value !== 'free' || '免费套餐功能有限，建议升级',
              }}
              options={[
                { label: '免费版', value: 'free' },
                { label: '基础版 ¥99/月', value: 'basic' },
                { label: '专业版 ¥199/月', value: 'pro' },
                { label: '企业版 ¥999/月', value: 'enterprise' },
              ]}
            />
          </Card>

          <Card
            title="7. Checkbox 多选组件示例"
            style={styles.cardStyle}
            noSpace
          >
            <Form.Item
              name="hobbies"
              label="兴趣爱好"
              message="请选择您的兴趣爱好，至少选择两项"
              rules={{
                required: '请至少选择一个兴趣爱好',
                validate: (value: string[]) => {
                  if (!value || value.length === 0) {
                    return '请至少选择一个兴趣爱好';
                  }
                  if (value.length < 2) {
                    return '为了更好地为您推荐内容，请至少选择两个兴趣爱好';
                  }
                  return true;
                },
              }}
            >
              <Checkbox.Group
                multiple
                direction="horizontal"
                options={[
                  { label: '阅读📚', value: 'reading' },
                  { label: '运动🏃', value: 'sports' },
                  { label: '音乐🎵', value: 'music' },
                ]}
              />
            </Form.Item>

            <Form.Checkbox
              name="agreements"
              label="服务条款"
              message="同意条款后即可完成注册"
              rules={{
                validate: (value: string[] | boolean) => {
                  // 处理单个checkbox的情况
                  if (Array.isArray(value)) {
                    return value.length > 0 || '请同意服务条款';
                  }
                  return value === true || '请同意服务条款';
                },
              }}
              options={[
                {
                  label: '我已阅读并同意《用户协议》和《隐私政策》',
                  value: true,
                },
              ]}
            />

            <Form.CheckboxGroup
              name="permissions"
              label="权限设置"
              message="请根据您的角色选择相应权限"
              multiple
              split
              rules={{
                required: '请至少选择一个权限',
                validate: (value: string[]) => {
                  if (!value || value.length === 0) {
                    return '请至少选择一个权限';
                  }
                  if (value.includes('admin') && !value.includes('read')) {
                    return '管理员权限必须包含读取权限';
                  }
                  if (value.includes('delete') && !value.includes('write')) {
                    return '删除权限必须包含写入权限';
                  }
                  return true;
                },
              }}
              options={[
                { label: '读取权限', value: 'read' },
                { label: '写入权限', value: 'write' },
                { label: '删除权限', value: 'delete' },
                { label: '管理员权限', value: 'admin' },
              ]}
            />
          </Card>

          <Card
            title="8. OptionGroup 选项组示例"
            style={styles.cardStyle}
            noSpace
          >
            <Form.Item
              name="tags"
              label="标签选择"
              message="请选择相关标签，支持多选"
              rules={{
                required: '请至少选择一个标签',
                validate: (value: string[]) => {
                  if (!value || value.length === 0) {
                    return '请至少选择一个标签';
                  }
                  return true;
                },
              }}
            >
              <OptionGroup
                options={[
                  { label: '前端', value: 'frontend' },
                  { label: '后端', value: 'backend' },
                  { label: 'UI设计', value: 'ui' },
                  { label: '产品', value: 'product' },
                  { label: '测试', value: 'testing' },
                  { label: '运维', value: 'devops' },
                  { label: '数据分析', value: 'data' },
                  { label: '人工智能', value: 'ai' },
                ]}
                multiple
                numberOfSingleLines={3}
                scrollable
                operate
              />
            </Form.Item>

            <Form.OptionGroup
              name="category"
              label="项目类别"
              message="选择项目所属类别"
              rules={{ required: '请选择项目类别' }}
              options={[
                { label: 'Web应用', value: 'web' },
                { label: '移动应用', value: 'mobile' },
                { label: '桌面应用', value: 'desktop' },
                { label: '小程序', value: 'miniapp' },
                { label: '游戏', value: 'game' },
              ]}
              numberOfSingleLines={3}
              scrollable
            />

            <Form.OptionGroup
              name="priority"
              label="优先级"
              message="请选择任务优先级"
              rules={{ required: '请选择优先级' }}
              options={[
                { label: '低', value: 1 },
                { label: '中', value: 2 },
                { label: '高', value: 3 },
                { label: '紧急', value: 4 },
              ]}
              type="outline"
              deselect={false}
            />
          </Card>

          <Card
            title="9. Options 选项卡组件示例"
            style={styles.cardStyle}
            noSpace
          >
            <Form.Item
              name="withdrawMethod"
              label="提现方式"
              message="请选择提现方式"
              rules={{ required: '请选择提现方式' }}
            >
              <Options
                single
                cancelable={false}
                columns={2}
                showIcon
                mode="horizontal"
                style={styles.optionsFullWidth}
                fullColumn
                options={[
                  {
                    label: '结汇提现',
                    description: '立即到账',
                    value: 'exchange',
                  },
                  {
                    label: '普通提现',
                    description: '3个工作日到账',
                    value: 'normal',
                  },
                  {
                    label: '快速提现',
                    description: '2小时内到账',
                    value: 'fast',
                  },
                  {
                    label: '银行转账',
                    description: '1-2个工作日',
                    value: 'bank',
                    disabled: true,
                  },
                ]}
                onDisabledPress={(option) => {
                  Toast(`${option.label} 暂不可用`);
                }}
              />
            </Form.Item>

            <Form.Options
              name="paymentMethods"
              label="支付方式"
              message="请选择支持的支付方式，可多选"
              rules={{
                required: '请至少选择一种支付方式',
                validate: (value: string[]) => {
                  if (!value || value.length === 0) {
                    return '请至少选择一种支付方式';
                  }
                  if (value.includes('crypto') && !value.includes('bank')) {
                    return '选择加密货币支付需要同时支持银行卡';
                  }
                  return true;
                },
              }}
              multiple
              columns={2}
              showIcon
              style={styles.optionsFullWidth}
              fullColumn
              options={[
                {
                  label: '银行卡',
                  description: '借记卡/信用卡',
                  value: 'bank',
                },
                {
                  label: '支付宝',
                  description: '余额/花呗',
                  value: 'alipay',
                },
                {
                  label: '微信支付',
                  description: '零钱/银行卡',
                  value: 'wechat',
                },
                {
                  label: '加密货币',
                  description: 'USDT/BTC',
                  value: 'crypto',
                },
              ]}
            />

            <Form.Item
              name="cardType"
              label="银行卡类型"
              message="选择您偏好的银行卡类型"
              rules={{ required: '请选择银行卡类型' }}
            >
              <Options
                single
                showIcon
                mode="vertical"
                columns={3}
                style={styles.optionsFullWidth}
                fullColumn
                iconProps={{ size: 24 }}
                options={[
                  {
                    label: '储蓄卡',
                    value: 'debit',
                  },
                  {
                    label: '信用卡',
                    value: 'credit',
                  },
                  {
                    label: '企业卡',
                    value: 'corporate',
                  },
                ]}
              />
            </Form.Item>
          </Card>

          {/* 新增组件示例 */}
          <Card
            title="10. DatePicker 日期选择器示例"
            style={styles.cardStyle}
            noSpace
          >
            <Form.DatePicker
              name="birthDate"
              label="出生日期"
              placeholder="请选择出生日期"
              mode="Y-D"
              rules={{ required: '请选择出生日期' }}
              message="用于身份验证"
            />
          </Card>

          <Card
            title="11. DateRange 日期范围选择器示例"
            style={styles.cardStyle}
            noSpace
          >
            <Form.DateRange
              name="vacationPeriod"
              label="休假时间"
              placeholder={['开始日期', '结束日期']}
              mode="Y-D"
              rules={{ required: '请选择休假时间' }}
              message="请选择您的休假时间段"
            />
          </Card>

          <Card
            title="12. PasswordInput 密码输入框示例"
            style={styles.cardStyle}
            noSpace
          >
            <Form.PasswordInput
              name="loginPassword"
              label="登录密码"
              placeholder="请输入登录密码"
              showSecureControl
              rules={{
                required: '请输入登录密码',
                minLength: {
                  value: 8,
                  message: '密码至少8位',
                },
              }}
              message="密码需包含字母和数字"
            />
          </Card>

          <Card title="13. Picker 选择器示例" style={styles.cardStyle} noSpace>
            <Form.Picker
              name="country"
              label="国家/地区"
              placeholder="请选择国家/地区"
              rules={{ required: '请选择国家/地区' }}
              columns={[
                { label: '中国', value: 'CN' },
                { label: '美国', value: 'US' },
                { label: '日本', value: 'JP' },
                { label: '韩国', value: 'KR' },
                { label: '英国', value: 'UK' },
                { label: '德国', value: 'DE' },
                { label: '法国', value: 'FR' },
              ]}
              message="选择您所在的国家或地区"
            />
          </Card>

          <Card
            title="14. SingleCheckOptions 单选选项示例"
            style={styles.cardStyle}
            noSpace
          >
            <Form.SingleCheckOptions
              name="skills"
              label="主要技能"
              rules={{ required: '请选择您的主要技能' }}
              columns={2}
              options={[
                { label: 'React', value: 'react' },
                { label: 'Vue', value: 'vue' },
                { label: 'Angular', value: 'angular' },
                { label: 'Node.js', value: 'nodejs' },
                { label: 'Python', value: 'python' },
                { label: 'Java', value: 'java' },
              ]}
              message="选择您最擅长的技术栈"
            />
          </Card>

          <Card
            title="15. TagInput 标签输入示例"
            style={styles.cardStyle}
            noSpace
          >
            <Form.TagInput
              accessibilityLabel="tagInput"
              name="projectTags"
              label="项目标签"
              placeholder="输入标签后按回车添加"
              rules={{
                validate: (value: string[]) => {
                  if (!value || value.length === 0) {
                    return '请至少添加一个项目标签';
                  }
                  if (value.length > 5) {
                    return '最多只能添加5个标签';
                  }
                  return true;
                },
              }}
              message="为您的项目添加相关标签"
            />
          </Card>
        </Form.FormProvider>
      </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,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: '600',
    marginTop: 20,
    marginBottom: 10,
    color: '#333',
  },
  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,
  },
  optionsFullWidth: {
    paddingHorizontal: 0,
  },
});

export default FormBasicDemo;