import { Card, CardItem, H3, Text } from "native-base";
import React from "react";
import { useTranslation } from "react-i18next";
import { FlatList, RefreshControl } from "react-native";
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>
        <CardItem>
          <H3>{t("jobdetail.labels.nojobnotes")}</H3>
        </CardItem>
      </Card>
    );

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