import { Card, CardItem, Container, Content, Text } from "native-base";
import React from "react";
import { useTranslation } from "react-i18next";
import { FlatList, RefreshControl, StyleSheet } from "react-native";
import Dinero from "dinero.js";

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 (
    <Container>
      <Content
        padder
        refreshControl={
          <RefreshControl refreshing={loading} onRefresh={onRefresh} />
        }
      >
        <FlatList
          data={job.joblines}
          style={{ flex: 1 }}
          contentContainerStyle={localStyles.listContentContainer}
          keyExtractor={(item) => item.id}
          renderItem={(object) => (
            <Card>
              <CardItem style={localStyles.flexRow}>
                <Text style={localStyles.growWithEllipsis}>{`${
                  object.item.line_desc
                }${
                  object.item.part_qty > 1 ? ` x ${object.item.part_qty}` : ""
                }`}</Text>
                {object.item.part_type && (
                  <Text style={localStyles.sideMargins}>
                    {t(`jobdetail.part_types.${object.item.part_type}`)}
                  </Text>
                )}
                <Text style={localStyles.sideMargins}>
                  {Dinero({
                    amount: Math.round((object.item.act_price || 0) * 100),
                  }).toFormat()}
                </Text>
              </CardItem>
              <CardItem style={localStyles.flexRow}>
                {object.item.mod_lbr_ty && (
                  <Text>
                    {t(`jobdetail.lbr_types.${object.item.mod_lbr_ty}`)}
                  </Text>
                )}
              </CardItem>
            </Card>
          )}
        />
      </Content>
    </Container>
  );
}

const localStyles = StyleSheet.create({
  listContentContainer: {
    flex: 1,
  },
  flexRow: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
  },
  sideMargins: {
    marginLeft: 5,
    marginRight: 5,
  },
  growWithEllipsis: {
    flex: 1,
  },
});