import ChantierSummary from '@/components/chantierSummary';
import SelectChantier from '@/components/selectChantier';
import SetStatus from '@/components/setStatus';
import { ThemedView, } from '@/components/theme/themed-view';
import Constants from 'expo-constants'; //pour connaître la taille de la barre menu de l'OS en haut
import React from 'react';
import { StyleSheet, View,Text, ScrollView } from 'react-native';
import { useChantier } from '../ContextChantier';
import Anomaly from '@/components/anomaly';

import { useUser } from '../ContextUser';



export default function Home() {
  const { chantier, setChantier } = useChantier();
  const { role } = useUser();


  return(
    <ThemedView lvl={3} style={styles.back}>
      <View style={styles.container}>
        <View style={{width:"100%", position: 'absolute'}}>
          <SelectChantier></SelectChantier>
        </View>
        {chantier&&
        <View style={{width:"100%", position: 'absolute',marginLeft:"50%"}}>
          <SetStatus></SetStatus>
        </View>
        }
        <ScrollView>
          <View style={{paddingTop:60}}>
          <ChantierSummary style={styles.summary} data={{ chantier }} />
          <Anomaly style={styles.anomaly} data={{chantier}}/>
          {role === "chef"}
          </View>
        </ScrollView>

      </View>
    </ThemedView>
  )
}

const styles = StyleSheet.create({
  back:{
    height:"100%",
    width:"100%",
  },
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight, //pour la barre menu du haut
  },
  header: {
    flex: 1,
    width:"100%"
  },
  summary:{
    padding:10,
  },
  anomaly:{
    padding:10,
  }
});