import React from "react";
import { useTranslation } from "react-i18next";
import { FlatList, RefreshControl, Text } from "react-native";
import { Card } from "react-native-paper";
import JobNotesItem from "../job-notes-item/job-notes-item.component";

export default function JobNotes({ job, loading, refetch }) {
  const { t } = useTranslation();
  if (!job) {
    <Card>
      <Text>Job is not defined.</Text>
    </Card>;
  }

  const onRefresh = async () => {
    return refetch();
  };

  if (job.notes.length === 0)
    return (
      <Card>
        <Card.Content>
          <Text>{t("jobdetail.labels.nojobnotes")}</Text>
        </Card.Content>
      </Card>
    );

  return (
    <FlatList
      refreshControl={
        <RefreshControl refreshing={loading} onRefresh={onRefresh} />
      }
      style={{ flex: 1 }}
      data={job.notes}
      renderItem={(object) => <JobNotesItem item={object.item} />}
    />
  );
}