/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React, { useState } from 'react';
import { View, Text, FlatList, TouchableOpacity, StyleSheet } from 'react-native';

const App = () => {
  // 左侧列表的数据
  const categories = ['Category 1', 'Category 2', 'Category 3', 'Category 4'];

  // 右侧列表的数据 (基于左侧选中的分类)
  const data = {
    'Category 1': ['Item 1-1', 'Item 1-2', 'Item 1-3'],
    'Category 2': ['Item 2-1', 'Item 2-2'],
    'Category 3': ['Item 3-1', 'Item 3-2', 'Item 3-3', 'Item 3-4'],
    'Category 4': ['Item 4-1', 'Item 4-2', 'Item 4-3']
  };

  // 当前选中的分类
  const [selectedCategory, setSelectedCategory] = useState(categories[0]);

  return (
    <View style={styles.container}>
      {/* 左侧列表 */}
      <FlatList
        style={styles.leftList}
        data={categories}
        keyExtractor={(item) => item}
        renderItem={({ item }) => (
          <TouchableOpacity
            onPress={() => setSelectedCategory(item)}
            style={[
              styles.item,
              selectedCategory === item && styles.selectedItem
            ]}
          >
            <Text style={styles.itemText}>{item}</Text>
          </TouchableOpacity>
        )}
      />

      {/* 右侧列表 */}
      <FlatList
        style={styles.rightList}
        data={data[selectedCategory]}
        keyExtractor={(item) => item}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text style={styles.itemText}>{item}</Text>
          </View>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    padding: 10
  },
  leftList: {
    width: '40%',
    marginRight: 10
  },
  rightList: {
    width: '60%'
  },
  item: {
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc'
  },
  selectedItem: {
    backgroundColor: '#dcdcdc'
  },
  itemText: {
    fontSize: 16
  }
});

export default App;