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

export default function JobTombstone({ job, loading, refetch }) {
  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} />
        }
      >
        <Card>
          <CardItem bordered style={localStyles.status}>
            <H3>{job.status}</H3>
          </CardItem>
          <CardItem bordered style={localStyles.ins_card}>
            <View style={{ flex: 3, marginright: 10 }}>
              <Text numberOfLines={1}>{job.ins_co_nm || ""}</Text>
              <Text numberOfLines={1}>{job.clm_no || ""}</Text>
            </View>
            <View style={{ flex: 1, marginLeft: 10 }}>
              <Text numberOfLines={1}>{job.ded_status || ""}</Text>
              <Text numberOfLines={1}>
                {Dinero({ amount: (job.ded_amt || 0) * 100 }).toFormat()}
              </Text>
            </View>
          </CardItem>
          <CardItem bordered style={localStyles.owner_card}>
            <View style={{ flex: 1 }}>
              <Text numberOfLines={1}>{`${job.ownr_fn || ""} ${
                job.ownr_ln || ""
              }${job.ownr_co_nm || ""}`}</Text>
              <Text>{job.ownr_ph1 || ""}</Text>
            </View>
            <View style={{ flex: 1 }}>
              <Text numberOfLines={2}>{`${job.v_model_yr || ""} ${
                job.v_make_desc || ""
              } ${job.v_model_desc || ""} ${job.v_vin || ""}`}</Text>
            </View>
          </CardItem>
          <CardItem></CardItem>
        </Card>
      </Content>
    </Container>
  );
}

const localStyles = StyleSheet.create({
  ins_card: {
    flexDirection: "row",
    justifyContent: "space-between",
  },
  status: {
    textAlign: "center",
    flexDirection: "row",
    justifyContent: "center",
  },
  owner_card: {
    flexDirection: "row",
    justifyContent: "space-around",
  },
});