import React, {useEffect, useState} from 'react';
import {View, Text, StyleSheet, FlatList, Platform, Alert} from 'react-native';
import R from '../../../assets/R';
import HeaderBack from '../../../components/Header/HeaderBack';
import Item from './Item';
import {getListMethod} from '../../../apis/Functions/Deposit';

const MethodPayView = (props) => {
  const [data, setData] = useState([]);

  useEffect(() => {
    getData();
  }, []);

  const getData = async () => {
    const res = await getListMethod({
      platform: Platform.OS,
    });
    if (res.data.code == 200 && res.data.data) {
      setData(res.data.data);
    } else {
      alert('Không lấy được danh sách phương thức!');
    }
  };

  return (
    <View style={{flex: 1}}>
      <HeaderBack title={'Chọn phương thức thanh toán'} />
      <View style={{flex: 1}}>
        <FlatList
          keyExtractor={(item) => item.id}
          showsVerticalScrollIndicator={false}
          numColumns={2}
          columnWrapperStyle={{
            marginHorizontal: 20,
            justifyContent: 'space-between',
          }}
          data={data}
          renderItem={({item}) => <Item item={item} />}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({});

export default MethodPayView;
