import { Ionicons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import { Body, H3, Icon, ListItem, Right } from "native-base";
import React, { useRef } from "react";
import { useTranslation } from "react-i18next";
import { Animated, Text } from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import Swipeable from "react-native-gesture-handler/Swipeable";
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
    >
      <TouchableOpacity onPress={onPress}>
        <ListItem>
          <H3>{item.ro_number || t("general.labels.na")}</H3>

          <Body style={{ marginLeft: 10 }}>
            <Text>{`${item.ownr_fn || ""} ${item.ownr_ln || ""} ${
              item.ownr_co_nm || ""
            } - ${item.v_model_yr || ""} ${item.v_make_desc || ""} ${
              item.v_model_desc || ""
            }`}</Text>
          </Body>
          <Right>
            <Icon active name="arrow-forward" />
          </Right>
        </ListItem>
      </TouchableOpacity>
    </Swipeable>
  );
}

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