import { Ionicons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import React, { useRef } from "react";
import { useTranslation } from "react-i18next";
import { Animated } from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import Swipeable from "react-native-gesture-handler/Swipeable";
import { List } from "react-native-paper";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils";
import { setCameraJob, setCameraJobId } from "../../redux/app/app.actions";
import styles from "../styles";

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"),
    });
  };

  return (
    <Swipeable
      ref={_swipeableRow}
      renderRightActions={RenderRightAction}
      shouldCancelWhenOutside
    >
      <List.Item
        onPress={onPress}
        title={item.ro_number || t("general.labels.na")}
        description={`${item.ownr_fn || ""} ${item.ownr_ln || ""} ${
          item.ownr_co_nm || ""
        } - ${item.v_model_yr || ""} ${item.v_make_desc || ""} ${
          item.v_model_desc || ""
        }`}
      />
    </Swipeable>
  );
}

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