import React, { useState } from "react";
import { useQuery } from "@apollo/client";
import { StyleSheet, Text, View } from "react-native";
import { Dropdown } from "react-native-element-dropdown";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";

import { selectBodyshop } from "../../redux/user/user.selectors";
import { QUERY_EMPLOYEE_BY_ID } from "../../graphql/employees.queries";
import { useEffect } from "react";
import { t } from "i18next";

const mapStateToProps = createStructuredSelector({
    bodyshop: selectBodyshop
    // timeTicketJobId: selectCurrentTimeTicketJobId,
    // timeTicketJob: selectCurrentTimeTicketJob,
  });

// const mapDispatchToProps = {};

export function CostCenterSelect(props) {
  const currentRatesNCostCenters = props.currentRatesNCostCenters;
  const bodyshop = props.bodyshop;

  const [value, setValue] = useState(null);
  const [isFocus, setIsFocus] = useState(false);
  const [costCenters, setCostCenters] = useState([]);

  useEffect(() => {
    if (typeof currentRatesNCostCenters !== "undefined") {
      var count = Object.keys(currentRatesNCostCenters).length;
      let selectDataArray = [];
      for (let i = 0; i < count; i++) {
        selectDataArray.push({
          value: currentRatesNCostCenters[i].cost_center,
          label: bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber ? t(
              `joblines.fields.lbr_types.${currentRatesNCostCenters[i].cost_center.toUpperCase()}`
            )
          : currentRatesNCostCenters[i].cost_center,
          rate: currentRatesNCostCenters[i].rate,
        });
      }
      setCostCenters(selectDataArray);
    }
  }, [currentRatesNCostCenters]);

  return (
    <View style={styles.container}>
      <Dropdown
        style={[styles.dropdown, isFocus && { borderColor: "blue" }]}
        placeholderStyle={styles.placeholderStyle}
        selectedTextStyle={styles.selectedTextStyle}
        inputSearchStyle={styles.inputSearchStyle}
        iconStyle={styles.iconStyle}
        
        maxHeight={200}
        labelField="label"
        valueField="value"
        placeholder={!isFocus ? t("selectcostcenter.labels.placeholder") : t("selectcostcenter.labels.selectedplaceholder")}
        searchPlaceholder={t("selectcostcenter.labels.searchplaceholder")}
        onFocus={() => setIsFocus(true)}
        onBlur={() => setIsFocus(false)}
        data={costCenters}
        value={props.currentValue?.value}
        onChange={(item) => {
          props.onValueSelected(item);
          //setValue(item.value);
          setIsFocus(false);
        }}
      />
    </View>
  );
}

export default connect(mapStateToProps, null)(CostCenterSelect);

const styles = StyleSheet.create({
  container: {
    marginVertical: 4,
    marginHorizontal: 16,
    justifyContent: "center",
    alignContent: "center",
  },
  dropdown: {
    height: 50,
    borderColor: "gray",
    borderWidth: 0.5,
    borderRadius: 4,
    paddingHorizontal: 8,
  },
  icon: {
    marginRight: 5,
  },
  label: {
    position: "absolute",
    backgroundColor: "white",
    left: 22,
    top: 8,
    zIndex: 999,
    paddingHorizontal: 8,
    fontSize: 14,
  },
  placeholderStyle: {
    fontSize: 14,
  },
  selectedTextStyle: {
    fontSize: 14,
  },
  iconStyle: {
    width: 20,
    height: 20,
  },
  inputSearchStyle: {
    height: 40,
    fontSize: 14,
  },
});