import React from "react";
import { useTranslation } from "react-i18next";
import { FlatList, RefreshControl, StyleSheet, Text, View } from "react-native";
import { Card, DataTable } from "react-native-paper";

export default function JobLines({ job, loading, refetch }) {
  const { t } = useTranslation();

  if (!job) {
    <Card>
      <Text>Job is not defined.</Text>
    </Card>;
  }
  const onRefresh = async () => {
    return refetch();
  };

  return (
    <View style={{ flex: 1 }}>
      <DataTable>
        <DataTable.Header>
          <DataTable.Title style={{ flex: 4 }}>
            {t("jobdetail.labels.lines_desc")}
          </DataTable.Title>
          <DataTable.Title style={{ flex: 2 }}>
            {t("jobdetail.labels.lines_lbr_ty")}
          </DataTable.Title>
          <DataTable.Title style={{ flex: 1 }}>
            {t("jobdetail.labels.lines_lb_hrs")}
          </DataTable.Title>
          <DataTable.Title style={{ flex: 2 }}>
            {t("jobdetail.labels.lines_part_type")}
          </DataTable.Title>
          <DataTable.Title style={{ flex: 1 }}>
            {t("jobdetail.labels.lines_qty")}
          </DataTable.Title>
        </DataTable.Header>
      </DataTable>

      <FlatList
        data={job.joblines}
        refreshControl={
          <RefreshControl refreshing={loading} onRefresh={onRefresh} />
        }
        keyExtractor={(item) => item.id}
        renderItem={(object) => (
          <DataTable.Row>
            <DataTable.Cell style={{ flex: 4 }}>
              {object.item.line_desc}
            </DataTable.Cell>
            <DataTable.Cell style={{ flex: 2 }}>
              {object.item.mod_lbr_ty &&
                t(`jobdetail.lbr_types.${object.item.mod_lbr_ty}`)}
            </DataTable.Cell>
            <DataTable.Cell style={{ flex: 1 }}>
              {object.item.mod_lb_hrs}
            </DataTable.Cell>
            <DataTable.Cell style={{ flex: 2 }}>
              {object.item.part_type &&
                t(`jobdetail.part_types.${object.item.part_type}`)}
            </DataTable.Cell>
            <DataTable.Cell style={{ flex: 1 }}>
              {object.item.part_qty}
            </DataTable.Cell>
          </DataTable.Row>
        )}
      />
    </View>
  );
}

const localStyles = StyleSheet.create({});