import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { ScrollView } from 'react-native';
import Form from '../index';
import Button from '../../Button';
import { BottomSafeArea, Fill, Toast } from '@xrnjs/ui';
import Card from '_global/Card';

type FormData = {
  category: string;
  category1: string;
  tags: string[];
};

const CategoryList = [
  { label: '前端开发', value: 'frontend' },
  { label: '后端开发', value: 'backend' },
  { label: '移动开发', value: 'mobile' },
  { label: '数据科学', value: 'data' },
];

const SelectExamplesDemo: React.FC = () => {
  const form = Form.useForm<FormData>({
    defaultValues: {
      category: '',
      tags: [],
    },
  });

  const [categoryFixed, setCategoryFixed] = React.useState<string>('backend');
  const getLabelByValue = (
    opts: { label: string; value: string }[],
    v?: string
  ) => opts.find((o) => o.value === v)?.label || '';

  const onSubmit = (data: FormData) => {
    console.log('Form submitted:', data);
    Toast(
      [
        '提交成功',
        `分类: ${data.category || '未选择'}`,
        `分类1: ${data.category1 || '未选择'}`,
        `标签: ${data.tags.join(', ') || '未选择'}`,
      ].join('\n')
    );
  };

  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.Select）" style={styles.cardStyle} noSpace>
            <Form.Select
              name="category"
              label="分类"
              placeholder="请选择分类"
              accessibilityLabel="选择分类"
              options={CategoryList}
              rules={{ required: '请选择分类' }}
              onChange={(val) => console.log('单选变更:', val)}
            />
            <Form.Select
              name="category1"
              label="点击确定不关闭"
              placeholder="请选择分类"
              accessibilityLabel="选择分类"
              options={CategoryList}
              rules={{ required: '请选择分类' }}
              onChange={(val) => console.log('单选变更:', val)}
              showConfirmButton
              onConfirm={(val) => {
                console.log('单选确认:', val);
                return false; // 不关闭
              }}
            />
          </Card>

          {/* 多选示例 */}
          <Card
            title="2. 多选（Form.Select.SelectType.checkbox）"
            style={styles.cardStyle}
            noSpace
          >
            <Form.Select
              name="tags"
              label="标签"
              placeholder="请选择标签"
              accessibilityLabel="选择标签"
              type={Form.Select.SelectType.checkbox}
              options={[
                { label: '性能优化', value: 'performance' },
                { label: '测试相关', value: 'testing' },
                { label: 'UI 设计', value: 'ui' },
                { label: '网络请求', value: 'network' },
                { label: '国际化', value: 'i18n' },
              ]}
              onChange={(val) => console.log('多选变更:', val)}
              onConfirm={(val) => {
                console.log('多选确认:', val);
              }}
            />
          </Card>

          {/* 高级用法：搜索 + 自定义筛选 */}
          <Card
            title="3. 高级用法（搜索与筛选）"
            style={styles.cardStyle}
            noSpace
          >
            <Form.Select
              name="category"
              label="带搜索的分类选择"
              placeholder="请输入关键词搜索"
              accessibilityLabel="搜索选择分类"
              showSearch
              searchEmptyText="未找到匹配项"
              options={[
                {
                  label: '前端开发',
                  value: 'frontend',
                  subLabel: 'React/React Native/Vue',
                },
                {
                  label: '后端开发',
                  value: 'backend',
                  subLabel: 'Node.js/Java/Go',
                },
                {
                  label: '移动开发',
                  value: 'mobile',
                  subLabel: 'iOS/Android/跨端',
                },
                {
                  label: '数据科学',
                  value: 'data',
                  subLabel: 'AI/ML/数据可视化',
                },
              ]}
              filterOption={(inputValue, option) => {
                const v = inputValue.trim().toLowerCase();
                if (!v) return true;
                return (
                  String(option.label).toLowerCase().includes(v) ||
                  String((option as any).subLabel || '')
                    .toLowerCase()
                    .includes(v)
                );
              }}
              onSearch={(val) => console.log('搜索内容:', val)}
            />
          </Card>
        </Form.FormProvider>
        <Card title="4. 传入 value 优先级示例" style={styles.cardStyle} noSpace>
          <View style={{ padding: 12 }}>
            <Text style={{ marginBottom: 8 }}>
              当前值：{getLabelByValue(CategoryList, categoryFixed)} (
              {categoryFixed})
            </Text>
            <Form.Select
              control={form.control}
              name="categoryFixed"
              label="分类（外部指定）"
              placeholder="应显示为后端开发"
              options={CategoryList}
              value={categoryFixed}
              onChange={(v) => setCategoryFixed(v as string)}
            />
          </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>
      </View>
      <BottomSafeArea />
    </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 SelectExamplesDemo;