import React from 'react';
import {
  SafeAreaView,
  Text,
  View,
  TouchableOpacity,
  StyleSheet,
  Image,
  ScrollView,
  Share,
  Alert,
  Linking,
} from 'react-native';
var _ = require('lodash');
import Toast, { DURATION } from 'react-native-easy-toast';
import Switch from 'react-native-switch-pro';
import { width, height } from '../../services/screen';
import { images } from '../../assets/images/imageIndex';
import AsyncStorage from '@react-native-community/async-storage';
import Loading from '../../components/Loading';
import { inject, observer } from 'mobx-react';
import { colors } from '../../assets/styles/colors-theme';
import Rank from '../../components/rank';
import TitleBar from '../../components/titleBar';
import CustomLoginButton from '../../components/customLoginButton';
import { getStatusBarHeight } from 'react-native-status-bar-height';
import { observable } from 'mobx';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import * as Progress from 'react-native-progress';
import FeatherIcon from 'react-native-vector-icons/dist/Feather';
import FontAwesomeIcon from 'react-native-vector-icons/dist/FontAwesome';
import MaterialIcon from 'react-native-vector-icons/dist/MaterialCommunityIcons';
//import Adyen from 'adyen-react-native';
import Menu, {
  MenuProvider,
  MenuTrigger,
  MenuOptions,
  MenuOption,
  renderers,
} from 'react-native-popup-menu';
const { SlideInMenu } = renderers;
const langList = [
  { label: '中文', value: 'hk' },
  { label: 'English', value: 'en' },
];
const API_KEY =
  //'AQEhhmfuXNWTK0Qc+iSem3Y3qfffgjkjOauoEZcB7q2DToV3EMFdWw2+5HzctViMSCJMYAc=-kpW/CqOWAmOBWEEhFHdHKKV/dcUBco7qbCGV+/U6KDE=-F?6e&d8kq%7)?D6H';
  'AQEkhmfuXNWTK0Qc+iSem3Y3qffCENhaJNh8FEMlEb7DNf3Ae1UzEMFdWw2+5HzctViMSCJMYAc=-SmX/AHu3xTVV2+Uek0ZHC2MxuW1df26lENMn6T4DVPw=-f3A?_6;kbd&pgK4g';
const MERCHANT_ACCOUNT =
  //'NironsECOM';
  'Nirons983ECOM';

FontAwesomeIcon.loadFont();
@inject('appStore')
@observer
export default class ManageMembers extends React.Component {
  @observable
  select = false;
  @observable
  data = [];
  @observable
  fakeMembers = [
    {
      name: 'Cilla Mok',
      price: 1000,
      date: '01/02/2021',
      selected: false,
      phone: 96783313,
    },
    {
      name: 'Kelly Chan',
      price: 1250,
      date: '01/02/2021',
      selected: false,
      phone: 54121355,
    },
    {
      name: 'Tommy Wong',
      price: 5000,
      date: '01/02/2021',
      selected: false,
      phone: 90213476,
    },
    {
      name: 'Rex Cheung',
      price: 4000,
      date: '02/02/2021',
      selected: false,
      phone: 50912345,
    },
    {
      name: 'Herry Cheung',
      price: 2000,
      date: '02/02/2021',
      selected: false,
      phone: 6543212,
    },
  ];
  constructor(props) {
    super(props);
    this.store = props.appStore;
    this.data = this.props.route.params.data;
  }

  kickMemberAction(member) {
    console.log(member);
  }

