import { Formik } from "formik";
import React from "react";
import { StyleSheet, Text } from "react-native";
import { useTranslation } from "react-i18next";
import { View, ScrollView } from "react-native";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { Button, Dialog, TextInput } from "react-native-paper";
import { QUERY_EMPLOYEE_BY_ID } from "../../graphql/employees.queries";
//import SelectDropdown from 'react-native-select-dropdown';
import { SelectCostCenter } from "../Selects/select-cost-center";
import { selectCurrentEmployee } from "../../redux/employee/employee.selectors";
//import {DateTimePicker} from "expo";

//TODO add props needed for call
const mapStateToProps = createStructuredSelector({
  currentEmployee: selectCurrentEmployee,
});

export function TimeTicketCreate() {
  const { t } = useTranslation();

  const formSubmit = (values) => {
    Dialog.alert({ content: <pre>{JSON.stringify(values, null, 2)}</pre> });
    //TODO update with start call for create time ticket
  };

  return (
    <View style={localStyles.content}>
        <ScrollView>
      <Formik
       
        initialValues={{
          jobid: "",
          ticketdate: "",
          employee: "",
          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*/}
            <TextInput
              style={localStyles.input}
              onChangeText={handleChange("jobid")}
              mode="flat"
              onBlur={handleBlur("jobid")}
              value={values.jobid}
              label={"Job to Post Against"}
            />
            
            {/* 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"}
            />
            {/* Below will set to auto fill with current employee */}
            <TextInput
              style={localStyles.input}
              mode="flat"
              onChangeText={handleChange("employee")}
              onBlur={handleBlur("employee")}
              value={values.employee}
              label={"Employee"}
            />
            <SelectCostCenter />
            {/* Below will be replaced with SelectCostCenter */}
            <TextInput
              style={localStyles.input}
              mode="flat"
              onChangeText={handleChange("costcenter")}
              onBlur={handleBlur("costcenter")}
              value={values.costcenter}
              label={"Cost Center"}
            />
            <TextInput
              style={localStyles.input}
              mode="flat"
              onChangeText={handleChange("productivehours")}
              onBlur={handleBlur("productivehours")}
              value={values.productivehours}
              label={"Productive Hours"}
            />
            <TextInput
              style={localStyles.input}
              mode="flat"
              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(null, null)(TimeTicketCreate);

const localStyles = StyleSheet.create({
  content: {
    display: "flex",
    flex: 1
  },
  topTimeTicketContainer: {
  },
  bottomTimeTicketContainer: {
  },
  input: {
  },
});