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';

type FormData = {
  city: string[];
  category: string[];
  level: string[];
  department: string[];
  priority: string[];
  status: string[];
  region: string[];
  skill: string[];
  language: string[];
  experience: string[];
  education: string[];
  gender: string[];
};

// 模拟数据
const cityOptions = [
  { label: '北京', value: 'beijing' },
  { label: '上海', value: 'shanghai' },
  { label: '广州', value: 'guangzhou' },
  { label: '深圳', value: 'shenzhen' },
  { label: '杭州', value: 'hangzhou' },
  { label: '南京', value: 'nanjing' },
  { label: '武汉', value: 'wuhan' },
  { label: '成都', value: 'chengdu' },
  { label: '西安', value: 'xian' },
  { label: '重庆', value: 'chongqing' },
];

const categoryOptions = [
  { label: '技术开发', value: 'tech' },
  { label: '产品设计', value: 'design' },
  { label: '市场营销', value: 'marketing' },
  { label: '销售管理', value: 'sales' },
  { label: '人力资源', value: 'hr' },
  { label: '财务会计', value: 'finance' },
  { label: '运营管理', value: 'operation' },
  { label: '客户服务', value: 'service' },
];

const levelOptions = [
  { label: '初级', value: 'junior' },
  { label: '中级', value: 'middle' },
  { label: '高级', value: 'senior' },
  { label: '专家', value: 'expert' },
  { label: '架构师', value: 'architect' },
];

const departmentOptions = [
  { label: '研发部', value: 'rd' },
  { label: '产品部', value: 'product' },
  { label: '设计部', value: 'design' },
  { label: '市场部', value: 'marketing' },
  { label: '销售部', value: 'sales' },
  { label: '人事部', value: 'hr' },
  { label: '财务部', value: 'finance' },
  { label: '运营部', value: 'operation' },
];

const priorityOptions = [
  { label: '低', value: 'low' },
  { label: '中', value: 'medium' },
  { label: '高', value: 'high' },
  { label: '紧急', value: 'urgent' },
];

const statusOptions = [
  { label: '待处理', value: 'pending' },
  { label: '进行中', value: 'processing' },
  { label: '已完成', value: 'completed' },
  { label: '已取消', value: 'cancelled' },
  { label: '已暂停', value: 'paused' },
];

// 级联选择数据
const regionOptions = [
  {
    label: '华北地区',
    value: 'north',
    children: [
      { label: '北京市', value: 'beijing' },
      { label: '天津市', value: 'tianjin' },
      { label: '河北省', value: 'hebei' },
      { label: '山西省', value: 'shanxi' },
      { label: '内蒙古', value: 'neimenggu' },
    ],
  },
  {
    label: '华东地区',
    value: 'east',
    children: [
      { label: '上海市', value: 'shanghai' },
      { label: '江苏省', value: 'jiangsu' },
      { label: '浙江省', value: 'zhejiang' },
      { label: '安徽省', value: 'anhui' },
      { label: '福建省', value: 'fujian' },
      { label: '江西省', value: 'jiangxi' },
      { label: '山东省', value: 'shandong' },
    ],
  },
  {
    label: '华南地区',
    value: 'south',
    children: [
      { label: '广东省', value: 'guangdong' },
      { label: '广西省', value: 'guangxi' },
      { label: '海南省', value: 'hainan' },
    ],
  },
  {
    label: '华中地区',
    value: 'central',
    children: [
      { label: '湖北省', value: 'hubei' },
      { label: '湖南省', value: 'hunan' },
      { label: '河南省', value: 'henan' },
    ],
  },
];

const skillOptions = [
  { label: 'JavaScript', value: 'javascript' },
  { label: 'TypeScript', value: 'typescript' },
  { label: 'React', value: 'react' },
  { label: 'React Native', value: 'react-native' },
  { 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: 'Swift', value: 'swift' },
  { label: 'Kotlin', value: 'kotlin' },
];

const languageOptions = [
  { label: '中文', value: 'zh' },
  { label: 'English', value: 'en' },
  { label: '日本語', value: 'ja' },
  { label: '한국어', value: 'ko' },
  { label: 'Français', value: 'fr' },
  { label: 'Deutsch', value: 'de' },
  { label: 'Español', value: 'es' },
  { label: 'Русский', value: 'ru' },
];

const experienceOptions = [
  { label: '应届毕业生', value: 'fresh' },
  { label: '1年以下', value: 'less-1' },
  { label: '1-3年', value: '1-3' },
  { label: '3-5年', value: '3-5' },
  { label: '5-10年', value: '5-10' },
  { label: '10年以上', value: 'more-10' },
];

