import { Ionicons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import Dinero from "dinero.js";
import { Card, CardItem, H3 } from "native-base";
import React from "react";
import { useTranslation } from "react-i18next";
import { StyleSheet, Text, View } 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 { setCameraJob, setCameraJobId } from "../../redux/app/app.actions";
import styles from "../styles";

const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
});
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 RenderRightAction = (props) => {
    const navigation = useNavigation();
    const { t } = useTranslation();
    return (
      <TouchableOpacity
        style={[styles.swipe_view, styles.swipe_view_blue]}
        onPress={() => {
          setCameraJobId(item.id);
          setCameraJob(item);
          navigation.navigate("CameraTab");
        }}
      >
        <Ionicons name="ios-camera" size={24} color="white" />
        <Text style={styles.swipe_text}>
          {t("joblist.actions.swipecamera")}
        </Text>
      </TouchableOpacity>
    );
  };
  const onPress = () => {
    navigation.push("JobDetail", {
      jobId: item.id,
      title: item.ro_number || t("general.labels.na"),
    });
  };

  return (
    <Swipeable renderRightActions={() => <RenderRightAction />}>
      <TouchableOpacity onPress={onPress}>
        <Card>
          <CardItem header bordered first button>
            <View style={localStyles.item_header}>
              <H3 style={localStyles.item_header_content}>
                {item.ro_number || t("general.labels.na")}
              </H3>
              <Text style={localStyles.item_header_margin}>
                {item.clm_no || ""}
              </Text>
            </View>
          </CardItem>
          <CardItem bordered last button>
            <View>
              <Text>{`${item.ownr_fn || ""} ${item.ownr_ln || ""} ${
                item.ownr_co_nm || ""
              }`}</Text>
              <Text>{`${item.v_model_yr || ""} ${item.v_make_desc || ""} ${
                item.v_model_desc || ""
              }`}</Text>
            </View>
            <View style={[{ width: 150 }, localStyles.card_content_margin]}>
              <Text numberOfLines={1}>{item.ins_co_nm || ""}</Text>
              <Text>
                {Dinero({
                  amount: Math.round(item.clm_total * 100),
                }).toFormat() || ""}
              </Text>
            </View>
          </CardItem>
        </Card>
      </TouchableOpacity>
    </Swipeable>
  );
}
const localStyles = StyleSheet.create({
  item_header: {
    flexDirection: "row",
    alignItems: "center",
  },
  item_header_margin: { marginLeft: 10 },
  card_content_margin: {
    marginLeft: 15,
  },
});
export default connect(mapStateToProps, mapDispatchToProps)(JobListItem);
