import React, { useCallback, useState } from "react";
import moment from "moment";
import {  View,  Text,  StyleSheet,  ScrollView,  RefreshControl} from "react-native";
import { Button, Card, Headline, Subheading } from "react-native-paper";
import styles from "../styles";

import axios from "axios";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";

import { employeeGetRatesStart } from "../../redux/employee/employee.actions";
import {  selectCurrentEmployee, selectRates, selectGettingRates,  selectSignInError,  selectEmployeeFullName,
} from "../../redux/employee/employee.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";

import { JobIdSearchSelect } from "../Selects/select-job-id";
import  CostCenterSelect  from "../Selects/select-cost-center";
import ErrorDisplay from "../error-display/error-display.component";
import {  selectCurrentTimeTicketJob,  selectCurrentTimeTicketJobId,
} from "../../redux/timetickets/timetickets.selectors";
import { INSERT_NEW_TIME_TICKET } from "../../graphql/timetickets.queries";
import { useMutation, useQuery } from "@apollo/client";
import { QUERY_ACTIVE_TIME_TICKETS } from "../../graphql/timetickets.queries";

import EmployeeClockedInList from "../time-ticket-lists/employee-clockedin-list.component";
import { logImEXEvent } from "../../firebase/firebase.analytics";
import StyleRepeater from "../style-repeater/style-repeater";
// import  SignOutButton  from "../Buttons/employee-sign-out-button.component";
// import  AddTimeTicketButton  from "../Buttons/create-time-ticket-button.component";

const mapStateToProps = createStructuredSelector({
  currentEmployee: selectCurrentEmployee,
  loaderGettingRates: selectGettingRates,
  signingError: selectSignInError,
  currentBodyshop: selectBodyshop,
  currentRatesNCostCenters: selectRates,
  currentSelectedTimeTicketJobId: selectCurrentTimeTicketJobId,
  currentSelectedTimeTicketJob: selectCurrentTimeTicketJob,
  currentEmployeeFullName: selectEmployeeFullName,
});

const mapDispatchToProps = (dispatch) => ({
  employeeGetRatesStart: (employeeId) =>
    dispatch(employeeGetRatesStart(employeeId)),
});

export function ScreenTimeTicketBrowser({
  loaderGettingRates,
  currentEmployee,
  employeeGetRatesStart,
  signingError,
  currentBodyshop,
  currentRatesNCostCenters,
  currentSelectedTimeTicketJob,
  currentSelectedTimeTicketJobId,
  currentEmployeeFullName,
}) {
  const [currentSCC, setCurrentSCC] = useState(null);
  const [currentSJobId, setCurrentSJobId] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [refreshing, setRefreshing] = useState(false);
  const [insertTimeTicket] = useMutation(INSERT_NEW_TIME_TICKET, {
    refetchQueries: ["QUERY_ACTIVE_TIME_TICKETS"],
  });

  const handleFinish = async (values) => {
    console.log("handleFinish called in ScreenTimeTicketBrowser");
    setLoading(true);
    setError(null);

    const theTime = (await axios.post("/utils/time")).data;

    if (!!currentSCC?.value && !!currentSJobId?.value) {
      setError(null);
      // console.log("have all values");
    } else {
      // console.log("missing values!");
      setLoading(false);
      setError({ message: "Please make sure all fields have a value." });
      return;
    }

    const tempVariablesObj = {
      variables: {
        timeTicketInput: [
          {
            bodyshopid: currentBodyshop.id,
            employeeid: currentEmployee?.technician?.id,
            date: moment(theTime).format("YYYY-MM-DD"),
            clockon: moment(theTime),
            jobid: currentSJobId?.value,
            cost_center: currentSCC?.value,
            ciecacode:
              currentBodyshop?.cdk_dealerid || currentBodyshop?.pbs_serialnumber
                ? currentSCC?.value
                : Object.keys(
                    currentBodyshop.md_responsibility_centers.defaults.costs
                  ).find((key) => {
                    return (
                      currentBodyshop.md_responsibility_centers.defaults.costs[
                        key
                      ] === currentSCC?.value
                    );
                  }),
          },
        ],
      },
    };
    // console.info("INSERT_NEW_TIME_TICKET, variables for clockin. : ",tempVariablesObj?.variables?.timeTicketInput[0] );
    const result = await insertTimeTicket(tempVariablesObj);
    // console.log("insertTimeTicket, result :", result);
    setLoading(false);
    if (!!result.errors) {
      // console.log("insertTimeTicket, result.error :", result.errors);
      setError(JSON.stringify(result.errors));
    } else {
      // console.log("insertTimeTicket, result. :", result.data);
      setCurrentSJobId(null);
      setCurrentSCC(null);
    }
  };
  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => {
      setRefreshing(false);
    }, 2000);
  }, []);

  return (
    <ScrollView
      style={styles.cardBackground}
      // contentContainerStyle={{ flexGrow: 0 }}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }
    >
      <StyleRepeater childStyle={{ margin: 4 }}>
        <Card>
          <Card.Title title={"Logged in Employee"} 
          // right={(props) => <SignOutButton />} 
          />
          <Card.Content>
            {currentEmployeeFullName && (
              <Subheading>{currentEmployeeFullName}</Subheading>
            )}
          </Card.Content>
        </Card>
        <Card>
          <Card.Title title={"Clock Into Job"} 
      //     right={(props) => 
      //     <View style={{ flexDirection:"row" }} ><AddTimeTicketButton /> 
      //     <Button mode="outlined"
      // compact={true} loading={loading} onPress={handleFinish} 
      // style={{margin:4}}
      // >
      //       <Text>Clock In</Text>
      //     </Button></View>
      //     } 
          />
          <Card.Content>
          <JobIdSearchSelect
            currentValue={currentSJobId}
            onJobSelected={setCurrentSJobId}
            convertedOnly={!currentBodyshop.tt_allow_post_to_invoiced}
            notExported={!currentBodyshop.tt_allow_post_to_invoiced}
            notInvoiced={!currentBodyshop.tt_allow_post_to_invoiced}
          />
          <CostCenterSelect
            currentValue={currentSCC}
            currentRatesNCostCenters={currentRatesNCostCenters}
            onValueSelected={setCurrentSCC}
          />
          {error && error?.message ? (
            <ErrorDisplay errorMessage={error.message} />
          ) : null}
          <Button mode="outlined" loading={loading} onPress={handleFinish}>
            <Text>Clock In</Text>
          </Button>
          </Card.Content>
        </Card>
      </StyleRepeater>
      <View style={{ flexGrow: 1, flex: 1 }}>
        <EmployeeClockedInList
          technician={currentEmployee}
          isRefresh={refreshing}
        />
      </View>
    </ScrollView>
  );
}

const localStyles = StyleSheet.create({
  content: {
    display: "flex",
    flex: 2,
  },
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ScreenTimeTicketBrowser);