import { Formik } from "formik";
import React, { useEffect, useState } from "react";
import { StyleSheet, Text,View, ScrollView } from "react-native";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { Button, Dialog, TextInput } from "react-native-paper";
import { SelectCostCenter } from "../Selects/select-cost-center";
import { JobSearchSelect } from "../Selects/select-job-name";
import DateTimePickerModal from "react-native-modal-datetime-picker";
import {
  selectCurrentEmployee,
  selectRates,
} from "../../redux/employee/employee.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";

//TODO add props needed for call
const mapStateToProps = createStructuredSelector({
  currentEmployee: selectCurrentEmployee,
  currentRatesNCostCenters: selectRates,
  currentBodyshop: selectBodyshop,
});
// const mapDispatchToProps = (dispatch) => ({});

export function TimeTicketCreate({
  currentEmployee,
  currentRatesNCostCenters,
  currentBodyshop
}) {
  const { t } = useTranslation();

  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
  const [date2, setDate2] = useState(new Date());
  const [costCenters, setCostCenters] = useState([]);

  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };
  const hideDatePicker = () => {
    setDatePickerVisibility(false);
  };
  const handleConfirm = (date) => {
    setDate2(date);
    //console.warn("A date has been picked: ", date);
    hideDatePicker();
  };
  const formSubmit = (values) => {
    Dialog.alert({ content: <pre>{JSON.stringify(values, null, 2)}</pre> });
    //TODO update with start call for create time ticket
  };

  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: currentRatesNCostCenters[i].cost_center,
        });
      }
      setCostCenters(selectDataArray);
   }
  }, []);

  return (
    <View style={localStyles.content}>
      <ScrollView>
        <Formik
          initialValues={{
            jobid: "",
            ticketdate: date2.toLocaleDateString(),
            employee: currentEmployee.technician.first_name,
            costcenter: "",
            productivehours: "",
            actualhours: "",
          }}
          onSubmit={formSubmit}
        >
          {({ handleChange, handleBlur, handleSubmit, values }) => (
            <View style={localStyles.topTimeTicketContainer}>
              {/* Below will be replaced with a copy of SelectCostCenter but for jobs*/}
              <JobSearchSelect convertedOnly={!currentBodyshop.tt_allow_post_to_invoiced}
                notExported={!currentBodyshop.tt_allow_post_to_invoiced} />

              {/* Below will be replaced with a Date Picker*/}
              {/* <TextInput style={localStyles.input} mode="flat" onChangeText={handleChange("ticketdate")} onBlur={handleBlur("ticketdate")} value={values.ticketdate} label={"Ticket Date"} /> */}
              <Button mode="outlined" title="TicketDatePickerButton" onPress={showDatePicker} style={localStyles.dateButton}>
                <Text  style={localStyles.textForButton}>Ticket Date: {date2.toLocaleDateString()}</Text>
              </Button>
              <DateTimePickerModal
                isVisible={isDatePickerVisible}
                mode="date"
                date={date2}
                onConfirm={handleConfirm}
                onCancel={hideDatePicker}
              />
              {/* Below will set to auto fill with current employee */}
              <TextInput
                style={localStyles.inputStyle}
                mode="outlined"
                disabled={true}
                onChangeText={handleChange("employee")}
                onBlur={handleBlur("employee")}
                value={values.employee}
                label={"Employee"}
              />

              <SelectCostCenter selectorData={costCenters} />
           
              <TextInput
                style={localStyles.inputStyle}
                mode="outlined"
                onChangeText={handleChange("productivehours")}
                onBlur={handleBlur("productivehours")}
                value={values.productivehours}
                label={"Productive Hours"}
              />
              <TextInput
                style={localStyles.inputStyle}
                mode="outlined"
                onChangeText={handleChange("actualhours")}
                onBlur={handleBlur("actualhours")}
                value={values.actualhours}
                label={"Actual Hours"}
              />
              <Button
                style={localStyles.input}
                onPress={handleSubmit}
                title="Submit"
              >
                <Text style={{ fontSize: 12 }}>Save</Text>
              </Button>
            </View>
          )}
        </Formik>

        {/* Below is for list of jobs/tickets */}
        <View style={localStyles.bottomTimeTicketContainer}></View>
      </ScrollView>
    </View>
  );
}

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

const localStyles = StyleSheet.create({
  content: {
    display: "flex",
    flex: 1,
  },
  topTimeTicketContainer: {},
  bottomTimeTicketContainer: {},
  input: {},
  dateButton: {
    margin: 16,
    height: 40,
    justifyContent: "center",
    alignContent: "center",
    borderColor:"blue",
    borderWidth:0.8,
    flex: 1,
  },
  textForButton: {
    flex: 1,
    justifyContent: "center",
    alignContent: "center",
  },
  inputStyle: {
    margin: 16,
    height: 48,
    fontSize: 16,
  },
});