import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
import Form from '../index';
import Checkbox from '../../Checkbox';
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 = {
  hobbies: string[];
  agreements: boolean;
  permissions: string[];
  features: string[];
  marketing: boolean;
  terms: boolean;
  privacy: boolean;
  notifications: string[];
};

const CheckboxExamplesDemo: React.FC = () => {
  const form = Form.useForm<FormData>({
    defaultValues: {
      hobbies: [],
      agreements: false,
      permissions: ['read'],
      features: [],
      marketing: false,
      terms: false,
      privacy: false,
      notifications: [],
    },
  });

  const [marketingFixed, setMarketingFixed] = React.useState<boolean>(true);

  const onSubmit = (data: FormData) => {
    console.log('Form submitted:', data);
    Toast(
      `提交成功！\n兴趣爱好: ${data.hobbies.join(
        ', '
      )}\n权限: ${data.permissions.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 + Checkbox.Group）"
            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' },
                  { label: '旅行✈️', value: 'travel' },
                  { label: '摄影📷', value: 'photography' },
                  { label: '编程💻', value: 'coding' },
                ]}
              />
            </Form.Item>

            <Form.Item
              name="features"
              label="功能需求"
              message="选择您希望优先开发的功能"
              rules={{
                validate: (value: string[]) => {
                  if (value && value.length > 3) {
                    return '最多只能选择3个功能';
                  }
                  return true;
                },
              }}
            >
              <Checkbox
                multiple
                direction="vertical"
                onChange={(e) => console.log(e)}
                label="数据分析报表"
              />
            </Form.Item>
          </Card>

          {/* 快捷用法示例 */}
          <Card
            title="2. 快捷用法（Form.Checkbox）"
            style={styles.cardStyle}
            noSpace
          >
            <Form.Checkbox
              name="agreements"
              label="服务条款"
              message="同意条款后即可完成注册"
              onChange={(e: boolean) => console.log(e)}
              rules={{
                validate: (value: string[] | boolean) => {
                  // 处理单个checkbox的情况
                  if (Array.isArray(value)) {
                    return value.length > 0 || '请同意服务条款';
                  }
                  return value === true || '请同意服务条款';
                },
              }}
              checkboxLabel="我已阅读并同意《用户协议》和《隐私政策》"
            />

            <Form.Checkbox
              name="marketing"
              label="营销推广"
              message="是否接收产品更新和优惠信息"
              checkboxLabel="我已阅读并同意《用户协议》和《隐私政策》"
            />
          </Card>

          {/* Form.CheckboxGroup 示例 */}
          <Card
            title="3. Form.CheckboxGroup 快捷用法"
            style={styles.cardStyle}
            noSpace
          >
            <Form.CheckboxGroup
              name="permissions"
              label="权限设置"
              message="请根据您的角色选择相应权限"
              multiple
              split
              onChange={(value) => {
                console.log('CheckboxGroup value:', value);
              }}
              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' },
              ]}
            />

            <Form.CheckboxGroup
              name="notifications"
              label="通知类型"
              message="选择您希望接收的通知类型"
              multiple
              direction="horizontal"
              rules={{
                validate: (value: string[]) => {
                  if (value && value.includes('all') && value.length > 1) {
                    return '选择"全部通知"时不能同时选择其他选项';
                  }
                  return true;
                },
              }}
              options={[
                { label: '全部通知', value: 'all' },
                { label: '系统通知', value: 'system' },
                { label: '安全提醒', value: 'security' },
                { label: '活动推送', value: 'activity' },
              ]}
            />
          </Card>

          {/* 高级配置示例 */}
          <Card title="4. 高级配置示例" style={styles.cardStyle} noSpace>
            <Form.Item
              name="legalAgreements"
              label="法律条款"
              message="请仔细阅读并同意以下条款"
            >
              <Checkbox.Group
                multiple
                direction="vertical"
                options={[
                  { label: '用户服务协议', value: 'terms' },
                  { label: '隐私政策', value: 'privacy' },
                  { label: '数据处理协议', value: 'data' },
                ]}
              />
            </Form.Item>

            <Form.Item
              name="preferences"
              label="个人偏好"
              message="这些设置可以随时在个人中心修改"
            >
              <Checkbox.Group
                multiple
                direction="horizontal"
                options={[
                  { label: '深色主题', value: 'darkMode' },
                  { label: '自动保存', value: 'autoSave' },
                  { label: '快捷键', value: 'shortcuts' },
                  { label: '声音提示', value: 'sound' },
                ]}
              />
            </Form.Item>
          </Card>

          {/* 禁用状态示例 */}
          <Card title="5. 禁用状态示例" style={styles.cardStyle} noSpace>
            <Form.Item
              name="premiumFeatures"
              label="高级功能"
              message="升级到高级版本解锁更多功能"
            >
              <Checkbox.Group
                multiple
                disabled
                direction="vertical"
                options={[
                  { label: 'AI 智能助手', value: 'ai' },
                  { label: '高级数据分析', value: 'analytics' },
                  { label: '无限云存储', value: 'storage' },
                ]}
              />
            </Form.Item>

            <Form.Item
              name="betaFeatures"
              label="测试功能"
              message="部分功能仍在测试阶段"
            >
              <Checkbox.Group
                multiple
                direction="vertical"
                options={[
                  { label: '新版编辑器', value: 'editor' },
                  { label: '实时协作', value: 'collaboration', disabled: true },
                  { label: '语音输入', value: 'voice', disabled: true },
                  { label: '智能翻译', value: 'translate' },
                ]}
              />
            </Form.Item>
          </Card>
          <Card
            title="6. 传入 value 优先级示例"
            style={styles.cardStyle}
            noSpace
          >
            <View style={{ padding: 12 }}>
              <Text style={{ marginBottom: 8 }}>
                当前值：{marketingFixed ? 'true' : 'false'}
              </Text>
              <Form.Checkbox
                control={form.control}
                name="marketingFixed"
                label="营销推广（外部指定）"
                checkboxLabel="外部控制勾选状态"
                value={marketingFixed}
                onChange={(v: boolean) => setMarketingFixed(v)}
              />
            </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: 12,
    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 CheckboxExamplesDemo;