import React, { Component } from 'react';
import Swiper from 'react-native-swiper'
import CouponeItem from './CouponItem'
import StampItem from './StampItem.1'
import MenuItem from './MenuItem'
import { View, Text, StyleSheet, ScrollView,TouchableOpacity,Image,NativeModules } from 'react-native';
import Store_Post from './Store_Post'; 
import AsyncStorage from '@react-native-community/async-storage'
import WifiManager from "react-native-wifi-reborn";
import WIFI_OFF from '../assets/wifi_off.svg'
import More from '../assets/more_hor.svg'
import WIFI_ON from '../assets/wifi_on.svg' 
import Modal from 'react-native-modal'
import Checkbox from '@react-native-community/checkbox'
import {post,put,get} from 'axios'
import { SERVER } from '../common/servername';
import RNAppShortcuts from 'react-native-app-shortcuts';
const AddShortcut = NativeModules.AddShortcut;


const places = [
    {
      name: 'Android',
      imageUrl: 'https://sdtimes.com/wp-content/uploads/2017/03/android-1904852_1920.jpg',
      deepLink: 'https://sanggatalk.app.link'
    },
    {
      name: 'Android Studio',
      imageUrl: 'https://sdtimes.com/wp-content/uploads/2018/09/image1a.png',
      deepLink: 'https://sanggatalk.app.link'
    },
    {
      name: 'Apple',
      imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Apple-Apple.svg/1000px-Apple-Apple.svg.png',
      deepLink: 'https://sanggatalk.page.link'
    }
  ];
  
