import { useState } from 'react';
import {post} from 'axios'
import {Dimensions, View,Text,Image,StyleSheet,TouchableOpacity,TouchableHighlight,Alert} from 'react-native'
import * as React from 'react'
import moment from 'moment'
import Checkbox from '@react-native-community/checkbox'
import Camera from '../assets/Camera_big.svg'
import Position from '../assets/position.svg'
import Heart from '../assets/heart.svg'
import Heart_Full from '../assets/heart_full.svg'
import Share from '../assets/share.svg'
import Chat from '../assets/chat.svg'
import Call from '../assets/call.svg'
import Cycle from '../assets/cycle.svg'
import WifiManager from "react-native-wifi-reborn";
import call from 'react-native-phone-call'
import WIFI_OFF from '../assets/wifi_off.svg'
import Star from './Star'
import {put,get} from 'axios'
import {Share as Share_} from 'react-native'
import { TouchableNativeFeedback, ScrollView, TextInput } from 'react-native-gesture-handler';
import Modal from 'react-native-modal'
import RNKakaoLink from 'react-native-kakao-links';
import { SERVER } from '../common/servername';
import AsyncStorage from '@react-native-community/async-storage';
import axios from 'axios'
const linkObject={
    webURL                :'sangga://MyCoupon/red',//optional
    mobileWebURL          :'sangga://MyCoupon/red',//optional
    androidExecutionParams:'shopId=1&itemId=24', //optional For Linking URL
    iosExecutionParams    :'shopId=1&itemId=24', //optional For Linking URL
};
const contentObject = {
    title     : '제목',
    link      : linkObject,
    imageURL  : 'https://mud-kage.kakao.co.kr/dn/NTmhS/btqfEUdFAUf/FjKzkZsnoeE4o19klTOVI1/openlink_640x640s.jpg',
  
    desc      : '설명',//optional
    imageWidth: 240,//optional
    imageHeight:240//optional
  }
  
  //5개의 속성 중 최대 3개만 표시해 줍니다. 우선순위는 Like > Comment > Shared > View > Subscriber 입니다.
  const socialObject ={
    likeCount:12,//optional
    commentCount:1,//optional
    sharedCount:23,//optional
    viewCount:10,//optional
    subscriberCount:22//optional
  }
  
  const buttonObject = {
    title:'앱으로 보기',//required
    link : linkObject,//required
  }
  
  
  const commerceDetailObject ={
    regularPrice :10000,//required,
    // discountPrice:1000,//Optional
    // discountRate:10,//Optional
    // fixedDiscountPrice:1000//Optional
  };
