import { useChantier } from "@/app/ContextChantier";
import { Chantier } from "@/class/class";
import { getChantiers } from "@/services/ressourcesService";
import { useRouter } from "expo-router";
import { useEffect, useState } from "react";
import {
  ActivityIndicator,
  Dimensions,
  Image,
  Pressable,
  ScrollView,
  StyleSheet,
  View
} from "react-native";
import Animated, {
  LinearTransition
} from "react-native-reanimated";
import { ThemedButton } from "./themed-button";
import { ThemedText } from "./themed-text";
import { ThemedTextInput } from "./themed-textinput";
import { ThemedView } from "./themed-view";

const screenHeight = Dimensions.get("window").height;
const { width, height } = Dimensions.get("window");

/*

<ThemedView style={{width:"100%", position: 'absolute', backgroundColor:'transparent',}}>
  <SelectChantier ></SelectChantier>
</ThemedView>

*/

export default function SelectChantier() {
  const { chantier, setChantier } = useChantier();
  const [search, setSearch] = useState("");
  const [isOpen, setIsOpen] = useState(false);
  const [isLoaded, setIsLoaded] = useState(false);
  const [chantiers, setChantiers] = useState<Chantier[]>([]);
  const router = useRouter();

  
  const AnimatedThemedView = Animated.createAnimatedComponent(ThemedView);
  const AnimatedThemedText = Animated.createAnimatedComponent(ThemedText);
  const AnimatedThemedButton = Animated.createAnimatedComponent(ThemedButton);
  const AnimatedThemedTextInput =
    Animated.createAnimatedComponent(ThemedTextInput);

  async function onPressOpen(){
    setIsLoaded(false);
    setIsOpen(!isOpen);
    if(!isOpen){
      const updatedChantiers = await getChantiers();
      setIsLoaded(true);
      setChantiers(updatedChantiers)
    }
  }

  function onPressAddChantier(){
    router.push("/(tabs)/addChantier")
    setIsOpen(false)
  }

  useEffect(() => {
    async function loadChantiers() {
      const list = await getChantiers();
      setChantiers(list);
    }

    loadChantiers();
  }, []);

  function selectChantier(chantier: Chantier): void {
    setChantier(chantier);
    setIsOpen(false);
  }

  const renderChantier = (chantier: Chantier, index: number) => {
    return (
        <Pressable key={index} onPress={() => selectChantier(chantier)}>
          <ThemedView lvl={4} style={styles.chantier}>
            <View>
              <Image source={{ uri:"https://cdn.discordapp.com/attachments/1425108443571945644/1427207643180826757/raw.png?ex=69392bb2&is=6937da32&hm=dcc09e76d3dca89d2418947b46efbd38673b9dc559027724b2e51d493b173bc9&" /*chantier.urlImg*/ }} style={styles.image} />
            </View>
            <View>
            <ThemedText>Adresse: {chantier.adresse}</ThemedText>
            <ThemedText>Chef de chantier: {chantier.chef.last_name}{" "}{chantier.chef.name}</ThemedText>
            <ThemedText>État: {chantier.etat}</ThemedText>
            </View>
          </ThemedView>
        </Pressable>
    );
  };

  return (
    <Animated.View layout={LinearTransition.duration(200)} style={isOpen ? styles.windowOpean : styles.windowClose}>
      {isOpen && (<Pressable style={styles.autoClose} onPress={() => setIsOpen(false)}/>)}
      <AnimatedThemedView layout={LinearTransition.duration(200)} lvl={2} shadow={true} style={styles.window}>
        <AnimatedThemedButton style={isOpen ? styles.buttonOpen : styles.buttonClose} lvl={isOpen ? 1 : 1} onPress={() => onPressOpen()}>
          <ThemedText style={styles.buttonText}>
            {isOpen ? "Fermer" : (chantier!=null ? chantier.adresse : "Chantier")}
          </ThemedText>
        </AnimatedThemedButton>
        {isOpen && (
          <View style={styles.menu}>

            <ThemedTextInput lvl={1} border={4} style={styles.input} placeholder="Rechercher un chantier" value={search} onChangeText={setSearch}/>

            <ThemedButton style={styles.buttonAdd} onPress={() => onPressAddChantier()}>
              <ThemedText style={styles.buttonText}>
                +
              </ThemedText>
            </ThemedButton>
            <View style={styles.list}>
              {isLoaded?
              <ScrollView contentContainerStyle={styles.chantiersList}>
                {chantiers.map((chantier, index) =>
                  renderChantier(chantier, index)
                )}
              </ScrollView>
              : <ActivityIndicator style={{height:"100%"}} color="#808080" size="large" />}
            </View>

        </View>
        )}
      </AnimatedThemedView>
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  windowClose: {
    //backgroundColor: '#00FF0040',
    //borderRadius:10,
    padding: 10,
    width: "50%",
    height: 60,
    overflow: "hidden",
    zIndex:1000,
  },
  windowOpean: {
    //backgroundColor: '#00FF0040',
    //borderRadius:10,
    width: "100%",
    height: screenHeight * 3/4,
    padding: 10,
    zIndex:1000,
  },
  window: {
    borderRadius: 15,
    height: "100%",
    //backgroundColor: '#00FF00',
    overflow: "hidden",
  },
    autoClose: {
    
    position: 'absolute',
    top: -height,
    left: -width,
    width:width*2,
    height:height*2,
    //backgroundColor: 'rgba(255, 0, 0, 0.5)',
  },
  menu: {
    padding: 5,
    flex: 1,
    minHeight: 0,
    //backgroundColor:'#FF00FF',
  },
  list: {
    flex: 1,
    overflow: "hidden",
    borderRadius: 10,
  },
  chantiersList: {
    //padding:5,
    //backgroundColor:'0000FF',
    //flexDirection: 'row',
    //alignItems: 'center',
    gap: 8,
  },
  chantier: {
    padding: 5,
    //marginTop:5,
    //margin:5,
    borderRadius: 10,
    //borderWidth: 1,
    flexDirection: 'row',
    height: 100,
  },
  image:{
    margin:0,
    width: 60,
    height: 90,
    borderRadius: 5,
    marginRight: 10,
  },
  input: {
    width: "100%",
    borderWidth: 1,
    borderRadius: 10,
    padding: 10,
    fontSize: 16,
    marginBottom: 10,
  },
  buttonClose: {
    width: "100%",
    margin: 0,
    borderRadius: 15,
    padding: 10,
    height: 40,
  },
  buttonOpen: {
    width: "50%",
    margin: 5,
    borderRadius: 10,
    padding: 10,
    height: 40,
  },
  buttonText: {
    textAlign: "center",
  },
  buttonAdd:{
    borderRadius: 10,
    marginBottom: 10,
    height: 30,
    alignItems: 'center',
    justifyContent: 'center',
  }
});