import { Ionicons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import React from "react";
import { useTranslation } from "react-i18next";
import { Button, List, Title } from "react-native-paper";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.analytics";
import { setCameraJob, setCameraJobId } from "../../redux/app/app.actions";

const mapStateToProps = createStructuredSelector({});
const mapDispatchToProps = (dispatch) => ({
  setCameraJobId: (id) => dispatch(setCameraJobId(id)),
  setCameraJob: (job) => dispatch(setCameraJob(job)),
});

export function JobListItem({ setCameraJob, setCameraJobId, item }) {
  const { t } = useTranslation();
  const navigation = useNavigation();
  // const _swipeableRow = useRef(null);

  // const RenderRightAction = (progress, dragX) => {
  //   const scale = dragX.interpolate({
  //     inputRange: [-100, 0],
  //     outputRange: [0.7, 0],
  //   });

  //   return (
  //     <TouchableOpacity
  //       style={[styles.swipe_view, styles.swipe_view_blue]}
  //       onPress={() => {
  //         logImEXEvent("imexmobile_setcamerajobid_swipe");
  //         setCameraJobId(item.id);
  //         setCameraJob(item);
  //         navigation.navigate("MediaBrowserTab");
  //         _swipeableRow.current.close();
  //       }}
  //     >
  //       <Animated.View
  //         style={{
  //           transform: [{ scale }],
  //         }}
  //       >
  //         <Ionicons name="ios-camera" size={64} color="white" />
  //       </Animated.View>
  //     </TouchableOpacity>
  //   );
  // };

  const onPress = () => {
    logImEXEvent("imexmobile_view_job_detail");
    navigation.push("JobDetail", {
      jobId: item.id,
      title: item.ro_number || t("general.labels.na"),
      job: item,
    });
  };

  return (
    <List.Item
      onPress={onPress}
      title={<Title>{item.ro_number || t("general.labels.na")}</Title>}
      description={`${item.ownr_fn || ""} ${item.ownr_ln || ""} ${
        item.ownr_co_nm || ""
      } - ${item.v_model_yr || ""} ${item.v_make_desc || ""} ${
        item.v_model_desc || ""
      }`}
      right={({ style }) => (
        <Button
          style={[style, { alignSelf: "center" }]}
          onPress={() => {
            logImEXEvent("imexmobile_setcamerajobid_row");
            setCameraJobId(item.id);
            setCameraJob(item);
            navigation.navigate("MediaBrowserTab");
          }}
        >
          <Ionicons
            style={[style, { alignSelf: "center" }]}
            name="add"
            size={32}
            color="dodgerblue"
          />
        </Button>
      )}
    />
  );
}

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