import React from 'react';
import { Image, Platform, ScrollView, StyleSheet, Text, Button, TextInput, TouchableOpacity, View, Slider, ImageBackground, Dimensions, Alert, StatusBar, FlatList, AppState, BackHandler, AsyncStorage, ActivityIndicator, ToastAndroid, RefreshControl, TouchableWithoutFeedback } from 'react-native';
import { createDrawerNavigator, DrawerItems } from 'react-navigation-drawer';
import { SearchBar } from 'react-native-elements';
import { FontAwesome, Entypo, MaterialIcons, Ionicons, AntDesign, Feather } from '@expo/vector-icons';
import Constants from 'expo-constants';
import { withNavigationFocus, DrawerActions, DrawerNavigator } from 'react-navigation';
import settings from './Constants.js';
import Toast, { DURATION } from 'react-native-easy-toast';
import Carousel, { Pagination } from 'react-native-snap-carousel';
import { Switch } from 'react-native-switch';
import Modal from "react-native-modal";
import { Searchbar } from 'react-native-paper';
import * as Permissions from 'expo-permissions';
import { BarCodeScanner } from 'expo-barcode-scanner';
import { Card } from 'react-native-elements';
const {
  width,
  height
} = Dimensions.get('window');
const SERVER_URL = settings.url;
import i18n from 'i18n-js';
import * as Localization from 'expo-localization';

class ManageUsers extends React.Component {
  constructor(props) {
    super(props);

    this.changeVal = () => {
      this.setState({
        bool: !this.state.bool
      }); // StatusBar.setBackgroundColor('#f3f3f3')
    };

    this.setServerurl = async () => {
      const SERVER_URL = await AsyncStorage.getItem('SERVER_URL');
      this.setState({
        SERVER_URL: SERVER_URL
      });
    };

    this.state = {
      bool: false
    };
    willFocus = props.navigation.addListener('didFocus', payload => {
      this.changeVal();
    });
  }

  componentDidMount() {
    this.setServerurl();
  }

