import React, {useState} from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  FlatList,
} from 'react-native';
import R from '../../../assets/R';
import {getFontXD} from '../../../Config/Functions';
import Item from './item';

const fillers = [
  {
    id: '1',
    title: 'Ngoại hối',
  },
  {
    id: '2',
    title: 'Cổ phiếu',
  },
  {
    id: '3',
    title: 'Hàng hoá',
  },
  {
    id: '4',
    title: 'Chỉ số',
  },
];

const data = [
  {
    id: '1',
    increase: true,
    title:
      'USD/RUB Giao dich trong ngày:khi 74,020 là điểm hỗ trợ,trông chờ 74,860.',
    content: 'khi 74,020 là điểm hỗ trợ,trông chờ 74,860',
    ratio: 'USR/RUB',
    time: '45 min ago',
  },
  {
    id: '2',
    increase: false,
    title:
      'USD/AUD Giao dich trong ngày:Xu hướng gỉam lấn áp khi 84,80 là điểm kháng cự.',
    content: 'khi 74,020 là điểm hỗ trợ,trông chờ 74,860',
    ratio: 'USD/AUD',
    time: '32 min ago',
  },
  {
    id: '3',
    increase: true,
    title:
      'USD/RUB Giao dich trong ngày:khi 74,020 là điểm hỗ trợ,trông chờ 74,860.',
    content: 'khi 74,020 là điểm hỗ trợ,trông chờ 74,860',
    ratio: 'USR/RUB',
    time: '2 h ago',
  },
  {
    id: '4',
    increase: false,
    title:
      'USD/RUB Giao dich trong ngày:khi 74,020 là điểm hỗ trợ,trông chờ 74,860.',
    content: 'khi 74,020 là điểm hỗ trợ,trông chờ 74,860',
    ratio: 'USR/RUB',
    time: '45 min ago',
  },
  {
    id: '5',
    increase: true,
    title:
      'USD/RUB Giao dich trong ngày:khi 74,020 là điểm hỗ trợ,trông chờ 74,860.',
    content: 'khi 74,020 là điểm hỗ trợ,trông chờ 74,860',
    ratio: 'USR/RUB',
    time: '45 min ago',
  },
];

const NewFeed = (props) => {
  const [selected, setSelected] = useState(1);

  return (
    <View style={{flex: 1, backgroundColor: 'white'}}>
      <View style={styles.fillterView}>
        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
          {fillers.map((e) => (
            <TouchableOpacity
              onPress={() => setSelected(e.id)}
              key={e.id}
              style={[
                styles.item,
                e.id == selected ? {backgroundColor: '#BCD7F8'} : {},
              ]}>
              <Text
                style={[
                  styles.txt,
                  e.id == selected ? {color: '#1C6AF6'} : {},
                ]}>
                {e.title}
              </Text>
            </TouchableOpacity>
          ))}
        </ScrollView>
      </View>
      <View style={{flex: 1, paddingHorizontal: 10}}>
        <FlatList
          showsVerticalScrollIndicator={false}
          keyExtractor={(item, index) => item.id}
          data={data}
          renderItem={({item}) => <Item item={item} />}
        />
      </View>
    </View>
  );
};

export default NewFeed;

const styles = StyleSheet.create({
  fillterView: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 10,
  },
  item: {
    backgroundColor: '#EBEBEB',
    marginRight: 40,
    paddingHorizontal: 10,
    paddingVertical: 6,
    marginLeft: 20,
  },
  txt: {
    fontSize: getFontXD(42),
    color: R.colors.black,
  },
});
