import { Chantier } from '@/class/class';
import { ThemedView, } from '@/components/theme/themed-view';
import React from 'react';
import { Image, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
import { ThemedText } from './theme/themed-text';
import { getNbItemReservation } from '@/class/utils';

type Props = {
    data: {
        chantier:Chantier|null;
    }
    style?: StyleProp<ViewStyle>;
};

export default function ChantierSummary({data,style , ...otherProps }: Props) {
  return(
    <View style={style}>
        {data.chantier ? (
            <ThemedView lvl={4} style={styles.chantier}>
                <View>
                    <Image source={{ uri:"" /*chantier.urlImg*/ }} style={styles.image} />
                </View>
                <View style={{flex: 1}}>
                    <ThemedText selectable={true}>Objet: {data.chantier.name}</ThemedText>
                    <ThemedText selectable={true}>Adresse: {data.chantier.adresse}</ThemedText>
                    <ThemedText selectable={true}>Chef de chantier: {data.chantier.chef.last_name}{" "}{data.chantier.chef.name}</ThemedText>
                    <ThemedText selectable={true}>État: {data.chantier.etat}</ThemedText>
                    <ThemedText selectable={true}>
                      equipe: {getNbItemReservation(data.chantier.equipe)} ({data.chantier.equipe.length} type{data.chantier.equipe.length>1&&"s"})
                    </ThemedText>
                    <ThemedText selectable={true}>
                      materiel: {getNbItemReservation(data.chantier.materiel)} ({data.chantier.materiel.length} type{data.chantier.materiel.length>1&&"s"})
                    </ThemedText>
                    <ThemedText selectable={true}>
                      vehicules: {getNbItemReservation(data.chantier.vehicules)} ({data.chantier.vehicules.length} type{data.chantier.vehicules.length>1&&"s"})
                    </ThemedText>
                </View>
            </ThemedView>
        ) : 
            <ThemedText>
                Pas de chantier Selectionné
            </ThemedText>
        }
    </View>
  )
}

const styles = StyleSheet.create({
  chantier: {
    padding: 5,
    //marginTop:5,
    //margin:5,
    borderRadius: 10,
    //borderWidth: 1,
    flexDirection: 'row',
    //height: 150,
    gap: 10,
  },
  image:{
    width: 70,
    height: 140,
    borderRadius: 5,
  },
});