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 SingleCheckOptions from '../../Options';

type FormData = {
  gender: string;
  paymentMethod: string;
  theme: string;
  language: string;
  priority: string;
  category: string;
};

const SingleCheckOptionsExamplesDemo: React.FC = () => {
  const form = Form.useForm<FormData>({
    defaultValues: {
      gender: '',
      paymentMethod: 'alipay',
      theme: 'auto',
      language: '',
      priority: '',
      category: '',
    },
  });

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

  const onSubmit = (data: FormData) => {
    console.log('Form submitted:', data);
    Toast(
      `选择完成！\n性别: ${data.gender}\n支付方式: ${data.paymentMethod}\n主题: ${data.theme}`
    );
  };

  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}>
          {/* Form.SingleCheckOptions 快捷用法 */}
          <Card
            title="1. Form.SingleCheckOptions 快捷用法"
            style={styles.cardStyle}
            noSpace
          >
            <Form.SingleCheckOptions
              name="gender"
              label="性别"
              message="请选择您的性别"
              rules={{
                required: '请选择性别',
              }}
              options={[
                { label: '男', value: 'male' },
                { label: '女', value: 'female' },
                { label: '其他', value: 'other' },
              ]}
            />
          </Card>

          {/* Form.Item + SingleCheckOptions 组合用法 */}
          <Card
            title="2. Form.Item + SingleCheckOptions 组合用法"
            style={styles.cardStyle}
            noSpace
          >
            <Form.Item
              name="paymentMethod"
              label="支付方式"
              message="选择您偏好的支付方式"
              rules={{
                required: '请选择支付方式',
              }}
            >
              <SingleCheckOptions
                single
                showIcon
                mode="horizontal"
                columns={2}
                options={[
                  {
                    label: '支付宝',
                    value: 'alipay',
                  },
                  {
                    label: '微信支付',
                    value: 'wechat',
                  },
                  {
                    label: '银行卡',
                    value: 'bank',
                  },
                  {
                    label: 'PayPal',
                    value: 'paypal',
                  },
                ]}
              />
            </Form.Item>
          </Card>

          {/* 主题选择示例 */}
          <Card title="3. 主题选择示例" style={styles.cardStyle} noSpace>
            <Form.SingleCheckOptions
              name="theme"
              label="主题设置"
              message="选择应用主题外观"
              showIcon
              mode="vertical"
              columns={3}
              fullColumn
              iconProps={{ size: 24 }}
              rules={{
                required: '请选择主题',
              }}
              options={[
                {
                  label: '浅色',
                  value: 'light',
                  description: '明亮清爽',
                },
                {
                  label: '深色',
                  value: 'dark',
                  description: '护眼舒适',
                },
                {
                  label: '自动',
                  value: 'auto',
                  description: '跟随系统',
                },
              ]}
            />
          </Card>

          {/* 高级配置示例 */}
          <Card title="4. 高级配置示例" style={styles.cardStyle} noSpace>
            <Form.SingleCheckOptions
              name="language"
              label="语言设置"
              message="选择应用显示语言"
              showIcon
              mode="horizontal"
              columns={1}
              cancelable
              style={styles.optionsFullWidth}
              rules={{
                required: '请选择语言',
              }}
              options={[
                {
                  label: '简体中文',
                  description: 'Simplified Chinese',
                  value: 'zh-CN',
                },
                {
                  label: 'English',
                  description: 'English (US)',
                  value: 'en-US',
                },
                {
                  label: '繁體中文',
                  description: 'Traditional Chinese',
                  value: 'zh-TW',
                },
                {
                  label: '日本語',
                  description: 'Japanese',
                  value: 'ja-JP',
                },
              ]}
            />
          </Card>

          {/* 优先级选择示例 */}
          <Card title="5. 优先级选择示例" style={styles.cardStyle} noSpace>
            <Form.SingleCheckOptions
              name="priority"
              label="任务优先级"
              message="设置任务的重要程度"
              showIcon
              mode="horizontal"
              columns={2}
              fullColumn
              rules={{
                required: '请选择优先级',
                validate: (value: string) => {
                  if (value === 'urgent') {
                    return '紧急任务需要额外确认，请联系管理员';
                  }
                  return true;
                },
              }}
              options={[
                {
                  label: '低',
                  value: 'low',
                  description: '可延后',
                },
                {
                  label: '中',
                  value: 'medium',
                  description: '正常处理',
                },
                {
                  label: '高',
                  value: 'high',
                  description: '优先处理',
                },
                {
                  label: '紧急',
                  value: 'urgent',
                  description: '立即处理',
                },
              ]}
            />
          </Card>

          {/* 复杂验证示例 */}
          <Card title="6. 复杂验证示例" style={styles.cardStyle} noSpace>
            <Form.SingleCheckOptions
              name="category"
              label="项目类别"
              message="选择项目类别，不同类别有不同要求"
              showIcon
              mode="vertical"
              columns={2}
              rules={{
                required: '请选择项目类别',
                validate: (value: string) => {
                  const selectedPriority = form.getValues('priority');

                  // 企业级项目必须是高优先级或紧急
                  if (
                    value === 'enterprise' &&
                    !['high', 'urgent'].includes(selectedPriority)
                  ) {
                    return '企业级项目必须设置为高优先级或紧急';
                  }

                  // 实验性项目不能是紧急优先级
                  if (
                    value === 'experimental' &&
                    selectedPriority === 'urgent'
                  ) {
                    return '实验性项目不能设置为紧急优先级';
                  }

                  return true;
                },
              }}
              options={[
                {
                  label: '个人项目',
                  value: 'personal',
                  description: '个人开发',
                },
                {
                  label: '团队项目',
                  value: 'team',
                  description: '团队协作',
                },
                {
                  label: '企业级',
                  value: 'enterprise',
                  description: '企业应用',
                },
                {
                  label: '开源项目',
                  value: 'opensource',
                  description: '开源贡献',
                },
                {
                  label: '实验性',
                  value: 'experimental',
                  description: '技术验证',
                },
                {
                  label: '商业项目',
                  value: 'commercial',
                  description: '商业应用',
                },
              ]}
            />
          </Card>

          {/* 禁用状态示例 */}
          <Card title="7. 禁用状态示例" style={styles.cardStyle} noSpace>
            <Form.SingleCheckOptions
              name="disabledOption"
              label="禁用选项"
              message="演示禁用状态下的单选组件"
              disabled
              defaultValue="option2"
              showIcon
              mode="horizontal"
              columns={3}
              options={[
                {
                  label: '选项1',
                  value: 'option1',
                },
                {
                  label: '选项2',
                  value: 'option2',
                },
                {
                  label: '选项3',
                  value: 'option3',
                },
              ]}
            />
          </Card>
          <Card
            title="8. 传入 value 优先级示例"
            style={styles.cardStyle}
            noSpace
          >
            <View style={{ padding: 12 }}>
              <Text style={{ marginBottom: 8 }}>当前值：{languageFixed}</Text>
              <Form.SingleCheckOptions
                control={form.control}
                name="languageFixed"
                label="语言（外部指定）"
                single
                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,
  },
  optionsFullWidth: {
    width: '100%',
  },
  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 SingleCheckOptionsExamplesDemo;