  renderMember() {
    return this.data.map((items, index) => {
      return (
        <View style={{ flex: 1, height: 70, justifyContent: 'center' }}>
          <View style={{ flex: 1, flexDirection: 'row' }}>
            <View style={{ flex: 0.4, justifyContent: 'center' }}>
              <Text style={{ fontWeight: '800', marginLeft: 20, fontSize: 12 }}>
                {items.member.name}
              </Text>
            </View>
            <View style={{ flex: 0.25, justifyContent: 'center' }}>
              <Text style={{ color: colors.labelColor, fontSize: 10 }}>
                {this.store.text.mobilephone}
              </Text>
              <Text style={{ fontSize: 12, marginTop: 5 }}>{items.member.mobile}</Text>
            </View>
            <View style={{ flex: 0.25, justifyContent: 'center' }}>
              {/* <Text style={{color: colors.labelColor, fontSize: 10}}>
                {this.store.text.spendingAmount}
              </Text>
              <Text style={{fontSize: 12, marginTop: 5, fontWeight: '800'}}>
                {this.store.priceHandler(items.price)}
              </Text> */}
            </View>

            <View
              style={{
                flex: 0.1,
                justifyContent: 'center',
                alignItems: 'flex-end',
                marginRight: 20,
              }}>
              <Menu
                name="kick"
                renderer={SlideInMenu}
                onSelect={value => {
                  this.kickMemberAction(value);
                }}>
                <MenuTrigger>
                  <MaterialIcon
                    name={'dots-horizontal'}
                    size={20}
                    color={colors.mainColor}
                  />
                </MenuTrigger>
                <MenuOptions
                  customStyles={{
                    optionText: {
                      margin: 5,
                      color: 'white',
                      fontSize: 15,
                    },
                    optionWrapper: {
                      backgroundColor: colors.mainColor,
                      alignItems: 'center',
                    },
                  }}>
                  {/* <MenuOption value={items} text={'kick'} /> */}
                </MenuOptions>
              </Menu>
            </View>
          </View>
          <View
            style={{
              width: width,
              height: 1,
              backgroundColor: colors.lineColor,

              marginLeft: 20,
            }}
          />
        </View>
      );
    });
  }

  async componentWillMount() { }

  render() {
    return (
      <MenuProvider
        style={{
          flex: 1,
          backgroundColor: colors.bgc,
        }}>
        <Loading loading={this.store.loading} />

        <View style={styles.naviBar}>
          <View style={[styles.barAreaView]}>
            <TouchableOpacity
              style={{
                flex: 0.2,
                justifyContent: 'center',
                alignItems: 'center',
              }}
              onPress={() => {
                this.props.navigation.goBack();
              }}>
              <Icon name="ios-arrow-back" color={'black'} size={40} />
            </TouchableOpacity>
            <View
              style={{
                flex: 0.8,
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <Text style={{ fontSize: 22, fontWeight: '800' }}>
                {this.store.text.manageMembers}
              </Text>
            </View>
            <TouchableOpacity
              style={{
                flex: 0.2,
                justifyContent: 'center',
                alignItems: 'center',
              }}
            // onPress={() => (this.select = !this.select)}
            >
              {/* <Text style={{fontSize: 15, color: colors.mainColor}}>
                {this.select ? this.store.text.cancel : this.store.text.select}
              </Text> */}
            </TouchableOpacity>
          </View>
        </View>
        <ScrollView>{this.renderMember()}</ScrollView>
      </MenuProvider>
    );
  }
}
const styles = StyleSheet.flatten({
  naviBar: {
    width,
    height: Platform.OS === 'ios' ? 70 : 75,
    backgroundColor: 'white',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginTop: Platform.OS === 'ios' ? 0 : getStatusBarHeight(),
  },
  barAreaView: {
    flex: 1,
    marginRight: 20,
    marginLeft: 20,
    marginTop: Platform.OS === 'ios' ? -5 : 15,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },

  subView: {
    marginTop: 20,
    width: width - 40,
  },
  labelText: {
    color: colors.labelColor,
    fontSize: 12,
  },
  lineView: {
    height: 1,
    width: width - 40,
    backgroundColor: colors.lineColor,
    marginTop: 20,
  },
  pointsTextView: {
    fontSize: 25,
    fontWeight: '800',
  },
});
