import 'react-native-gesture-handler';
import * as React from 'react';
import { View, StyleSheet, Platform, Picker, ScrollView, Image, Dimensions } from 'react-native';
import { Dialog, Provider, Card, DataTable, Button, Text, Searchbar, Portal, Avatar, Surface } from 'react-native-paper';
import { IconButton, Colors } from 'react-native-paper';
import { useSelector, useDispatch } from 'react-redux'
import RenderHtml from 'react-native-render-html';
import { deleteEmployeeAction, EditEmployeeAction, employeeFilter, getAllEmployeeAction, getAllRolesAction, } from '../../state/actions/employeeAction';
import Header from '../auth/components/header';
import { useToast } from 'react-native-paper-toast';
import isEmpty from '../../state/validations/is-empty';
import EsiSearchDropdown from '../../components/custom/searchable-dropdown';
const filterOptions = [
  {
    value: 'All',
    label: 'All'
  },
  {
    value: 'Partner_Employee_Id',
    label: 'Employee ID'
  },
  {
    value: 'Partner_Employee_Email_Id',
    label: 'Partner Employee Email'
  },
  {
    value: 'Is_Active',
    label: 'Status'
  },
];
const window = Dimensions.get("window");
const screen = Dimensions.get("screen");

const numberOfItemsPerPageList = [5, 10, 20];