const educationOptions = [
  { label: '高中及以下', value: 'high-school' },
  { label: '大专', value: 'college' },
  { label: '本科', value: 'bachelor' },
  { label: '硕士', value: 'master' },
  { label: '博士', value: 'doctor' },
];

const genderOptions = [
  { label: '男', value: 'male' },
  { label: '女', value: 'female' },
  { label: '不便透露', value: 'other' },
];

const PickerExamplesDemo: React.FC = () => {
  const form = Form.useForm<FormData>({
    defaultValues: {
      city: [],
      priority: ['medium'], // 默认选中中等优先级
      language: ['zh'], // 默认选中中文
    },
  });

  const [cityFixed, setCityFixed] = React.useState<(string | number)[]>([
    'shanghai',
  ]);

  const onSubmit = (data: FormData) => {
    console.log('Form submitted:', data);

    // 获取选中项的标签文本用于显示
    const getLabel = (options: any[], value: string[]) => {
      return (
        options.find((option) => value.includes(option.value))?.label || value
      );
    };

    const cityLabel = getLabel(cityOptions, data.city);
    const categoryLabel = getLabel(categoryOptions, data.category);
    const priorityLabel = getLabel(priorityOptions, data.priority);

    Toast(
      `提交成功！\n城市: ${cityLabel || '未选择'}\n职业类别: ${
        categoryLabel || '未选择'
      }\n优先级: ${priorityLabel || '未选择'}`
    );
  };

  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. 基础单选示例" style={styles.cardStyle} noSpace>
            <Form.Picker
              name="city"
              label="城市"
              placeholder="请选择城市"
              columns={cityOptions}
              rules={{ required: '请选择城市' }}
              message="选择您所在的城市"
            />

            <Form.Picker
              name="category"
              label="职业类别"
              placeholder="请选择职业类别"
              columns={categoryOptions}
              rules={{ required: '请选择职业类别' }}
              message="选择您的职业类别"
            />

            <Form.Picker
              name="level"
              label="技能等级"
              placeholder="请选择技能等级"
              columns={levelOptions}
              rules={{
                required: '请选择技能等级',
                validate: (value: string) => {
                  const category = form.getValues('category');
                  if (category.includes('tech') && value === 'junior') {
                    return '技术开发岗位要求中级以上技能等级';
                  }
                  return true;
                },
              }}
              message="选择您的技能等级"
            />
          </Card>

          {/* 带默认值和验证的示例 */}
          <Card title="2. 带默认值和验证" style={styles.cardStyle} noSpace>
            <Form.Picker
              name="department"
              label="部门"
              placeholder="请选择部门"
              columns={departmentOptions}
              rules={{
                required: '请选择部门',
                validate: (value: string) => {
                  const category = form.getValues('category');
                  if (
                    category.includes('tech') &&
                    !['rd', 'product'].includes(value)
                  ) {
                    return '技术开发类别应选择研发部或产品部';
                  }
                  return true;
                },
              }}
              message="选择您所属的部门"
            />

            <Form.Picker
              name="priority"
              label="优先级"
              placeholder="请选择优先级"
              columns={priorityOptions}
              rules={{ required: '请选择优先级' }}
              message="任务或项目的优先级（默认为中等）"
            />

            <Form.Picker
              name="status"
              label="状态"
              placeholder="请选择状态"
              columns={statusOptions}
              rules={{ required: '请选择状态' }}
              message="当前的处理状态"
            />
          </Card>

          {/* 级联选择示例 */}
          <Card title="3. 级联选择示例" style={styles.cardStyle} noSpace>
            <Form.Item
              name="region"
              label="地区"
              message="选择省份和城市（级联选择）"
              rules={{
                required: '请选择地区',
                validate: (value: string[]) => {
                  if (!value || value.length < 2) {
                    return '请选择完整的地区信息';
                  }
                  return true;
                },
              }}
            >
              <Form.Picker
                name="region"
                placeholder="请选择地区"
                columns={regionOptions}
                title="选择地区"
                confirmButtonText="确认选择"
                cancelButtonText="取消"
              />
            </Form.Item>
          </Card>

          {/* 高级配置示例 */}
          <Card title="4. 高级配置示例" style={styles.cardStyle} noSpace>
            <Form.Picker
              name="skill"
              label="技能"
              placeholder="请选择主要技能"
              columns={skillOptions}
              rules={{
                required: '请选择技能',
                validate: (value: string) => {
                  const category = form.getValues('category');
                  if (
                    category.includes('tech') &&
                    ![
                      'javascript',
                      'typescript',
                      'react',
                      'react-native',
                      'vue',
                      'angular',
                      'nodejs',
                    ].includes(value)
                  ) {
                    return '技术开发类别请选择前端或后端相关技能';
                  }
                  return true;
                },
              }}
              message="选择您最擅长的技能"
              confirmButtonText="确认技能"
              cancelButtonText="重新选择"
              title="选择技能"
            />

            <Form.Picker
              name="language"
              label="语言"
              placeholder="请选择语言"
              columns={languageOptions}
              rules={{ required: '请选择语言' }}
              message="选择您的主要使用语言（默认中文）"
              title="选择语言"
            />

            <Form.Picker
              name="experience"
              label="工作经验"
              placeholder="请选择工作经验"
              columns={experienceOptions}
              rules={{
                required: '请选择工作经验',
                validate: (value: string) => {
                  const level = form.getValues('level');
                  if (
                    level.includes('senior') &&
                    ['fresh', 'less-1', '1-3'].includes(value)
                  ) {
                    return '高级技能等级需要3年以上工作经验';
                  }
                  if (
                    level.includes('expert') &&
                    !['5-10', 'more-10'].includes(value)
                  ) {
                    return '专家级别需要5年以上工作经验';
                  }
                  return true;
                },
              }}
              message="选择您的工作经验年限"
            />
          </Card>

          {/* 不同样式配置示例 */}
          <Card title="5. 样式配置示例" style={styles.cardStyle} noSpace>
            <Form.Picker
              name="education"
              label="学历"
              placeholder="请选择学历"
              columns={educationOptions}
              rules={{ required: '请选择学历' }}
              message="选择您的最高学历"
              inputProps={{
                style: {
                  borderColor: '#52c41a',
                  borderRadius: 8,
                },
                prefix: '🎓',
              }}
            />

            <Form.Picker
              name="gender"
              label="性别"
              placeholder="请选择性别"
              columns={genderOptions}
              message="选择您的性别（可选）"
              inputProps={{
                size: 'small',
                style: {
                  borderColor: '#1890ff',
                },
              }}
            />
          </Card>

          {/* 禁用状态示例 */}
          <Card title="6. 禁用状态示例" style={styles.cardStyle} noSpace>
            <Form.Picker
              name="readonlyCategory"
              label="只读类别"
              placeholder="此字段为只读"
              columns={categoryOptions}
              disabled
              message="此字段当前不可编辑"
            />

            <Form.Item
              name="conditionalSkill"
              label="条件启用技能"
              message="需要先选择职业类别才能启用"
            >
              <Form.Picker
                name="conditionalSkill"
                placeholder="请先选择职业类别"
                columns={skillOptions}
                disabled={!form.watch('category')}
              />
            </Form.Item>
          </Card>

          {/* 自定义验证示例 */}
          <Card title="7. 复杂验证示例" style={styles.cardStyle} noSpace>
            <Form.Item
              name="advancedValidation"
              label="综合验证"
              message="基于多个字段的复合验证"
              rules={{
                validate: () => {
                  const { category, level, experience, education } =
                    form.getValues();

                  // 技术岗位的复合验证
                  if (category.includes('tech')) {
                    if (
                      level.includes('expert') &&
                      education.includes('high-school')
                    ) {
                      return '技术专家级别通常需要大专以上学历';
                    }
                    if (
                      level.includes('architect') &&
                      !['bachelor', 'master', 'doctor'].some((ed) =>
                        education.includes(ed)
                      )
                    ) {
                      return '架构师级别通常需要本科以上学历';
                    }
                    if (
                      level.includes('senior') &&
                      experience.includes('fresh')
                    ) {
                      return '高级技术人员不能是应届毕业生';
                    }
                  }

                  return true;
                },
              }}
            >
              <Form.Picker
                name="advancedValidation"
                placeholder="综合验证字段"
                columns={[
                  { label: '通过验证', value: 'pass' },
                  { label: '验证失败', value: 'fail' },
                ]}
              />
            </Form.Item>
          </Card>
        </Form.FormProvider>
        <Card title="8. 传入 value 优先级示例" style={styles.cardStyle} noSpace>
          <View style={{ padding: 12 }}>
            <Text style={{ marginBottom: 8 }}>当前值：{cityFixed}</Text>
            <Form.Picker
              control={form.control}
              name="cityFixed"
              label="城市（外部指定）"
              columns={cityOptions}
              value={cityFixed}
              onConfirm={(v) => setCityFixed(v)}
            />
          </View>
        </Card>
      </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 PickerExamplesDemo;