import { useEffect, useRef, useState } from 'react';
import {View,Text, StyleSheet, ScrollView, TouchableOpacity, Image, Animated, TextInput, Button, Alert, StatusBar, Pressable, FlatList} from 'react-native';

import MapLibreGL from '@maplibre/maplibre-react-native';
import { MapView,ShapeSource,Camera,UserLocation,PointAnnotation,FillLayer,LineLayer,VectorSource } from "@maplibre/maplibre-react-native";
import { SelectList } from 'react-native-dropdown-select-list';
import { RadioButton } from 'react-native-paper';
import DatePicker from 'react-native-date-picker';
import Moment from 'moment';
import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
import NetInfo from "@react-native-community/netinfo";
import AwesomeAlert from 'react-native-awesome-alerts';
import AsyncStorage from '@react-native-async-storage/async-storage';
import turfcenter from '@turf/center';
const {points,polygon,lineString} =  require('@turf/helpers');
import RNFetchBlob from 'rn-fetch-blob';
import Modal from "react-native-modal";
import {useIsFocused} from '@react-navigation/native';

import { PDAM_API_URL } from "../../urlConfig";
import React from 'react';
type collectLineScreenProps = {route: any,navigation: any};



export default function CollectLineScreen({route,navigation}:collectLineScreenProps) {
    console.log("route",route.params);
    const apiKey = "JoJs2pcDv5o0yQlQLMfI";
    const [basemap, setBasemap] = useState("streets-v2");
    const styleURL = `https://api.maptiler.com/maps/${basemap}/style.json?key=${apiKey}`;
    const Pipe_Type = [
        {key:'Pipa 24"', value:'Pipa 24"'},
        {key:'Pipa 20"', value:'Pipa 20"'},
        {key:'Pipa 16"', value:'Pipa 16"'},
        {key:'Pipa 10"', value:'Pipa 10"'},
    ]
    const [centerCoords,setCenterCoords] = useState<number[]>([]);
    const isFocused = useIsFocused();
    const [userID,setUserID] = useState();
    useEffect(()=>{
      if(isFocused){
        const getKey = async () =>{
          const jsonValue = await AsyncStorage.getItem('USER_DATA')
          console.log(JSON.parse(jsonValue!));
          const data = JSON.parse(jsonValue!);
          console.log("user_data",data.id);
          setUserID(data.id)
        };
        getKey()
        let centCord = turfcenter(points(route.params.coordinates));
        // console.log('center');
        // console.log(centCord.geometry.coordinates);
        setCenterCoords(centCord.geometry.coordinates);
        const unsubscribe = NetInfo.addEventListener((state) => {
          setConnected(state.isConnected!)
        });
        return () => {
          unsubscribe();
        };
      };
    },[isFocused])

    const ref = useRef();
    const [connected, setConnected] = useState(true);
    const [currentIndex, setCurrentIndex] = useState(0);
    const [imgUrl, setImgUrl] = useState([]);
    const [files, setFiles] = useState([]);
    const [pipeName, setPipeName] = useState('');
    const [selectedPipeType, setselectedPipeType] = useState("");
    const [checkedStatus, setCheckedStatus] = useState('Baik');
    const [Information, setInformation] = useState('');
    const [open, setOpen] = useState(false);
    const [install_date, setInstallDate] = useState(new Date());
    const momentDate = Moment(install_date).format('YYYY-MM-DD');
    const [alertOnline, setAlertOnline] = useState(false);
    const [alertOffline, setAlertOffline] = useState(false);
    const [pipeNameError, setPipeNameError] = useState(false);
    const [pipeTyeError, setPipeTypeError] = useState(false);
    const [pipeStatusError, setPipeStatusError] = useState(false);
    const [pipeInfoError, setPipeInfoError] = useState(false);
    const [ModalAttachment, setModalAttachment] = useState(false);
    
    const openCameraLib = async () => {
        const result = await launchCamera({
          mediaType: 'photo',
          quality: 1,
          includeBase64: true,
          saveToPhotos: true
        });
        const newObj = {
          file_type: result?.assets![0]?.type,
          file: result?.assets![0]?.base64,
          fileSize: result?.assets![0]?.fileSize,
        }
        setFiles([...files,newObj]);
        setImgUrl([...imgUrl,result?.assets![0]?.base64]);
    };
    const openLib = async () => {
        const result = await launchImageLibrary({
          quality: 1,
          mediaType: 'photo',
          selectionLimit: 0,
          includeExtra: true,
          includeBase64: true
        });
        result?.assets?.forEach(asset => {
          const newObj = {
            file_type: asset.type,
            file: asset.base64,
            fileSize: asset.fileSize
          }
          setFiles(oldArray => [...oldArray,newObj]);
          setImgUrl(oldArray => [...oldArray,asset.base64]);
        });
    };
    const PrevImg = ({isIndex}) => {
        if(isIndex===0){
          return (
              <TouchableOpacity disabled style={{width:'10%',alignSelf:'center'}}>
                <Image source={require('../../assets/icon/left-arrow.png')} />
              </TouchableOpacity>
          )
        }
        return (
          <TouchableOpacity style={{width:'10%',alignSelf:'center'}} onPress={()=> {
            setCurrentIndex(currentIndex-1)
            ref.current.scrollToIndex({
              animated: true,
              index: currentIndex-1
            });
          }}>
            <Image source={require('../../assets/icon/left-arrow.png')} />
          </TouchableOpacity>
        )
      };
    const NextImg = ({isIndex}) => {
      if(imgUrl.length<=1){
        return (
          <TouchableOpacity disabled style={{width:'10%',alignSelf:'center'}}>
            <Image style={{alignSelf:'flex-end'}} source={require('../../assets/icon/right-arrow.png')} />
          </TouchableOpacity>
        )
      }
      else{
        if (isIndex === (imgUrl.length-1)) {
          return (
            <TouchableOpacity disabled style={{width:'10%',alignSelf:'center'}}>
              <Image style={{alignSelf:'flex-end'}} source={require('../../assets/icon/right-arrow.png')} />
            </TouchableOpacity>
          )
        }
        else{
          return (
            <TouchableOpacity style={{width:'10%',alignSelf:'center'}} onPress={()=> {
              setCurrentIndex(currentIndex+1)
              ref.current.scrollToIndex({
                animated: true,
                index: currentIndex+1
              });
            }}>
              <Image style={{alignSelf:'flex-end'}} source={require('../../assets/icon/right-arrow.png')} />
            </TouchableOpacity>
          )
        }
      }
    };
    const showDialog = () => {
      if(!pipeName){
        setPipeNameError(true)
      }else{
        setPipeNameError(false)
      }
      if(!selectedPipeType){
        setPipeTypeError(true)
      }else{
        setPipeTypeError(false)
      }
      if(!checkedStatus){
        setPipeStatusError(true)
      }else{
        setPipeStatusError(false)
      }
      if(!Information){
        setPipeInfoError(true)
      }else{
        setPipeInfoError(false)
      }
      if(!pipeName || !selectedPipeType || !checkedStatus || !Information) {
        return false
      }

      if(connected){
        setAlertOnline(true);
      }
      else{
        setAlertOffline(true)
      }
    };
    const handleCancelAlertOnline = () => {
      setAlertOnline(false);
    };
    const handleCancelAlertOffline = () => {
      setAlertOffline(false);
    };
    const collectDataOnline = async() => {
      try {
        const result = {
          status: 0,
          body: {},
        }
        let date = new Date();
        const milliseconds = Date.UTC(
        date.getFullYear(),
        date.getMonth(),
        date.getDate(),
        date.getHours(),
        date.getMinutes(),
        date.getSeconds(),
        );
        const localTime = new Date(milliseconds);
        const geom = route.params.coordinates.map((item:any)=>{
          return String(item).replace(',',' ')
        })
        const obj = {
            nama: pipeName,
            jenis: selectedPipeType,
            tanggal_installasi: momentDate,
            status: checkedStatus,
            keterangan: Information,
            geom: `MULTILINESTRING((${geom}))`,
            created_by: userID,
            created_at: localTime
        }
        await RNFetchBlob.config({
            trusty : true
        }).fetch('POST', `${PDAM_API_URL}/addData`,{
            "Accept": 'application/json',
            "Content-Type": "application/json",
          },
            JSON.stringify(obj)
        ).then(async (resp) => {
          const json = resp.json()
          const status = resp.respInfo.status;
          result.status = status;
          result.body = json;
          if (status == 201) {
            insertAttachment(json,files)
            const storeData = async () => {
              try {
                await AsyncStorage.setItem(json[0].id+" / "+pipeName+" / "+selectedPipeType+" / "+momentDate+" / "+checkedStatus+" / "+Information+" / "+geom+" / sentPDAM","Value");
              } catch (e) {
              }
            };
            storeData()
          }
        })
      } catch (error) {
        
      }
    };
    const collectDataOffline = () => {
      const geom = route.params.coordinates.map((item:any)=>{
        return String(item).replace(',',' ')
      })
      const storeData = async () => {
        try {
          await AsyncStorage.setItem(pipeName+" / "+selectedPipeType+" / "+momentDate+" / "+checkedStatus+" / "+Information+" / "+geom+" / draftPDAM","Value");
        } catch (e) {
        }
      };
      storeData()
      setAlertOffline(false);
      navigation.navigate('Survey Pipa PDAM', { screen: 'Survey Pipa PDAM'})
    };
    const insertAttachment = async (json: any,files: any) => {
      try {
        files.forEach(async function(file:any) {
          const url = `${PDAM_API_URL}/addAttachment`;
          await RNFetchBlob.config({
            trusty : true
          }).fetch('POST', url,{
            "Content-Type": "application/json",
          },
            JSON.stringify({pdam_id:json[0].id, file:file.file, mimetype:file.file_type, size:file.fileSize})
          ).then(async (resp) => {
              Alert.alert("Success")
              navigation.navigate('Survey Pipa PDAM', { screen: 'Survey Pipa PDAM'})
              setAlertOnline(false);
            }
          )
      });
      } catch (error) {
        console.log(error);
      }
    };
    const renderItem = ({item,index}:any) => {
      return (
        <View key={index} style={{width:100,height:100,borderRadius:10,borderWidth:1,borderStyle:"dashed",flexDirection:'row'}}>
          <Image style={{width: '100%',height: '100%',borderRadius:10}}
              source={{uri: `data:image/jpeg;base64,${imgUrl[index]}`}}
          />
        </View>
      );
    };
    return (
        <View style={styles.mainContainer}>
          <StatusBar backgroundColor="#34A6F8" barStyle={'light-content'} />
          <View key={"mainBackground"} style={{backgroundColor:'#34A6F8',width:'100%',height:'93%'}} />
          <View key={"background"} style={{backgroundColor:'#FFFFFF',width:'100%',height:'100%',position:'absolute',borderTopRightRadius:50,borderTopLeftRadius:35,paddingTop:25}}>
            <ScrollView style={styles.container}>
              <View style={{flexDirection:'column'}}>
                  <MapView
                    style={{width:352,height:200,borderWidth:1,borderColor:'#A6A6A6',overflow:'hidden',alignSelf:'center',borderTopRightRadius:10,borderTopLeftRadius:10}}
                    mapStyle={styleURL}
                    rotateEnabled={false}
                    zoomEnabled={false}
                    pitchEnabled={false}
                    scrollEnabled={false}
                  >
                    <Camera 
                      centerCoordinate={centerCoords}
                      zoomLevel={15}
                      minZoomLevel={5}
                      maxZoomLevel={20}
                    />
                    <ShapeSource
                        id="line"
                        shape={{
                            "type": "FeatureCollection",
                            "features": [
                                {
                                    "type": "Feature",
                                    "properties": {},
                                    "geometry": {
                                        "type": "LineString",
                                        "coordinates": route.params.coordinates
                                    }
                                }
                            ]
                        }}
                    >
                      <LineLayer 
                          id="linelayer1"
                          style={{lineColor:'red',lineWidth:3}}
                      />
                    </ShapeSource>
                    {
                      route.params.coordinates.map((item:any,index:number)=>(
                          <PointAnnotation
                              children={<></>}
                              key={index}
                              id={String(index)}
                              coordinate={item}
                              draggable={false}
                          />
                      ))
                    } 
                  </MapView>
                {/* </Pressable> */}
                <TouchableOpacity style={{alignSelf:'center',backgroundColor:'#F9F9F9',width:352,height:50,borderBottomLeftRadius:10,borderBottomRightRadius:10,justifyContent:'center',borderWidth:1,borderColor:'#A6A6A6'}} onPress={()=>navigation.navigate('PDAM Map Collect', { screen: 'PDAM Map Collect'})}>
                    <Text style={{alignSelf:'center',fontWeight:'semibold',fontSize:16,color:'#434343'}}>Change Location</Text>
                </TouchableOpacity>
              </View>
              <View
                  style={{
                      marginTop: 15
                  }}
              />
              <View style={{alignSelf:'center'}}>
                {/* <Text style={styles.label}>Name<Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> */}
                <Text style={styles.label}>Pipe Name</Text>
                <TextInput
                  style={styles.input}
                  onChangeText={(text) => {
                    setPipeName(text)
                  }}
                  onChange={()=> {
                    setPipeNameError(false)
                  }}
                />
                {pipeNameError ? <Text style={styles.errorInput}>Pipe Name is Required!</Text>:null}
              </View>
              <View
                  style={{
                      marginTop: 15
                  }}
              />
              <View style={{alignSelf:'center'}}>
                {/* <Text style={styles.label}>PJU Type <Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> */}
                <Text style={styles.label}>Pipe Type</Text>
                <SelectList
                  search={false}
                  placeholder="Select Pipe Type"
                  boxStyles={{borderRadius:10,borderWidth:1,borderColor:'#A6A6A6',width:352,height:45}}
                  inputStyles={{color:'#6B5E5E'}}
                  dropdownTextStyles={{color:'#6B5E5E'}}
                  data={Pipe_Type}
                  setSelected={setselectedPipeType}
                  onSelect={()=> (
                    [setPipeTypeError(false)]
                  )}
                />
                {pipeTyeError ? <Text style={styles.errorInput}>Pipe Type is Required!</Text>:null}
              </View>
              <View
                  style={{
                      marginTop: 15
                  }}
              />
              <View style={{alignSelf:'center',width:352,height:45}}>
                {/* <Text style={styles.label}>Status<Text style={{color:'red',fontWeight:'bold'}}>*</Text></Text> */}
                <Text style={styles.label}>Status</Text>
                <View style={{flexDirection:'row',alignItems:'center'}}>
                  <RadioButton
                    color='#434343'
                    value="Baik"
                    status={ checkedStatus === 'Baik' ? 'checked' : 'unchecked' }
                    onPress={() => {setCheckedStatus('Baik'); setPipeStatusError(false)}}
                  />
                  <Text style={{color:"#434343",fontWeight:'semibold',fontSize:16}}>Baik</Text>
                </View>
                <View style={{flexDirection:'row',alignItems:'center'}}>
                  <RadioButton
                    color='#434343'
                    value="Rusak"
                    status={ checkedStatus === 'Rusak' ? 'checked' : 'unchecked' }
                    onPress={() => {setCheckedStatus('Rusak'); setPipeStatusError(false); }}
                  />
                  <Text style={{color:"#434343",fontWeight:'semibold',fontSize:16}}>Rusak</Text>
                </View>
                {pipeStatusError ? <Text style={styles.errorInput}>Status is Required!</Text>:null}
              </View>
              <View
                  style={{
                      marginTop: 60
                  }}
              />
              <View style={{alignSelf:'center'}}>
                <Text style={styles.label}>Information</Text>
                <TextInput style={{borderWidth:1,borderRadius:20,padding: 10,color:'#6B5E5E',borderColor:'#A6A6A6',textAlignVertical:'top',width:352,height:135}}
                  multiline
                  numberOfLines={5}
                  maxLength={255}
                  onChangeText={(text) => {
                    setInformation(text)
                  }}
                  onChange={()=> {
                    setPipeInfoError(false)
                  }}
                />
                {pipeInfoError ? <Text style={styles.errorInput}>Information is Required!</Text>:null}
              </View>
              <View
                style={{
                  marginTop: 15
                }}
              />
              <View style={{alignSelf:'center'}}>
                <Text style={styles.label}>Installation Date</Text>
                <TextInput
                  style={styles.input}
                  onPress={() => setOpen(true)}
                  value={String(momentDate)}
                />
                <DatePicker
                  locale='en'
                  theme='light'
                  mode='date'
                  modal
                  open={open}
                  date={install_date}
                  onConfirm={(survey_date) => {
                    setOpen(false)
                    setInstallDate(survey_date)
                  }}
                  onCancel={() => {
                    setOpen(false)
                  }}
                />
              </View>
              <View
                style={{
                  marginTop: 15
                }}
              />
              <View style={{alignSelf:'center',width:352}}>
                <Text style={styles.label}>Attachment</Text>
                <Text style={{fontStyle:'italic',color:'#434343',fontSize:14}}>Lampirkan foto / gambar</Text>
                { 
                  imgUrl.length === 0 ?
                  <Pressable onPress={()=>setModalAttachment(true)}>
                    <View style={{width:352,height:70,borderRadius:10,borderStyle:'dashed',borderWidth:2,borderCurve:'continuous',borderColor:'#434343',alignItems:'center',justifyContent:'center',flexDirection:'row',columnGap:5}}>
                      <Image
                          source={require('../../assets/icon/camorlib.png')}
                      />
                      <Text style={{fontStyle:'italic',color:'#434343'}}>Klik untuk menambahkan foto / gambar</Text>
                    </View>
                  </Pressable>
                :
                  <FlatList
                    horizontal={false}
                    showsHorizontalScrollIndicator={false}
                    scrollEnabled={false}
                    ListFooterComponent={()=>
                      <Pressable onPress={()=>setModalAttachment(true)}>
                        <View style={{width:100,height:100,borderRadius:10,borderWidth:1,borderStyle:"dashed",flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
                          <Image
                              source={require('../../assets/icon/camorlib.png')}
                          />
                        </View>
                      </Pressable>
                    }
                    contentContainerStyle={{flexDirection:'row',flexWrap:'wrap',columnGap:25,rowGap:10}}
                    data={imgUrl}
                    renderItem={({item,index})=>renderItem({item,index})}
                  />
                }
              </View>
              <View
                style={{
                  marginTop: 30
                }}
              />
            </ScrollView>
            <TouchableOpacity style={{width:'100%',height:50,backgroundColor:'#34A6F8',alignItems:'center',justifyContent:'center'}} onPress={showDialog}>
              <Text style={{fontSize:18,fontWeight:'bold',color:'#FFFFFF'}}>SEND</Text>
            </TouchableOpacity>
          </View>
          <AwesomeAlert
            show={alertOnline}
            showProgress={false}
            title="Collecting Data"
            message="Are you sure for Collecting PDAM data?"
            closeOnTouchOutside={false}
            closeOnHardwareBackPress={false}
            showCancelButton={true}
            showConfirmButton={true}
            cancelText="No, cancel"
            confirmText="Yes, Collect it"
            confirmButtonColor="#137997"
            onCancelPressed={() => {
              handleCancelAlertOnline();
            }}
            onConfirmPressed={() => {
              collectDataOnline();
            }}
            overlayStyle={{width:'100%'}}
            contentContainerStyle={{width:'70%',borderRadius:10}}
            titleStyle={{fontSize:20}}
            messageStyle={{fontSize:16}}
          />

          {/* Offline Mode Alert */}
          <AwesomeAlert
            show={alertOffline}
            showProgress={false}
            title="You are offline"
            message="You want to add data to the draft?"
            closeOnTouchOutside={false}
            closeOnHardwareBackPress={false}
            showCancelButton={true}
            showConfirmButton={true}
            cancelText="No, cancel"
            confirmText="Yes, Add it"
            confirmButtonColor="#DD6B55"
            onCancelPressed={() => {
              handleCancelAlertOffline();
            }}
            onConfirmPressed={() => {
              collectDataOffline();
            }}
            overlayStyle={{width:'100%'}}
            contentContainerStyle={{width:'70%',borderRadius:10}}
            titleStyle={{fontSize:20}}
            messageStyle={{fontSize:16}}
          />
          <Modal isVisible={ModalAttachment} animationIn={'fadeInUp'} animationOut={'fadeOutDown'} backdropOpacity={0} onBackdropPress={()=>setModalAttachment(false)} style={{top:'18%',alignSelf:'center'}}>
              <View key={"modal container"} style={{width:330,height:220,backgroundColor:'#F9F9F9',borderRadius:25,borderWidth:1,borderColor:'#A6A6A6'}}>
                  <View style={{flexDirection:'row',alignItems:'center',justifyContent:'space-between',paddingLeft:30,paddingTop:20,paddingRight:10}}>
                      <Text style={{fontSize:20,fontWeight:'semibold',color: '#434343',}}>
                          Select Mode
                      </Text>
                      <Pressable onPress={()=>setModalAttachment(false)} style={{alignSelf:'flex-end',padding:10}}>
                          <Image style={{tintColor:'#434343'}}
                              source={require('../../assets/icon/x.png')}
                          />
                      </Pressable>
                  </View>
                  <View style={{padding:30}}>
                    <TouchableOpacity onPress={()=>{openCameraLib(),setModalAttachment(false)}} style={{height:50,backgroundColor:'#FFFFFF',alignItems:'center',justifyContent:'center',borderTopLeftRadius:10,borderTopRightRadius:10,borderWidth:1,borderColor:'#A6A6A6'}}>
                        <Text style={{fontSize:20,fontWeight:'light',color:'#434343'}}>Take photo</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={()=>{openLib(),setModalAttachment(false)}} style={{height:50,backgroundColor:'#FFFFFF',alignItems:'center',justifyContent:'center',borderBottomLeftRadius:10,borderBottomRightRadius:10,borderWidth:1,borderColor:'#A6A6A6'}}>
                        <Text style={{fontSize:20,fontWeight:'light',color:'#434343'}}>Choose photo</Text>
                    </TouchableOpacity>
                  </View>
              </View>
          </Modal>
        </View>
    );
};

const styles = StyleSheet.create({
    errorInput: {
      color: 'red',
      marginLeft: 20
    },
    inputLong: {
      height: 40,
      borderWidth: 1,
      padding: 10,
      width: 180,
      marginRight: 20
    },
    inputLat: {
      height: 40,
      borderWidth: 1,
      padding: 10,
      borderRadius: 50,
      width: 180,
      color: 'black'
    },
    input: {
      width:352,
      height: 45,
      borderWidth: 1,
      padding: 10,
      borderRadius: 10,
      color: '#6B5E5E',
      borderColor:'#A6A6A6'
    },
    container: {
      padding: 10,
      flexGrow: 1
    },
    mainContainer: {
      flex: 1,
    },
    label: {
      fontSize: 16,
      fontWeight:'semibold',
      color: '#434343',
      // marginBottom: 20
    },
    title: {
      alignItems: 'center',
      justifyContent: 'center',
      alignSelf: 'center',
      fontWeight: 'bold',
      fontSize: 22,
      color: 'black',
      marginBottom: 10
    },
    borderImg: {
      borderColor: 'black',
      borderWidth: 1,
      borderRadius: 20,
    },
    img: {
      width: 295,
      height: 500,
      borderRadius: 6,
    },
    btnCameraContainer: {
      flexDirection: 'row',
      justifyContent: 'space-around',
      top:10,
      
    },
    btnCamera: {
      alignItems: 'center',
      justifyContent: 'center',
      alignSelf: 'center',
      width: 100,
      height: 40,
      bottom:20,
      borderRadius: 6,
      backgroundColor: '#80CBD3'
    },
    textBtn: {
      color: '#fff'
    },
    buttonImageIconStyle: {
      padding: 10,
      margin: 5,
      height: 25,
      width: 25,
      resizeMode: 'stretch',
    },
});