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

type FormData = {
  tags: string[];
  category: string;
  priority: number;
  status: string;
  department: string[];
  level: string;
  skills: string[];
  platform: string;
};

const OptionGroupExamplesDemo: React.FC = () => {
  const form = Form.useForm<FormData>({
    defaultValues: {
      tags: [],
      category: '',
      priority: 1,
      status: '',
      department: [],
      level: '',
      skills: [],
      platform: '',
    },
  });

  const [categoryFixed, setCategoryFixed] = React.useState<string>('web');

  const onSubmit = (data: FormData) => {
    console.log('Form submitted:', data);
    Toast(
      `提交成功！\n标签: ${data.tags.join(', ')}\n类别: ${
        data.category
      }\n优先级: ${data.priority}`
    );
  };

  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 + 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.Item
              name="status"
              label="项目状态"
              message="选择当前项目状态"
              rules={{ required: '请选择项目状态' }}
            >
              <OptionGroup
                options={[
                  { label: '规划中', value: 'planning' },
                  { label: '开发中', value: 'development' },
                  { label: '测试中', value: 'testing' },
                  { label: '已上线', value: 'online' },
                  { label: '已暂停', value: 'paused' },
                  { label: '已完成', value: 'completed' },
                ]}
                numberOfSingleLines={3}
                scrollable
                operate
              />
            </Form.Item>
          </Card>

          {/* 快捷用法示例 */}
          <Card
            title="2. 快捷用法（Form.OptionGroup）"
            style={styles.cardStyle}
            noSpace
          >
            <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="platform"
              label="目标平台"
              message="选择应用发布平台"
              rules={{ required: '请选择目标平台' }}
              options={[
                { label: 'iOS', value: 'ios' },
                { label: 'Android', value: 'android' },
                { label: 'Web', value: 'web' },
                { label: 'Windows', value: 'windows' },
                { label: 'macOS', value: 'macos' },
                { label: 'Linux', value: 'linux' },
              ]}
              numberOfSingleLines={2}
              scrollable
              operate
            />
          </Card>

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

            <Form.OptionGroup
              name="department"
              label="相关部门"
              message="选择涉及的部门，可多选"
              rules={{
                required: '请至少选择一个部门',
                validate: (value: string[]) => {
                  if (!value || value.length === 0) {
                    return '请至少选择一个部门';
                  }
                  if (value.length > 3) {
                    return '最多只能选择3个部门';
                  }
                  return true;
                },
              }}
              options={[
                { label: '产品部', value: 'product' },
                { label: '技术部', value: 'tech' },
                { label: '设计部', value: 'design' },
                { label: '市场部', value: 'marketing' },
                { label: '运营部', value: 'operation' },
                { label: '销售部', value: 'sales' },
              ]}
              multiple
              numberOfSingleLines={2}
              scrollable
              operate
            />
          </Card>

          {/* 滚动和操作面板示例 */}
          <Card title="4. 滚动和操作面板示例" style={styles.cardStyle} noSpace>
            <Form.OptionGroup
              name="skills"
              label="技能要求"
              message="选择项目所需技能，支持展开查看更多"
              rules={{
                required: '请至少选择一个技能',
                validate: (value: string[]) => {
                  if (!value || value.length === 0) {
                    return '请至少选择一个技能';
                  }
                  if (
                    value.includes('react') &&
                    !value.includes('javascript')
                  ) {
                    return 'React技能需要JavaScript基础';
                  }
                  if (
                    value.includes('typescript') &&
                    !value.includes('javascript')
                  ) {
                    return 'TypeScript技能需要JavaScript基础';
                  }
                  return true;
                },
              }}
              options={[
                { label: 'JavaScript', value: 'javascript' },
                { label: 'TypeScript', value: 'typescript' },
                { label: 'React', value: 'react' },
                { label: 'Vue.js', value: 'vue' },
                { label: 'Angular', value: 'angular' },
                { label: 'Node.js', value: 'nodejs' },
                { label: 'Python', value: 'python' },
                { label: 'Java', value: 'java' },
                { label: 'Go', value: 'go' },
                { label: 'Rust', value: 'rust' },
                { label: 'Swift', value: 'swift' },
                { label: 'Kotlin', value: 'kotlin' },
                { label: 'Flutter', value: 'flutter' },
                { label: 'React Native', value: 'reactnative' },
                { label: 'Docker', value: 'docker' },
                { label: 'Kubernetes', value: 'k8s' },
                { label: 'AWS', value: 'aws' },
                { label: 'Azure', value: 'azure' },
              ]}
              multiple
              numberOfSingleLines={4}
              scrollable
              scrollableWrap
              operate
              panelMaxHeight={200}
            />

            <Form.OptionGroup
              name="level"
              label="难度等级"
              message="评估项目整体难度"
              rules={{ required: '请选择难度等级' }}
              options={[
                { label: '入门 ⭐', value: 'beginner' },
                { label: '初级 ⭐⭐', value: 'junior' },
                { label: '中级 ⭐⭐⭐', value: 'intermediate' },
                { label: '高级 ⭐⭐⭐⭐', value: 'senior' },
                { label: '专家 ⭐⭐⭐⭐⭐', value: 'expert' },
              ]}
              numberOfSingleLines={3}
              scrollable
              type="hazy"
              deselect={false}
            />
          </Card>

          {/* 禁用状态示例 */}
          <Card title="5. 禁用状态示例" style={styles.cardStyle} noSpace>
            <Form.Item
              name="premiumFeatures"
              label="高级功能"
              message="升级到专业版解锁更多功能"
            >
              <OptionGroup
                options={[
                  { label: 'AI代码生成', value: 'ai-code', disabled: true },
                  { label: '智能测试', value: 'smart-test', disabled: true },
                  { label: '性能优化', value: 'performance', disabled: true },
                  { label: '安全扫描', value: 'security', disabled: true },
                ]}
                numberOfSingleLines={2}
                scrollable
              />
            </Form.Item>

            <Form.Item
              name="betaFeatures"
              label="测试功能"
              message="部分功能仍在内测阶段"
            >
              <OptionGroup
                options={[
                  { label: '新版界面', value: 'newui' },
                  { label: '语音控制', value: 'voice', disabled: true },
                  { label: '手势操作', value: 'gesture', disabled: true },
                  { label: '快捷键', value: 'shortcuts' },
                  { label: '主题切换', value: 'themes' },
                ]}
                numberOfSingleLines={3}
                scrollable
                onDisabledPress={(option) => {
                  Toast(`${option.label} 功能即将上线，敬请期待！`);
                }}
              />
            </Form.Item>
          </Card>
          <Card
            title="6. 传入 value 优先级示例"
            style={styles.cardStyle}
            noSpace
          >
            <View style={{ padding: 12 }}>
              <Text style={{ marginBottom: 8 }}>当前值：{categoryFixed}</Text>
              <Form.OptionGroup
                control={form.control}
                name="categoryFixed"
                label="项目类别（外部指定）"
                options={[
                  { label: 'Web应用', value: 'web' },
                  { label: '移动应用', value: 'mobile' },
                ]}
                value={categoryFixed}
                onChange={(v) => setCategoryFixed(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 OptionGroupExamplesDemo;