import { Card, CardItem, H3, SwipeRow } from "native-base";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { useNavigation } from "@react-navigation/native";
import Swipeable from "react-native-gesture-handler/Swipeable";
import { useTranslation } from "react-i18next";
import { Ionicons } from "@expo/vector-icons";
import styles from "../styles";

const RenderRightAction = (props) => {
  const { t } = useTranslation();
  return (
    <View style={[styles.swipe_view, styles.swipe_view_blue]}>
      <Ionicons name="ios-camera" size={24} color="white" />
      <Text style={styles.swipe_text}>{t("joblist.actions.swipecamera")}</Text>
    </View>
  );
};

export default function JobListItem({ item }) {
  console.log("JobListItem -> item", item);
  const navigation = useNavigation();

  const onPress = () => {
    navigation.push("JobDetail", {
      jobId: item.id,
      title: item.ro_number ? item.ro_number : `EST-${item.est_number}`,
    });
  };

  return (
    <Swipeable renderRightActions={() => <RenderRightAction />}>
      <Card>
        <CardItem header bordered first button onPress={onPress}>
          <View style={localStyles.item_header}>
            <H3 style={localStyles.item_header_content}>
              {item.ro_number ? item.ro_number : `EST-${item.est_number}`}
            </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>
        </CardItem>
      </Card>
    </Swipeable>
  );
}
const localStyles = StyleSheet.create({
  item_header: {
    flexDirection: "row",
    alignItems: "center",
  },
  item_header_margin: { marginLeft: 10 },
});