function employeeDetails({ navigation }: { navigation: any }) {
  const [page, setPage] = React.useState(0);

  const toast = useToast();
  // Role restriction
  const permissions = useSelector(state => state.auth.permissions);
  const employees = useSelector(state => state.employee.employees.all);
  let employeeMenu = useSelector(state => state.employee.employeeFilter.select);
  let employeeSearch = useSelector(state => state.employee.employeeFilter.search);
  const roles = useSelector(state => state.employee.employeeRoles.roles);
  const [showDropDown, setShowDropDown] = React.useState(false);
  const EmailID = useSelector(state => state.auth?.user);

  const [numberOfItemsPerPage, onItemsPerPageChange] = React.useState(numberOfItemsPerPageList[0]);
  const from = page * numberOfItemsPerPage;
  const to = Math.min((page + 1) * numberOfItemsPerPage, employees?.length);

  const dispatch = useDispatch()
  React.useEffect(() => {
    let formData = {
      Records_Filter: "FILTER",
      Partner_Details_Id: EmailID.Partner_Details_Id
    };
    dispatch(getAllEmployeeAction(formData, toast))
    dispatch(employeeFilter('search', ''));
    dispatch(employeeFilter('select', 'All'));
  }, []);
  React.useEffect(() => {
    let formData1 = {
      Filter: "PARTNER_%",

    };
    dispatch(getAllRolesAction(formData1))

  }, []);


  const [oldSearch, setOldSearch] = React.useState(0);

  const checkEmployeesForTable = () => {

    if (employeeSearch) {
      try {
        if (employeeMenu === "All") {
          return employees.filter(x => {
            let keys = ["Partner_Employee_Id", "Partner_Employee_Email_Id", "Is_Active"];
            for (let i = 0; i < keys.length; i++) {
              try {
                if (x[keys[i]].toLowerCase().includes(employeeSearch.toLowerCase())) {
                  return true;
                }
              } catch (error) {
                if (x[keys[i]].toString().toLowerCase().includes(employeeSearch.toLowerCase())) {
                  return true;
                }
              }
            }
          });

        } else {
          return employees.filter(x => (x[employeeMenu] ? x[employeeMenu].toLowerCase() : '').includes(employeeSearch.toLowerCase()));
        }
      } finally {
        if (page > 0) {
          if (oldSearch !== employeeSearch.length) {
            setOldSearch(employeeSearch.length);
            setPage(0);
          }
        }
        else if (oldSearch !== employeeSearch.length) {
          setOldSearch(employeeSearch.length);
          setPage(0);
        }
      }
    }
    else {
      return employees
    }
  }

  const [dimensions, setDimensions] = React.useState(Dimensions.get('window').width);

  React.useEffect(() => {
    const subscription = Dimensions.addEventListener(
      "change",
      ({ window, screen }) => {
        setDimensions(window.width);
      }
    );
    // return () => subscription?.remove();
  });

  const [order, setOrder] = React.useState('ascending');
  const [orderBy, setOrderBy] = React.useState('Partner_Employee_Id');

  const handleRequestSort = (event, property) => {
    const isAsc = orderBy === property && order === 'ascending';
    setOrder(isAsc ? 'descending' : 'ascending');
    setOrderBy(property);
  };

  const createSortHandler = (property) => (event) => {
    handleRequestSort(event, property);
  };

  function descendingComparator(a, b, orderBy) {
    if (b[orderBy].toLowerCase() < a[orderBy].toLowerCase()) {
      return -1;
    }
    if (b[orderBy].toLowerCase() > a[orderBy].toLowerCase()) {
      return 1;
    }
    return 0;
  }

  function getComparator(order, orderBy) {
    return order === 'descending'
      ? (a, b) => descendingComparator(a, b, orderBy)
      : (a, b) => -descendingComparator(a, b, orderBy);
  }

  function stableSort(array, comparator) {
    const stabilizedThis = array.map((el, index) => [el, index]);
    stabilizedThis.sort((a, b) => {

      const order = comparator(a[0], b[0]);
      if (order !== 0) return order;
      return a[1] - b[1];
    });
    return stabilizedThis.map((el) => el[0]);
  }

  const [visible, setVisible] = React.useState(false);
  const [Edata, setData] = React.useState();
  const [rolevisible, setRoleVisible] = React.useState(false);
  const [Rdata, setRoleData] = React.useState();


  const hideDialog = () => setVisible(false);
  const rolehideDialog = () => setRoleVisible(false);

  const handleChange = itemValue => {
    dispatch(employeeFilter('select', itemValue));
  };
  const handleSearch = value => {
    dispatch(employeeFilter('search', value));
  };

  const data = stableSort(
    checkEmployeesForTable(), getComparator(order, orderBy))


  const deleteEmployee = (employee) => {
    if (employee) {
      const deleteData = {
        Partner_Details_Id: employee.Partner_Details_Id,
        Partner_Employee_Email_Id: employee.Partner_Employee_Email_Id,
        Mobile_Number: employee.Mobile,
        Is_Active: 0,
        User_Type: employee.User_Type,
        Partner_Employee_Id: employee.Partner_Employee_Id
      };
      dispatch(deleteEmployeeAction(deleteData, toast));
    }
  };

  return (
    <Surface style={{
      flex: 1
    }}>
      <Header navigation={navigation} />
      <Provider>
        {/* view popup */}
        <Portal>
          <Dialog visible={visible} onDismiss={hideDialog} style={{ width: (Platform.OS === "web") ? "70%" : "95%", maxHeight: (dimensions >= 500) ? "auto" : 500, marginLeft: 'auto', marginRight: 'auto' }}>
            <View style={{ flexDirection: "row" }}>
              <View style={{ flex: dimensions <= 500 ? 1 : 3 }} />
              <View style={{ flex: dimensions <= 500 ? 1 : 3 }} />
              <View style={{ flex: 0.3, justifyContent: "flex-end", paddingTop: 10 }}>
                <IconButton icon="close" size={20} onPress={() => setVisible(!visible)} />
              </View>
            </View>
            <Dialog.Title style={{ color: "blue", fontSize: 20, marginTop: -30 }}>
              <View style={{ alignItems: "center", width: "100%" }}>
                <Text style={{ textAlign: 'center', color: "blue", fontSize: 16 }}>Partner Employee Details</Text>
              </View>
            </Dialog.Title>
            <Dialog.ScrollArea>
              <ScrollView contentContainerStyle={{ paddingHorizontal: 1 }}>
                <Dialog.Content style={{ marginLeft: -20 }}>
                  {/* <View style={{ flexDirection: "column", paddingTop: 15  }}> */}
                  <View style={{ flexDirection: "row", paddingTop: 15 }}>
                    <View style={{ flex: 2.0 }}><Text style={{ fontWeight: "bold", fontSize: 13 }}>Email</Text></View>
                    <View style={{ flex: 2.5 }}><Text style={{ color: "blue" }}>{Edata?.Partner_Employee_Email_Id} </Text></View>
                  </View>
                  <View style={{ flexDirection: "row", paddingTop: 15 }}>
                    <View style={{ flex: 2.0 }}><Text style={{ fontWeight: "bold", fontSize: 13 }}>Mobile</Text></View>
                    <View style={{ flex: 2.5 }}><Text style={{ color: "blue" }}>{Edata?.Mobile} </Text></View>
                  </View>
                  <View style={{ flexDirection: "row", paddingTop: 15 }}>
                    <View style={{ flex: 2.0 }}><Text style={{ fontWeight: "bold", fontSize: 13 }}>Type</Text></View>
                    <View style={{ flex: 2.5 }}><Text style={{ color: "blue" }}>{Edata?.User_Type} </Text></View>
                  </View>
                  <View style={{ flexDirection: "row", paddingTop: 15 }}>
                    <View style={{ flex: 2.0 }}><Text style={{ fontWeight: "bold", fontSize: 13 }}>Created By</Text></View>
                    <View style={{ flex: 2.5 }}><Text style={{ color: "blue" }}>{Edata?.Created_By} </Text></View>
                  </View>
                  <View style={{ flexDirection: "row", paddingTop: 15 }}>
                    <View style={{ flex: 2.0 }}><Text style={{ fontWeight: "bold", fontSize: 13 }}>Status</Text></View>
                    <View style={{ flex: 2.5 }}><Text style={{ color: Edata?.Is_Active === "true" ? "blue" : "red" }}>{Edata?.Is_Active === "true" ? "Active" : "In-Active"} </Text></View>
                    {/* </View> */}
                  </View>
                </Dialog.Content>
              </ScrollView>
            </Dialog.ScrollArea>
          </Dialog>
        </Portal>
        <Portal>
          <Dialog visible={rolevisible} onDismiss={rolehideDialog} style={{ width: (Platform.OS === "web") ? "70%" : "80%", maxHeight: (dimensions >= 500) ? "auto" : 500, marginLeft: 'auto', marginRight: 'auto' }}>
            <View style={{ flexDirection: "row" }}><View style={{ flex: dimensions <= 500 ? 1 : 3 }} /><View style={{ flex: dimensions <= 500 ? 1 : 3 }} />
              <View style={{ alignItems: "flex-end", paddingTop: 10 }}>
                <IconButton
                  icon="close"
                  size={20}
                  onPress={() => setRoleVisible(!rolevisible)}
                />
              </View></View>
            <Dialog.Title style={{ marginLeft: 50, color: "blue", fontSize: 20, marginTop: -30 }}><Text style={{ textAlign: 'center', color: "blue", fontSize: 16, fontWeight: "bold" }}> Available Roles</Text></Dialog.Title>
            <Dialog.ScrollArea>
              <ScrollView contentContainerStyle={{ paddingHorizontal: 24 }}>
                <Dialog.Content>
                  <View style={{ flexDirection: "column",marginLeft:-15 ,width:150,paddingTop: 10 }}>
                    <View style={{ flex: 1 }}>
                      {roles.map((data, index) => (
                        <View key={index} >
                          <Text style={{ paddingBottom: 10,color: '#026473' }}>{data?.Role_Name?.replace(/_/g, ' ')}</Text>
                        </View>
                      ))}
                    </View>

                  </View>
                </Dialog.Content>
              </ScrollView>
            </Dialog.ScrollArea>
          </Dialog>
        </Portal>
        <ScrollView>
          <View style={{ width: 50, alignItems: "flex-start", marginTop: "2%", flexShrink: 1 }}>
            <Button icon="keyboard-backspace" style={{ width: 130, justifyContent: 'flex-start' }} onPress={() => navigation.navigate('Dashboard')}>
              Go Back
            </Button>
          </View>
          {/* Add Button Navigation */}
          <View style={{
            flexDirection: "column"
          }}>
            <Text style={{ fontSize: 20, fontWeight: "bold", paddingLeft: 17, paddingTop: 20 }}>Partner Employees</Text>
            <View style={{
              flexDirection: "column", paddingTop: 20, alignItems: 'flex-end',
            }}>
              {dimensions <= 700 ?
                <View style={{ flex: 1.5, paddingTop: 8, marginRight: 14, }}>
                  <Button mode="contained"
                    style={{ width: 200 }}
                    onPress={() => { setRoleData(roles); setRoleVisible(!rolevisible) }}>
                    Available Roles
                  </Button>
                </View>
                : null}
              {(permissions.Employees === "write") &&
                (dimensions <= 700 ?
                  <View style={{ flex: 1.5, paddingTop: 8, marginRight: 14 }}>
                    <Button mode="contained" style={{ width: 200 }} onPress={() => navigation.navigate('AddEmployee')}>
                      Add Employee
                    </Button>
                  </View>
                  : null)}
              <View style={{ flex: 0.1 }} />
            </View>
          </View>
          {/* Filter Dropdown */}
          <View style={{
            flexDirection: "row", paddingTop: 20
          }}>
            <View style={{ flex: dimensions <= 700 ? 0.30 : 0.04 }} />
            <View style={{ flex: dimensions <= 700 ? 2.5 : 0.6 }}>
              {Platform.OS !== "web" ?
                <EsiSearchDropdown
                  style={[style.dropdown]}
                  placeholderStyle={style.placeholderStyle}
                  selectedTextStyle={style.selectedTextStyle}
                  inputSearchStyle={style.inputSearchStyle}
                  iconStyle={style.iconStyle}
                  data={filterOptions}
                  containerStyle={style.containerstyle}
                  // search
                  maxHeight={180}
                  labelField="label"
                  valueField="value"
                  placeholder={!showDropDown ? 'All' : ''}
                  // searchPlaceholder="Search..."
                  value={employeeMenu}
                  onFocus={() => setShowDropDown(true)}
                  onBlur={() => setShowDropDown(false)}
                  onUpdateValue={item => {
                    setShowDropDown(false);
                    handleChange(item.value)
                  }}
                /> :
                <Picker
                  selectedValue={employeeMenu}
                  style={{ height: 50, borderRadius: 5, borderWidth: 1, borderColor: '#bdc3c7' }}
                  onValueChange={(itemValue, itemIndex) => handleChange(itemValue)}
                >
                  <Picker.Item label="All" value="All" />
                  <Picker.Item label="Employee ID" value="Partner_Employee_Id" />
                  <Picker.Item label="Partner Employee Email" value="Partner_Employee_Email_Id" />
                  <Picker.Item label="Status" value="Is_Active" />
                </Picker>}
            </View>
            <View style={{ flex: dimensions <= 700 ? 0.3 : 0.6 }} />
            <View style={{ flex: 4 }}>
              <Searchbar
                style={{ borderRadius: 5, borderWidth: 1, borderColor: '#bdc3c7' }}
                placeholder="Search"
                onChangeText={(value) => handleSearch(value)}
                value={employeeSearch}
              />
            </View>
            <View style={{ flex: dimensions <= 700 ? 0.1 : 1.5 }} />
            {dimensions >= 700 ?
              <View style={{ flexWrap: "wrap", flexShrink: 1, marginLeft: 5, marginRight: 14, marginTop: 10, marginBottom: 20 }}>
                <Button mode="contained"
                  onPress={() => { setRoleData(roles); setRoleVisible(!rolevisible) }}>
                  Available Roles
                </Button>
              </View>
              : null}
            <View style={{ flex: dimensions <= 700 ? 0.1 : 1.5 }} />
            {(permissions.Employees === "write") &&
              (dimensions >= 700 ?
                <View style={{ flex: 1, paddingTop: 8 }}>
                  <Button mode="contained" onPress={() => navigation.navigate('AddEmployee')}>
                    Add Employee

                  </Button>
                </View>
                : null)}
            <View style={{ flex: dimensions <= 700 ? null : 0.07 }} />
          </View>
          <ScrollView horizontal={Platform.OS === 'web' && dimensions >= 500 ? false : true}>
            <View style={style.mainbox}>
              <Card>
                {/* Datatable */}
                <DataTable style={{ borderWidth: 1, borderColor: '#bdc3c7' }}>
                  <DataTable.Header style={style.databeHeader}>
                    <DataTable.Title style={style.title} active={orderBy === 'Partner_Employee_Id'}
                      sortDirection={orderBy === 'Partner_Employee_Id' ? order : 'ascending'}
                      onPress={createSortHandler('Partner_Employee_Id')}><Text style={style.titletext}>Employee ID</Text></DataTable.Title>
                    <DataTable.Title style={style.title} active={orderBy === 'Partner_Employee_Email_Id'}
                      sortDirection={orderBy === 'Partner_Employee_Email_Id' ? order : 'ascending'}
                      onPress={createSortHandler('Partner_Employee_Email_Id')}><Text style={style.titletext}>Employee Email ID</Text></DataTable.Title>
                    <DataTable.Title style={style.title} active={orderBy === 'Is_Active'}
                      sortDirection={orderBy === 'Is_Active' ? order : 'ascending'}
                      onPress={createSortHandler('Is_Active')}><Text style={style.titletext}>Status</Text></DataTable.Title>
                    <DataTable.Title style={style.title}><Text style={style.titletext}>Actions</Text></DataTable.Title>
                  </DataTable.Header>
                  {
                    data.slice(page * numberOfItemsPerPage, page * numberOfItemsPerPage + numberOfItemsPerPage).map((employee, index) => (
                      <DataTable.Row style={style.databeBox} key={employee.Partner_Employee_Id}>
                        <DataTable.Cell style={style.tablerow}>{employee.Partner_Employee_Id}</DataTable.Cell>
                        <DataTable.Cell style={style.tablerow}>{employee.Partner_Employee_Email_Id}</DataTable.Cell>
                        <DataTable.Cell style={style.tablerow}>{employee.Is_Active === "true" ? "Active" : "In-Active"}</DataTable.Cell>
                        <DataTable.Cell style={style.tablerow}>
                          <IconButton
                            icon="eye"
                            color={"blue"}
                            size={20}
                            onPress={(e) => { setData(employee); setVisible(!visible) }}
                          />
                          {(permissions.Employees === "write") && (
                            <IconButton
                              icon="square-edit-outline"
                              color={"blue"}
                              size={20}
                              onPress={(e) => navigation.navigate("EditEmployee", { employee: employee })}
                            />)}
                          {(permissions.Employees === "write") && (<IconButton
                            icon="delete"
                            color={"blue"}
                            size={20}
                            onPress={(e) => deleteEmployee(employee)}
                          />)}
                        </DataTable.Cell>
                      </DataTable.Row>
                    ))
                  }
                  {isEmpty(data) &&
                    <Text style={{ fontSize: 16, display: 'flex', justifyContent: 'center', textAlign: "center" }}>
                      No records found.
                    </Text>
                  }
                  <DataTable.Pagination
                    page={page}
                    numberOfPages={Math.ceil(employees?.length / numberOfItemsPerPage)}
                    onPageChange={page => setPage(page)}
                    label={employees?.length ? `${from + 1}-${to} of ${employees?.length}` : '0-0'}
                    showFastPaginationControls
                    //   showFastPagination
                    numberOfItemsPerPageList={numberOfItemsPerPageList}
                    numberOfItemsPerPage={numberOfItemsPerPage}
                    onItemsPerPageChange={onItemsPerPageChange}
                    selectPageDropdownLabel={'Rows per page'}
                  />
                </DataTable>
              </Card>
            </View>
          </ScrollView>
        </ScrollView>
      </Provider>
    </Surface>
  );
}

