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

export default function NoteListItem({ item }) {
  return (
    <Swipeable renderRightActions={() => <RenderRightAction />}>
      <Card>
        <CardItem bordered>
          <View style={{ display: "flex", flex: 1 }}>
            <Text>{item.text}</Text>
            <View
              style={{
                flexDirection: "row",
                alignSelf: "flex-end",
                alignItems: "center",
              }}
            >
              {item.private && (
                <AntDesign
                  name="eyeo"
                  style={{ margin: 4 }}
                  size={24}
                  color="black"
                />
              )}
              {item.critical && (
                <AntDesign
                  name="warning"
                  style={{ margin: 4 }}
                  size={24}
                  color="tomato"
                />
              )}
              <Text style={{ fontSize: 12 }}>
                {DateTime.fromISO(item.created_at).toLocaleString(
                  DateTime.DATETIME_SHORT
                )}
              </Text>
            </View>
          </View>
        </CardItem>
      </Card>
    </Swipeable>
  );
}

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