  render() {
    return /*#__PURE__*/React.createElement(View, {
      style: {
        flex: 1,
        backgroundColor: '#f3f3f3'
      }
    }, /*#__PURE__*/React.createElement(Toast, {
      style: {
        backgroundColor: 'grey'
      },
      textStyle: {
        color: '#fff'
      },
      ref: "toast",
      position: "top"
    }), /*#__PURE__*/React.createElement(View, {
      style: {
        height: Constants.statusBarHeight,
        backgroundColor: '#f3f3f3'
      }
    }, /*#__PURE__*/React.createElement(StatusBar, {
      translucent: true,
      barStyle: "dark-content",
      backgroundColor: '#f3f3f3',
      networkActivityIndicatorVisible: false
    })), /*#__PURE__*/React.createElement(View, {
      style: {
        flex: 1
      }
    }, /*#__PURE__*/React.createElement(View, {
      style: {
        height: 55,
        backgroundColor: '#f3f3f3'
      }
    }, /*#__PURE__*/React.createElement(View, {
      style: {
        flexDirection: 'row',
        height: 55,
        alignItems: 'center',
        backgroundColor: '#f3f3f3'
      }
    }, /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: () => this.props.navigation.navigate('Main'),
      style: {
        position: 'absolute',
        left: 0,
        top: 0,
        bottom: 0,
        justifyContent: 'center',
        alignItems: 'center',
        width: width * 0.15
      }
    }, /*#__PURE__*/React.createElement(MaterialIcons, {
      name: 'keyboard-backspace',
      size: 30,
      color: '#252525'
    })))), /*#__PURE__*/React.createElement(View, {
      style: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
      }
    }, /*#__PURE__*/React.createElement(Text, {
      style: {
        color: '#252525',
        fontSize: 30,
        fontWeight: '600'
      }
    }, "Manage Employee"), /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: () => {
        this.props.navigation.navigate('EmployeeList');
      },
      style: {
        marginVertical: 25,
        backgroundColor: '#fff',
        flexDirection: 'row',
        borderRadius: 25,
        borderColor: 'grey',
        paddingVertical: 15
      }
    }, /*#__PURE__*/React.createElement(View, {
      style: {
        flex: 0.2,
        alignItems: 'center'
      }
    }, /*#__PURE__*/React.createElement(Image, {
      style: {
        width: 20,
        height: 20
      },
      source: require('./Images/icons8-permanent-job-96.png')
    })), /*#__PURE__*/React.createElement(View, {
      style: {
        flex: 0.8
      }
    }, /*#__PURE__*/React.createElement(Text, {
      style: {
        color: '#252525',
        fontSize: 18,
        fontWeight: '600'
      }
    }, "All"))), /*#__PURE__*/React.createElement(View, {
      style: {
        backgroundColor: '#fff',
        borderRadius: 25,
        borderColor: 'grey'
      }
    }, /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: () => {
        this.props.navigation.navigate('NoticePeriod');
      },
      style: {
        width: '100%',
        paddingVertical: 15,
        flexDirection: 'row',
        borderBottomWidth: 1,
        borderColor: '#f2f2f2'
      }
    }, /*#__PURE__*/React.createElement(View, {
      style: {
        flex: 0.2,
        alignItems: 'center'
      }
    }, /*#__PURE__*/React.createElement(Image, {
      style: {
        width: 20,
        height: 20
      },
      source: require('./Images/icons8-disclaimer-100.png')
    })), /*#__PURE__*/React.createElement(View, {
      style: {
        flex: 0.8
      }
    }, /*#__PURE__*/React.createElement(Text, {
      style: {
        color: '#252525',
        fontSize: 18,
        fontWeight: '600'
      }
    }, "On Notice Period"))), /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: () => {
        this.props.navigation.navigate('OldEmployees');
      },
      style: {
        width: '100%',
        paddingVertical: 15,
        flexDirection: 'row',
        borderBottomWidth: 1,
        borderColor: '#f2f2f2'
      }
    }, /*#__PURE__*/React.createElement(View, {
      style: {
        flex: 0.2,
        alignItems: 'center'
      }
    }, /*#__PURE__*/React.createElement(Image, {
      style: {
        width: 20,
        height: 20
      },
      source: require('./Images/icons8-old-man-100.png')
    })), /*#__PURE__*/React.createElement(View, {
      style: {
        flex: 0.8
      }
    }, /*#__PURE__*/React.createElement(Text, {
      style: {
        color: '#252525',
        fontSize: 18,
        fontWeight: '600'
      }
    }, "Old Employees"))), /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: () => {
        this.props.navigation.navigate('TeamPage');
      },
      style: {
        width: '100%',
        paddingVertical: 15,
        flexDirection: 'row'
      }
    }, /*#__PURE__*/React.createElement(View, {
      style: {
        flex: 0.2,
        alignItems: 'center'
      }
    }, /*#__PURE__*/React.createElement(Image, {
      style: {
        width: 20,
        height: 20
      },
      source: require('./Images/icons8-member-100.png')
    })), /*#__PURE__*/React.createElement(View, {
      style: {
        flex: 0.8
      }
    }, /*#__PURE__*/React.createElement(Text, {
      style: {
        color: '#252525',
        fontSize: 18,
        fontWeight: '600'
      }
    }, "Teams"))))), /*#__PURE__*/React.createElement(View, {
      style: {
        flexDirection: 'row',
        marginBottom: 30
      }
    }, /*#__PURE__*/React.createElement(View, {
      style: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
      }
    }, /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: () => {
        this.props.navigation.navigate('NewEmployee');
      },
      style: {
        flexDirection: 'row',
        backgroundColor: '#CACBC5',
        height: 45,
        alignItems: 'center',
        paddingHorizontal: 15,
        borderRadius: 10
      }
    }, /*#__PURE__*/React.createElement(Feather, {
      name: "user-plus",
      size: 24,
      color: "#393939"
    }), /*#__PURE__*/React.createElement(Text, {
      style: {
        color: '#393939',
        fontSize: 18,
        fontWeight: '600',
        paddingHorizontal: 4,
        paddingLeft: 10
      }
    }, "Add New Employee"))))));
  }

}

ManageUsers.navigationOptions = ({
  navigation
}) => {
  const {
    params = {}
  } = navigation.state;
  return {
    header: null
  };
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'flex-start'
  },
  shadow: {
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0,
    shadowRadius: 3.84,
    elevation: 3
  }
});
export default ManageUsers;