const style = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    // margin: 10,
    fontSize: 35,
    alignItems: 'center',
    justifyContent: 'center',
    width: 200
  },
  mainbox: {
    textAlign: 'center',
    margin: 15,
    flex: 1,
    justifyContent: 'space-between',
  },
  databeBox: {
    margin: 10,
    textAlign: 'center',
  },
  databeHeader: {
    margin: 10,
    textAlign: 'center',
  },
  dropdown: {
    height: 50,
    borderColor: 'gray',
    borderWidth: 0.5,
    borderRadius: 5,
    paddingHorizontal: 8,
  },
  icon: {
    marginRight: 5,
  },
  dropdownlabel: {
    position: 'absolute',
    backgroundColor: 'white',
    left: 22,
    top: 8,
    zIndex: 999,
    paddingHorizontal: 8,
    fontSize: 14,
  },
  placeholderStyle: {
    fontSize: 16,
  },
  selectedTextStyle: {
    fontSize: 16,
  },
  iconStyle: {
    width: 20,
    height: 20,
  },
  inputSearchStyle: {
    height: 40,
    fontSize: 16,
  },
  containerstyle: {
    width: 150
  },
  titletext: {
    fontWeight: "bold",
    fontSize: 14,
    color: 'black',
  },
  tablerow: {
    justifyContent: "center",
    textAlign: "center",
    width: 140
  },
});

export default employeeDetails