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

type FormData = {
  withdrawMethod: string;
  paymentMethods: string[];
  cardType: string;
  theme: string;
  currency: string[];
  plan: string;
  region: string;
  features: string[];
};

const OptionsExamplesDemo: React.FC = () => {
  const form = Form.useForm<FormData>({
    defaultValues: {
      withdrawMethod: '',
      paymentMethods: [],
      cardType: '',
      theme: '',
      currency: [],
      plan: '',
      region: '',
      features: [],
    },
  });

  const [regionFixed, setRegionFixed] = React.useState<string>('eu');

  const onSubmit = (data: FormData) => {
    console.log('Form submitted:', data);
    Toast(
      `提交成功！\n提现方式: ${
        data.withdrawMethod
      }\n支付方式: ${data.paymentMethods.join(', ')}`
    );
  };

  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 + 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.Item
              name="theme"
              label="主题设置"
              message="选择您喜欢的应用主题"
              rules={{ required: '请选择主题' }}
            >
              <Options
                single
                showIcon
                mode="vertical"
                columns={3}
                style={styles.optionsFullWidth}
                fullColumn
                iconProps={{ size: 28 }}
                options={[
                  {
                    label: '浅色',
                    description: '默认主题',
                    value: 'light',
                    icon: <IconXFrontside1 size={28} fillColor="#FFA500" />,
                  },
                  {
                    label: '深色',
                    description: '护眼模式',
                    value: 'dark',
                    icon: <IconXBackside1 size={28} fillColor="#4169E1" />,
                  },
                  {
                    label: '自动',
                    description: '跟随系统',
                    value: 'auto',
                  },
                ]}
              />
            </Form.Item>
          </Card>

          {/* 快捷用法示例 */}
          <Card
            title="2. 快捷用法（Form.Options）"
            style={styles.cardStyle}
            noSpace
          >
            <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.Options
              name="cardType"
              label="银行卡类型"
              message="选择您偏好的银行卡类型"
              rules={{ required: '请选择银行卡类型' }}
              single
              showIcon
              mode="vertical"
              columns={3}
              style={styles.optionsFullWidth}
              fullColumn
              iconProps={{ size: 24 }}
              options={[
                {
                  label: '储蓄卡',
                  value: 'debit',
                },
                {
                  label: '信用卡',
                  value: 'credit',
                },
                {
                  label: '企业卡',
                  value: 'corporate',
                },
              ]}
            />
          </Card>

          {/* 图片选项示例 */}
          <Card title="3. 图片选项示例" style={styles.cardStyle} noSpace>
            <Form.Options
              name="plan"
              label="会员套餐"
              message="选择适合您的套餐计划"
              rules={{ required: '请选择会员套餐' }}
              single
              columns={2}
              style={styles.optionsFullWidth}
              fullColumn
              imageStyle={styles.planImageStyle}
              options={[
                {
                  imageSource: {
                    uri: 'https://images.unsplash.com/photo-1557804506-669a67965ba0?w=100&h=100&fit=crop',
                  },
                  label: '基础版',
                  description: '¥99/月',
                  value: 'basic',
                  style: styles.planOptionStyle,
                },
                {
                  imageSource: {
                    uri: 'https://images.unsplash.com/photo-1559526324-4b87b5e36e44?w=100&h=100&fit=crop',
                  },
                  label: '专业版',
                  description: '¥199/月',
                  value: 'pro',
                  style: styles.planOptionStyle,
                },
                {
                  imageSource: {
                    uri: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=100&h=100&fit=crop',
                  },
                  label: '企业版',
                  description: '¥999/月',
                  value: 'enterprise',
                  style: styles.planOptionStyle,
                },
                {
                  imageSource: {
                    uri: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=100&h=100&fit=crop',
                  },
                  label: '定制版',
                  description: '联系销售',
                  value: 'custom',
                  style: styles.planOptionStyle,
                  disabled: true,
                },
              ]}
              onDisabledPress={(_option) => {
                Toast('定制版套餐请联系我们的销售团队');
              }}
            />
          </Card>

          {/* 高级配置示例 */}
          <Card title="4. 高级配置示例" style={styles.cardStyle} noSpace>
            <Form.Options
              name="currency"
              label="支持货币"
              message="选择平台支持的货币类型"
              rules={{
                required: '请至少选择一种货币',
                validate: (value: string[]) => {
                  if (!value || value.length === 0) {
                    return '请至少选择一种货币';
                  }
                  if (value.length > 5) {
                    return '最多只能选择5种货币';
                  }
                  return true;
                },
              }}
              multiple
              showIcon
              mode="horizontal"
              gapHorizontal={8}
              gapVertical={12}
              iconProps={{ size: 20 }}
              optionStyle={styles.currencyOptionStyle}
              options={[
                {
                  label: 'USD',
                  description: '美元',
                  value: 'usd',
                },
                {
                  label: 'EUR',
                  description: '欧元',
                  value: 'eur',
                },
                {
                  label: 'CNY',
                  description: '人民币',
                  value: 'cny',
                },
                {
                  label: 'JPY',
                  description: '日元',
                  value: 'jpy',
                },
                {
                  label: 'GBP',
                  description: '英镑',
                  value: 'gbp',
                },
                {
                  label: 'HKD',
                  description: '港币',
                  value: 'hkd',
                },
              ]}
            />

            <Form.Options
              name="region"
              label="服务区域"
              message="选择主要服务区域"
              rules={{ required: '请选择服务区域' }}
              single
              cancelable={false}
              options={[
                {
                  label: '亚太地区',
                  description: '包含中国、日本、韩国等',
                  value: 'apac',
                },
                {
                  label: '北美地区',
                  description: '美国、加拿大',
                  value: 'na',
                },
                {
                  label: '欧洲地区',
                  description: '欧盟国家',
                  value: 'eu',
                },
              ]}
            />
          </Card>

          {/* 禁用状态示例 */}
          <Card title="5. 禁用状态示例" style={styles.cardStyle} noSpace>
            <Form.Item
              name="premiumFeatures"
              label="高级功能"
              message="升级到专业版解锁更多功能"
            >
              <Options
                disabled
                multiple
                columns={2}
                showIcon
                style={styles.optionsFullWidth}
                fullColumn
                options={[
                  {
                    label: 'API接入',
                    description: '开放API调用',
                    value: 'api',
                  },
                  {
                    label: '数据导出',
                    description: '批量导出数据',
                    value: 'export',
                  },
                  {
                    label: '高级分析',
                    description: '深度数据分析',
                    value: 'analytics',
                  },
                  {
                    label: '优先支持',
                    description: '7x24小时支持',
                    value: 'support',
                  },
                ]}
              />
            </Form.Item>

            <Form.Options
              name="features"
              label="测试功能"
              message="部分功能仍在测试阶段"
              rules={{
                validate: (value: string[]) => {
                  if (
                    value &&
                    value.includes('experimental') &&
                    value.length === 1
                  ) {
                    return '实验性功能建议配合其他功能一起使用';
                  }
                  return true;
                },
              }}
              multiple
              showIcon
              mode="vertical"
              columns={2}
              style={styles.optionsFullWidth}
              fullColumn
              options={[
                {
                  label: '智能推荐',
                  description: '基于AI的内容推荐',
                  value: 'ai-recommend',
                },
                {
                  label: '语音控制',
                  description: '语音操作界面',
                  value: 'voice-control',
                  disabled: true,
                },
                {
                  label: '手势识别',
                  description: '手势操作支持',
                  value: 'gesture',
                  disabled: true,
                },
                {
                  label: '实验性功能',
                  description: '最新测试功能',
                  value: 'experimental',
                },
              ]}
              onDisabledPress={(option) => {
                Toast(`${option.label} 功能即将上线，敬请期待！`);
              }}
            />
          </Card>
          <Card
            title="6. 传入 value 优先级示例"
            style={styles.cardStyle}
            noSpace
          >
            <View style={{ padding: 12 }}>
              <Text style={{ marginBottom: 8 }}>当前值：{regionFixed}</Text>
              <Form.Options
                control={form.control}
                name="regionFixed"
                label="服务区域（外部指定）"
                single
                options={[
                  { label: '欧洲地区', value: 'eu' },
                  { label: '北美地区', value: 'na' },
                ]}
                value={regionFixed}
                onChange={(v) => setRegionFixed(v as string)}
              />
            </View>
          </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,
  },
  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,
  },
  planImageStyle: {
    width: 60,
    height: 60,
    borderRadius: 8,
  },
  planOptionStyle: {
    paddingVertical: 12,
    paddingHorizontal: 8,
  },
  currencyOptionStyle: {
    minWidth: 80,
    paddingVertical: 8,
  },
});

export default OptionsExamplesDemo;