import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
import Form from '../index';
import Radio from '../../Radio';
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 = {
  gender: string;
  city: string;
  plan: string;
  theme: string;
  language: string;
  notification: string;
};

const RadioExamplesDemo: React.FC = () => {
  const form = Form.useForm<FormData>({
    defaultValues: {
      gender: '',
      city: 'beijing',
      plan: 'basic',
      theme: '',
      language: '',
      notification: '',
    },
  });

  const [languageFixed, setLanguageFixed] = React.useState<string>('en-US');

  const onSubmit = (data: FormData) => {
    console.log('Form submitted:', data);
    Toast(
      `提交成功！\n性别: ${data.gender}\n城市: ${data.city}\n套餐: ${data.plan}`
    );
  };

  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 + 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.Item
              name="theme"
              label="主题偏好"
              message="选择您喜欢的应用主题"
              rules={{ required: '请选择主题' }}
            >
              <Radio
                options={[
                  { label: '浅色主题', value: 'light' },
                  { label: '深色主题', value: 'dark' },
                  { label: '跟随系统', value: 'auto' },
                ]}
              />
            </Form.Item>
          </Card>

          {/* 快捷用法示例 */}
          <Card
            title="2. 快捷用法（Form.Radio）"
            style={styles.cardStyle}
            noSpace
          >
            <Form.Radio
              name="city"
              label="城市"
              split
              onChange={(e) => {
                console.log(e);
              }}
              rules={{ required: '请选择城市' }}
              options={[
                { label: '北京', value: 'beijing' },
                { label: '上海', value: 'shanghai' },
                { label: '深圳', value: 'shenzhen' },
                { label: '广州', value: 'guangzhou' },
              ]}
            />

            <Form.Radio
              name="language"
              label="语言设置"
              message="选择界面显示语言"
              rules={{ required: '请选择语言' }}
              options={[
                { label: '中文简体', value: 'zh-CN' },
                { label: '中文繁体', value: 'zh-TW' },
                { label: 'English', value: 'en-US' },
                { label: '日本語', value: 'ja-JP' },
              ]}
            />
          </Card>

          {/* 高级配置示例 */}
          <Card title="3. 高级配置示例" style={styles.cardStyle} noSpace>
            <Form.Radio
              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' },
              ]}
            />

            <Form.Radio
              name="notification"
              label="通知设置"
              message="选择您希望接收的通知类型"
              split
              rules={{
                required: '请选择通知设置',
                validate: (value: string) => {
                  if (value === 'none') {
                    return '建议至少开启重要通知，以免错过重要信息';
                  }
                  return true;
                },
              }}
              options={[
                { label: '全部通知', value: 'all' },
                { label: '仅重要通知', value: 'important' },
                { label: '关闭通知', value: 'none' },
              ]}
            />
          </Card>

          {/* 禁用状态示例 */}
          <Card title="4. 禁用状态示例" style={styles.cardStyle} noSpace>
            <Form.Item
              name="premium"
              label="高级功能"
              message="需要升级到专业版才能使用"
            >
              <Radio
                disabled
                options={[
                  { label: 'AI 智能分析', value: 'ai' },
                  { label: '高级报表', value: 'report' },
                  { label: '数据导出', value: 'export' },
                ]}
              />
            </Form.Item>

            <Form.Item
              name="betaFeatures"
              label="测试功能"
              message="部分功能正在内测中"
            >
              <Radio
                options={[
                  { label: '新版界面', value: 'newui' },
                  { label: '语音识别', value: 'voice', disabled: true },
                  { label: '实时协作', value: 'collab', disabled: true },
                  { label: '智能推荐', value: 'recommend' },
                ]}
              />
            </Form.Item>
          </Card>
          <Card
            title="5. 传入 value 优先级示例"
            style={styles.cardStyle}
            noSpace
          >
            <View style={{ padding: 12 }}>
              <Text style={{ marginBottom: 8 }}>当前值：{languageFixed}</Text>
              <Form.Radio
                control={form.control}
                name="languageFixed"
                label="语言（外部指定）"
                options={[
                  { label: '中文简体', value: 'zh-CN' },
                  { label: 'English', value: 'en-US' },
                ]}
                value={languageFixed}
                onChange={(v) => setLanguageFixed(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,
  },
});

export default RadioExamplesDemo;