export default ({myStore,navigation,store, setStorePost,update ,store_posts, onLike, onHate,user, onHandleItem, key }) => {
    const [dropdown,setDropdown] = React.useState(false)
    const [mywifi,setMywifi] = React.useState("")
    const [height,setHeight] = React.useState(0)
    const [index,setIndex] = React.useState(0)
    const [intervalId,setIntervalId] = React.useState(null)
    const [isFirst,setIsFirst] = React.useState(true)
    const [StoreHeight,setStoreHeight] = React.useState(0)
    const [MenuHeight,setMenuHeight] = React.useState(0)
    const [StampHeight,setStampHeight] = React.useState(0)
    const [CouponHeight,setCouponHeight] = React.useState(0)

    const [StoreNum,setStoreNum] = React.useState(0)
    const [CouponNum,setCouponNum] = React.useState(0)
    const [StampNum,setStampNum] = React.useState(0)
    const [MenuNum,setMenuNum] = React.useState(0)
    const [isModalVisible,setIsModalVisigle] = React.useState(false)

    const [checkbox1,setcheck1] = React.useState(false)
    const [checkbox2,setcheck2] = React.useState(false)
    const [checkbox3,setcheck3] = React.useState(false)
    const [checkbox4,setcheck4] = React.useState(false)
    const [checkbox5,setcheck5] = React.useState(false)
    const [checkbox6,setcheck6] = React.useState(false)
    const [isMyStore,SetIsMyStore] = React.useState(false)
    const [comment,setComment] = React.useState("")
    const [currentWifi,setCurrentWifi] = React.useState("")
    const [currentWifipw,setCurrentWifipw] = React.useState("")
    const swiper = React.useRef(null)
    React.useEffect(() => {
        AsyncStorage.getItem("AlarmList",(err,res) => {
            if(res) {
                JSON.parse(res).filter((e,i) => {
                    if(e.id == store_posts.id) {
                        store_posts.alarm = e. alarm
                    }
                })
                
            }
        })
        setIntervalId(
            setInterval(() => {
                WifiManager.getCurrentWifiSSID().then(
                    ssid => {
                        setMywifi(ssid)
                    },
                    () => {
                      console.log("Cannot get current SSID!");
                    }
                  );
                }, 1000)

        )
        SetIsMyStore(myStore.map((e,i) => e.id).indexOf(store_posts.id)<0?false:true)
        return () => {
            clearInterval(intervalId) 

        }
    },[])

    

  const createDynamicShortcut = () => {
    AddShortcut.setDynamicShortcuts(places);
  };

  const createPinnedShortcut = () => {
    AddShortcut.setPinnedShortcuts(places[0]);
  };
    const CreateShorcut = () => {
        try {
            AddShortcut.setDynamicShortcuts(places);
        RNAppShortcuts.addShortcut({
            id: 'id1',
            shortLabel: 'sample',
            longLabel: 'sample label',
            iconFolderName: 'drawable',
            iconName: 'icon'
          })
        }
        catch(e) {
            console.log(e)
        }
        console.log("addshortcut2")

    }
    const connect_wifi = (id,pw) => {

        if(!currentWifi) {
            get(`http://${SERVER}/stores/${store.id}`).then(res => {
                if(res.data.success){
                    setCurrentWifi(res.data.data[0].wifi_name)
                    setCurrentWifipw(res.data.data[0].wifi_pw)
                    console.log(res.data.data[0].wifi_name)
                    console.log(res.data.data[0].wifi_pw)
                    WifiManager.getCurrentWifiSSID().then(
                        ssid => {
                          if(ssid !== mywifi) {

                            WifiManager.connectToProtectedSSID(res.data.data[0].wifi_name, res.data.data[0].wifi_pw, false).then(
                                () => {
                                    setMywifi(id)
                                },
                                () => {
                                  console.log("Connection failed!");
                                }
                              );
                            }
                            else {
                                WifiManager.disconnect()
                                setMywifi("")
                            }
                        },
                        () => {
                          console.log("Cannot get current SSID!");
                        }
                      );
                } 
            })
        }
        else {
            WifiManager.getCurrentWifiSSID().then(
                ssid => {
                  if(ssid !== mywifi) {

                    WifiManager.connectToProtectedSSID(currentWifi, currentWifipw, false).then(
                        () => {
                            setMywifi(id)
                        },
                        () => {
                          console.log("Connection failed!");
                        }
                      );
                    }
                    else {
                        WifiManager.disconnect()
                        setMywifi("")
                    }
                },
                () => {
                  console.log("Cannot get current SSID!");
                }
              );

        }

    }
    const HandleAlarm = (e,i) => {
        var temp = e
        if(e.alarm == true || e.alarm ==false) {
            temp.alarm = !e.alarm
        }
        else {
            temp.alarm = true
        }
        setStorePost(temp,i)
        AsyncStorage.getItem("AlarmList",(err,res) => {
            if(res) {
                var temp = JSON.parse(res)
                if(temp.filter((el,i) => {
                    if(el.id == e.id) {
                        temp[i].alarm = !temp[i].alarm
                    }
                    return el.id == e.id
                }).length > 0) {
                    AsyncStorage.setItem("AlarmList",JSON.stringify(temp))                    
                }
                else {
                    AsyncStorage.setItem("AlarmList",JSON.stringify(temp.push(e)))                    
                }
            }
            else {
                var temp = []
                e.alarm=true
                AsyncStorage.setItem("AlarmList",JSON.stringify([e]))
                AsyncStorage.getItem("AlarmList",(err,res) => {
                })
                
            }
            put(`http://${SERVER}/likes`,{UserId:user.id,StoreId:e.id}).then(res => {
                console.log(res.data)
            })
        })
    }
    const Add_BlackList = (id) => {
        
        post(`http://${SERVER}/blacks`,{comment:comment,UserId:user.id,StoreId:id}).then(res => {
            if(res.data.success) {
                setIsModalVisigle(false)
                var temp = store
                temp.isBlack = true

                setStorePost(temp,key)
                alert("신고 및 차단이 접수되었습니다.")
                
                setcheck1(false)
                setcheck2(false)
                setcheck3(false)
                setcheck4(false)
                setcheck5(false)
                setcheck6(false)
            }
        })
    }
    const handleCheckbox = (i) => {
        if(i===1) {
            setcheck1(true)
            setcheck2(false)
            setcheck3(false)
            setcheck4(false)
            setcheck5(false)
            setcheck6(false)
            setComment("성인 컨텐츠 포함 불법적인 내용을 담고 있습니다.")
        }else if(i===2) {
            setcheck1(false)
            setcheck2(true)
            setcheck3(false)
            setcheck4(false)
            setcheck5(false)
            setcheck6(false)
            setComment("게시된 내용이 사실과 일치하지 않습니다.")
        }else if(i===3) {
            setcheck1(false)
            setcheck2(false)
            setcheck3(true)
            setcheck4(false)
            setcheck5(false)
            setcheck6(false)
            setComment("신고자 본인 또는 타인을 사칭하고 있습니다.")
        }else if(i===4) {
            setcheck1(false)
            setcheck2(false)
            setcheck3(false)
            setcheck4(true)
            setcheck5(false)
            setcheck6(false)
            setComment("더이상 운영되지 않는 계정입니다.")
        }else if(i===5) {
            setcheck1(false)
            setcheck2(false)
            setcheck3(false)
            setcheck4(false)
            setcheck5(true)
            setcheck6(false)
            setComment("존재하지 않는 가게 또는 비즈니스입니다.")
        }else if(i===6) {
            setcheck1(false)
            setcheck2(false)
            setcheck3(false)
            setcheck4(false)
            setcheck5(false)
            setcheck6(true)
            setComment("기타")
        }
    }
        return (
            <View onTouchEnd={() => dropdown?setDropdown(false):undefined}>
            <View style={{backgroundColor:"white",flexDirection:"row",justifyContent:"space-between",paddingLeft:17,paddingRight:17,paddingBottom:11,paddingTop:10}}>
                <View style={{flexDirection:"row",}}>
                    <TouchableOpacity onPress={() => swiper.current.scrollBy(0-index)}>
                        <Text style={[{fontSize:15,color:"#BDBCBC"},index==0?{color:"#615F5F"}:{}]}>
                            store
                        </Text>
                    </TouchableOpacity>
                </View>
                <View style={{flexDirection:"row"}}>
                    <TouchableOpacity onPress={() => swiper.current.scrollBy(1-index)}>
                        <Text style={[{fontSize:15,color:"#BDBCBC"},index==1?{color:"#615F5F"}:{}]}>
                            coupon
                        </Text>
                    </TouchableOpacity>
                </View>
                <View style={{flexDirection:"row"}}>
                    <TouchableOpacity onPress={() => swiper.current.scrollBy(2-index)}>
                        <Text style={[{fontSize:15,color:"#BDBCBC"},index==2?{color:"#615F5F"}:{}]}>
                            stamp
                        </Text>
                    </TouchableOpacity>
                </View>
                <View style={{flexDirection:"row"}}>
                    <TouchableOpacity onPress={() => swiper.current.scrollBy(3-index)}>
                        <Text style={[{fontSize:15,color:"#BDBCBC"},index==3?{color:"#615F5F"}:{}]}>
                            menu
                        </Text>
                    </TouchableOpacity>
                </View>
                
                
            </View>
            
            {dropdown?<View style={{right:0,paddingTop:26,paddingBottom:24,paddingLeft:24,paddingRight:13,position:"absolute",backgroundColor:"white",zIndex:15,
                shadowColor: "#000",
                shadowOffset: {
                    width: 0,
                    height: 6,
                },
                shadowOpacity: 0.39,
                shadowRadius: 8.30,
                
                elevation: 13,}}>
                    <TouchableOpacity onPress={() => HandleAlarm(store_posts,0)}>
                        <Text style={{marginBottom:22,fontSize:15,color:"#615F5F"}}>
                            알림 {store_posts.alarm==true? 
                            <Text style={{fontWeight:"bold",color:"#FFD63A"}}>on</Text>
                            :<Text style={{fontWeight:"bold",color:"#615F5F"}}>off</Text>}
                        </Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => CreateShorcut()}>
                        <Text style={{marginBottom:22,fontSize:15,color:"#615F5F"}}>
                            홈 화면에 추가
                        </Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => {setIsModalVisigle(true)
                        console.log("presssed")}}>
                        <Text style={{fontSize:15,color:"#615F5F"}}>
                            신고 / 차단
                        </Text>
                        </TouchableOpacity>
                    </View>:undefined}
                <View style={{flex:1,justifyContent:"center",zIndex:-1}}>
                <Swiper 
                onScrollBeginDrag={() => setDropdown(false)} 
                style={[{zIndex:-1},height?{height}:StoreHeight?{StoreHeight}: {}]} 
                zIndex={0} 
                ref={swiper} 
                index={index}
                dotStyle={{display:"none"}} 
                activeDotStyle={{display:"none"}}
                loop={false} 
                onIndexChanged={(i) => {
                    var arr = index
                    arr = i
                    setIndex(arr) 
                    setIsFirst(false)
                    if(i==0) {
                        setHeight(StoreHeight)
                    }
                    else if (i==1) {
                        setHeight(CouponHeight)
                    }
                    else if (i==2) {

                        setHeight(StampHeight)
                    }
                    else if (i==3) {

                        setHeight(MenuHeight)
                    }
                }} loadMinimal={false} showsButtons={false}>
                    <View>
                        <Store_Post myStore={myStore} user={user} onLike={onLike} onHate={onHate} isFirst={isFirst} navigation={navigation} index={index} height={StoreHeight} 
                        handleHeight={(e) => {
                            setStoreHeight(e)
                            setHeight(e)
                        } } item={store_posts} 
                        setItemNum ={setStoreNum}
                        />
                    </View>
                    <View>
                        <CouponeItem update={update} isMyStore={isMyStore} myStore={myStore} navigation={navigation} index={index} height={CouponHeight}
                        handleHeight={(e) => {
                            setCouponHeight(e)
                            setHeight(e)
                        } } item={[]}
                        setItemNum ={setCouponNum}
                        store={store}
                        user={user}/>
                    </View>
                    <View>
                        <StampItem  update={update} isMyStore={isMyStore} myStore={myStore} user={user} store={store} navigation={navigation} index={index} height={StampHeight}
                        handleHeight={(e) => {
                            setStampHeight(e)
                            setHeight(e)
                        } } item={[]} 
                        setItemNum ={setStampNum}
                        />
                    </View>
                    <View>
                        <MenuItem update={update} myStore={myStore} store={store} navigation={navigation} index={index} height={MenuHeight}
                        handleHeight={(e) => {
                            setMenuHeight(e)
                            setHeight(e)
                        } } item={[]} 
                        setItemNum ={setMenuNum}/>
                        
                    </View>
                </Swiper>
                </View>
                <Modal isVisible={isModalVisible} onBackButtonPress={() => setIsModalVisigle(false)} onBackdropPress={() => setIsModalVisigle(false)}>
                    <View style={{width:"90%",alignSelf:"center",paddingTop:30,paddingLeft:16,paddingRight:16,backgroundColor:"white"}}>
                        <View style={{flexDirection:"row"}}>
                            <Checkbox value={checkbox1} onChange={() =>handleCheckbox(1)}/>
                            <Text style={{marginTop:5,color:"#615F5F",fontSize:12,lineHeight:16,paddingBottom:24}}>
                            성인 컨텐츠 포함 불법적인 내용을 담고 있습니다.
                            </Text>
                        </View>
                        <View style={{flexDirection:"row"}}>
                            <Checkbox value={checkbox2} onChange={() =>handleCheckbox(2)}/>
                        <Text style={{marginTop:5,color:"#615F5F",fontSize:12,lineHeight:16,paddingBottom:24}}>
                        게시된 내용이 사실과 일치하지 않습니다.
                        </Text>
                        </View>
                        <View style={{flexDirection:"row"}}>
                        <Checkbox value={checkbox3} onChange={() =>handleCheckbox(3)}/>
                        <Text style={{marginTop:5,color:"#615F5F",fontSize:12,lineHeight:16,paddingBottom:24}}>
                        신고자 본인 또는 타인을 사칭하고 있습니다.
                        </Text>
                        </View>
                        <View style={{flexDirection:"row"}}>
                        <Checkbox value={checkbox4} onChange={() =>handleCheckbox(4)}/>
                        <Text style={{marginTop:5,color:"#615F5F",fontSize:12,lineHeight:16,paddingBottom:24}}>
                            더 이상 운영되지 않는 계정입니다.
                        </Text>
                        </View>
                        <View style={{flexDirection:"row"}}>
                        <Checkbox value={checkbox5} onChange={() =>handleCheckbox(5)}/>
                        <Text style={{marginTop:5,color:"#615F5F",fontSize:12,lineHeight:16,paddingBottom:24}}>
                        존재하지 않는 가게 또는 비즈니스입니다.
                        </Text>
                        </View>
                        <View style={{flexDirection:"row"}}>
                        <Checkbox value={checkbox6} onChange={() =>handleCheckbox(6)}/>
                            <Text style={{marginTop:5,color:"#615F5F",fontSize:12,lineHeight:16,paddingBottom:24}}>
                                기타
                            </Text>
                        </View>
                        <TouchableOpacity onPress={() => {
                            setIsModalVisigle(false)
                            navigation.navigate("BlackList")
                        }}>
                            <Text style={{color:"#615F5F",fontSize:12,fontWeight:"bold",marginLeft:"auto",borderBottomColor:"#615F5F",borderBottomWidth:1,marginBottom:31}}>
                                차단리스트 보기
                            </Text>
                        </TouchableOpacity>
                    </View>
                    <TouchableOpacity onPress={() => Add_BlackList(store_posts.id)} style={{paddingTop:15,paddingBottom:14,backgroundColor:"#FFD63A",width:"90%",alignSelf:"center"}}>
                        <Text style={{color:"black",fontSize:15,fontWeight:"bold",textAlign:"center"}}>
                            신고 및 차단
                        </Text>
                    </TouchableOpacity>
                </Modal>
            </View>
        )
}