export default ({ myStore,item, height, handleHeight,index,isFirst , navigation,contentsVisible,size, onLike,onHate}) => {
    const [isHidden,setIsHidden] = React.useState(2)
    const [tempHeight,setTempHeight] = React.useState(0)
    const [isModalVisible,setIsModalVisible] = React.useState(false)
    const [status,setStatus] = React.useState(item&&item.status?item.status:"")
    const [directly,setDirectly] = React.useState(false)
    const [text,setText] = React.useState("")
    const [HandleStatusModalOpen,setHandleStatusModalOpen] = React.useState(false)
    const [detail,setDetail] = React.useState([{}])
    const [marginTop,setMarginTop] = React.useState(0)
    React.useEffect(() => {
        if(index==0 ) {
            handleHeight(tempHeight)
        }
    },[index,tempHeight])
    React.useEffect(() => {
        if(item && item.status) setStatus(item.status)
    },[item])
    const setStoreStatus = (e) => {
        setStatus(e)
        setDirectly(false)
        setHandleStatusModalOpen(false)
        AsyncStorage.getItem('token',(err,res) => {
            put(`http://${SERVER}/stores/status/${item.id}`,{status:e},{
                headers: {'Authorization': JSON.parse(res)}
                 }).then(res => {
            },(err) => {
                console.log(err)
            })
        })
    }
    const onShare = async () => {
        try {
          const result = await Share_.share({
            message:
              'React Native | A framework for building native apps using React',

          }).then(({action,activityType}) => {
            if (action === Share_.sharedAction) {
              if (result.activityType) {
                // shared with activity type of result.activityType
              } else {
                // shared
              }
            } else if (result.action === Share_.dismissedAction) {
              // dismissed
            }
              
          })
        } catch (error) {
          alert(error.message);
        }
      };
  const linkCustom = async () => {
    try{
        const options = {
          objectType:'feed',//required
          content:contentObject,//required
          social:socialObject,//optional
          buttons:[buttonObject]//optional
        };
        const response = await RNKakaoLink.link(options);
  
      }catch(e){
        console.warn(e);
      }
  }
    const callToStore = () => {
        call({number:item.phone_number,prompt:true})
    } 
    const openDetail = () => {
        setIsModalVisible(true)
        get(`http://${SERVER}/stores/${item.id}`).then(res => {
            if(res.data.success) setDetail(res.data.data)
            
        })
    }
    return (
        <View  style={{backgroundColor:"white",width:"100%"}}>
        <View onLayout={(e) => {
            if(isFirst&& e.nativeEvent.layout.height>0 ) {
                handleHeight(e.nativeEvent.layout.height)
                setTempHeight(e.nativeEvent.layout.height)
            }
            else{
                setTempHeight(e.nativeEvent.layout.height)
            }
            }} style={{paddingTop:16,backgroundColor:"white",width:"100%"}}>
            
            <View style={{flexDirection:"row",paddingLeft:16}}>
                
                {item&& item.profile===null?
                <TouchableOpacity style={{padding:10,borderColor:"#615F5F",borderWidth:1,marginRight:10}}>
                <Camera width={40} height={30} style={{}}/>
                </TouchableOpacity>:<Image style={{width:70,height:60,marginRight:10}} source={require('../assets/img.png')}/>}
                <View style={{width:"40%"}}>
                    <TouchableOpacity onPress={() => openDetail()}>
                    <View style={{flexDirection:"row"}}>
                    <Text numberOfLines={1} style={[{fontSize:15,marginTop:3,width:"100%"} ,size=="small"?{fontSize:12}:{}]}>
                        {item && item.name? item.name:item.storeName?item.storeName:undefined}
                    </Text>
                    <Text style={{}}>
                        {"최근 의심자 발생 수 : " + item.fire_count}
                    </Text>
                    </View>
                    </TouchableOpacity>
                    <View>
                        <Text style={[{fontSize:12,color:"#979292",marginTop:4.2},,size=="small"?{fontSize:9}:{}]}>
                            {moment(item.updatedAt).format("YYYY-MM-DD")}
                        </Text>
                    </View>
                </View>
                <Text style={[{marginLeft:"auto",paddingRight:13,flexDirection:"row",color:"#979292",fontSize:12},size=="small"?{fontSize:9}:{}]}>
                    
                </Text>
            </View>
            {contentsVisible === false?undefined:
            <View style={{flexDirection:"row",paddingLeft:16}}>
                <View style={{width:"60%",flexDirection:"row"}}>
                    <Text onLayout={e => {if(e.nativeEvent.layout.height>0) setMarginTop(e.nativeEvent.layout.height-10)}} style={{marginTop:8,fontSize:14}} numberOfLines={isHidden}>
                        {item.intro}
                    </Text>
                    </View>
                
            </View>}
            

            {//item.postUrl.map((e,i) => <Image style={{width:500,height:500}} source={{uri:`../assets/${i+1}.png`}}/>)}
            }
            <View style={{borderBottomColor:"#BDBCBC",borderBottomWidth:1,paddingBottom:11,marginTop:12,marginLeft:17,marginRight:17,flexDirection:"row"}}>
                <Position width={size=="small"? 8.9:11} height={size=="small"?13.76:17}/>
                <TouchableOpacity onPress={() => navigation.navigate("StorePosition",{item})}>
                    <Text style={[{marginLeft:6.5,marginTop:-3,fontSize:13,color:"#615F5F",borderBottomColor:"#615F5F",borderBottomWidth:2},size=="small"?{fontSize:10}:{}]}>{Math.round(parseInt(item.distance))}m</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => navigation.navigate("Review",{id:item.id})} style={{marginLeft:"auto",flexDirection:"row"}}>
                    <Star navigation={navigation} item={item.rating} id={item.id} navigateTo={"Review"}/>
                    <Text style={[{fontSize:13,color:"#615F5F",marginTop:-3,marginLeft:4},size=="small"?{fontSize:10}:{}]}>
                        {item.rating} <Text>({item.reviewCount})</Text>
                    </Text>
                </TouchableOpacity>
            </View>
            
            <View style={{flexDirection:"row",justifyContent:"space-between",paddingLeft:16,paddingRight:16,paddingTop:10,paddingBottom:11}}>
                <TouchableOpacity style={{flexDirection:"row"}} onPress={() => {
                    if(item.isLike == false) {
                        onLike(item.id)
                    }
                    else {
                        onHate(item.id)
                    }
                }}>
                    {item.isLike?size=="small"?<Heart_Full width={17.8} height={15.38}/>:<Heart_Full/>: 
                    size=="small"?<Heart width={17.8} height={15.38}/> : <Heart/> 
                    }
                    <Text style={[{"position":"absolute",marginLeft:35,fontSize:13,color:"#615F5F"},size=="small"?{fontSize:10}:{}]}>
                        {item.likeCount}
                    </Text>
                </TouchableOpacity>
                
                {size=="small"?<TouchableOpacity onPress={() => onShare()} width={17.8} height={15.38}><Share /></TouchableOpacity>:<TouchableOpacity onPress={() => onShare()} ><Share/></TouchableOpacity>}
                
                {size=="small"?<TouchableOpacity onPress={() => navigation.navigate("ChatRoom",{id:item.id})}><Chat width={17.8} height={15.38}/></TouchableOpacity>:<TouchableOpacity  onPress={() => navigation.navigate("ChatRoom",{id:item.id})}><Chat/></TouchableOpacity>}
                
                {size=="small"?<TouchableOpacity><Call onPress={() => callToStore()} width={17.8} height={15.38}/></TouchableOpacity>:<TouchableOpacity><Call onPress={() => callToStore()}/></TouchableOpacity>}
                
            </View>
        </View>

        <Modal onBackButtonPress={() => setIsModalVisible(false)} onBackdropPress={() => setIsModalVisible(false)} isVisible={isModalVisible}>
            <View>
            <ScrollView style={{ width:"100%",backgroundColor:"white",alignSelf:"center",paddingTop:16,paddingLeft:16,paddingRight:16,paddingBottom:16}}>
                <Image style={{width:70,height:70,borderRadius:100,alignSelf:"center",marginBottom:17}} source={require('../assets/img.png')} />
                <Text style={{color:"black",fontWeight:"bold",fontSize:18,textAlign:"center"}}>  
                    코로나꼼짝마 님
                </Text>
                <Text style={{color:"#979292",fontSize:12,textAlign:"center",marginBottom:28.8}}>
                    2020.3.10 가입
                </Text>
                <Image source={require('../assets/img.png')} style={{alignSelf:"center",width:166,height:106,marginBottom:16}} resizeMode="cover"/>
                { detail.map((e,i) => {
                    return (

                    <View style={{alignSelf:"center"}}>
                        <Text style={{color:"black",fontSize:13}}>
                            전단지(상점명)명 : {`${e.name}`}
                        </Text>
                        <Text style={{color:"black",fontSize:13}}>
                            업종 : {`${e.category}`}
                        </Text>
                        <Text style={{color:"black",fontSize:13}}>
                            전화번호 : {`${e.phone_number}`}
                        </Text>
                        <Text style={{color:"black",fontSize:13}}>
                            주소 : {`${e.address}`}
                        </Text>
                    </View>
                    )
                })}
            </ScrollView>
            </View>
        </Modal>

        
        <Modal onBackButtonPress={() => setHandleStatusModalOpen(false)} onBackdropPress={() => setHandleStatusModalOpen(false)} isVisible={HandleStatusModalOpen}>
            <View>
            <View style={{ width:"100%",backgroundColor:"white",alignSelf:"center",paddingTop:16,paddingLeft:16,paddingRight:16,paddingBottom:16}}>
                <TouchableOpacity onPress={() => setStoreStatus("")}>
                <Text style={{color:"#615F5F",fontSize:16,textAlign:"center",lineHeight:50}}>
                    표시안함
                </Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => setStoreStatus("금일휴업")}>
                <Text style={{color:"#615F5F",fontSize:16,textAlign:"center",lineHeight:50}}>
                    금일휴업
                </Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => setStoreStatus("영업준비중")}>
                <Text style={{color:"#615F5F",fontSize:16,textAlign:"center",lineHeight:50}}>
                    영업준비중
                </Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => setStoreStatus("OPEN")}>
                <Text style={{color:"#615F5F",fontSize:16,textAlign:"center",lineHeight:50}}>
                    OPEN
                </Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => setStoreStatus("CLOSED")}>
                <Text style={{color:"#615F5F",fontSize:16,textAlign:"center",lineHeight:50}}>
                    CLOSED
                </Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => setStoreStatus("영업중(대기 고객 많음)")}>
                <Text style={{color:"#615F5F",fontSize:16,textAlign:"center",lineHeight:50}}>
                    영업중(대기 고객 많음)
                </Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => setStoreStatus("영업중(대기 고객 없음)")}>
                <Text style={{color:"#615F5F",fontSize:16,textAlign:"center",lineHeight:50}}>
                    영업중(대기 고객 없음)
                </Text>
                </TouchableOpacity>
                <TouchableOpacity >
                <Text style={{color:"#615F5F",fontSize:16,textAlign:"center",lineHeight:50}}>
                    예약 문의
                </Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => {
                    setHandleStatusModalOpen(false)
                    setDirectly(true)
                }}>
                <Text style={{color:"#615F5F",alignSelf:"center",fontSize:15,fontWeight:"bold",borderBottomWidth:1,borderBottomColor:"#615F5F",textAlign:"center",marginTop:10,marginBottom:10}}>
                    직접 입력
                </Text>
                </TouchableOpacity>
            </View>
            </View>
        </Modal>


        
        <Modal onBackButtonPress={() => setDirectly(false)} onBackdropPress={() => setDirectly(false)} isVisible={directly}>
            <View>
            <View style={{ width:"100%",paddingLeft:16,paddingRight:16,backgroundColor:"white",alignSelf:"center",paddingTop:25}}>
                <View style={{marginBottom:24,}}>
                <Text style={{color:"#615F5F",alignSelf:"center",fontSize:15,fontWeight:"bold",borderBottomWidth:1,borderBottomColor:"#615F5F",textAlign:"center",marginTop:10,marginBottom:10}}>
                    직접 입력
                </Text>
                </View>
                <TextInput value={text} onChangeText={e => setText(e)} style={{paddingLeft:16,paddingRight:16,borderColor:"#FFD63A",borderWidth:1,marginBottom:23}}/>
            </View>
            <View style={{flexDirection:"row",backgroundColor:"white"}}>
                <TouchableOpacity
                onPress={() => setStoreStatus(text)}
                style={{width:"50%",backgroundColor:"#FFD63A",paddingTop:15,paddingBottom:15}}>
                    <Text style={{textAlign:"center",fontSize:15,color:"black",fontWeight:"bold"}}>
                        확인
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity
                onPress={() => setDirectly(false)} style={{width:"50%",backgroundColor:"white",paddingTop:15,paddingBottom:15}}>
                    <Text style={{textAlign:"center",fontSize:15,color:"black",fontWeight:"bold"}}>
                        취소
                    </Text>
                </TouchableOpacity>
            </View>
            </View>
        </Modal>
        </View>
    )
}

const style = StyleSheet.create({
    text:{
        color:"#707070",
        fontSize:11,
        fontWeight:"900"
    }
})