import { useState } from 'react';
import {post,get} from 'axios'
import {Dimensions, View,Text,Image,StyleSheet,TouchableOpacity,TouchableHighlight,Alert} from 'react-native'
import * as React from 'react'
import moment from 'moment'
import Modal from 'react-native-modal';

import Options from '../assets/Options.svg'
import { SERVER } from '../common/servername';
import QRCode from 'react-native-qrcode-svg';
import {Share as Share_} from 'react-native'
import { TextInput } from 'react-native-gesture-handler';
import firebase from '@react-native-firebase/dynamic-links'
import Firebase from '@react-native-firebase/app'
export default ({ myStore,item,update, height, handleHeight,index,setItemNum,store,user }) => {
    const [isHidden,setIsHidden] = React.useState(2)
    const [tempHeight,setTempHeight] = React.useState(0)
    const [isModalVisible,setIsModalVisible] = React.useState(false)
    const [isModalVisible_,setIsModalVisible_] = React.useState(false)
    const [isModalVisible_Present,setIsModalVisible_Present] = React.useState(false)
    const [isModalVisible_Use,setIsModalVisible_Use] = React.useState(false)
    const [Item,setItem] = React.useState([])
    const [num,setNum] = React.useState("")
    const [isMyStore,SetisMyStore] = React.useState(false)
    const toggleModal_Use= () => {
        if(isModalVisible_Use == true) {
           setIsModalVisible_Use(false)
        }
        else {
            setIsModalVisible_Use(true)
        }
    };
    React.useEffect(() => {
        if(!item[0]) {
            
            if(myStore.map((e,i) => e.id).indexOf(store.id)>=0) {
                get(`http://${SERVER}/coupons/${store.id}`).then(res => {
                    if(res.data.success) {
                        setItem(res.data.data)
                        setItemNum(res.data.data.length)

                    }
                })
            }
            else {
                post(`http://${SERVER}/coupons/read`,{UserId:user.id?user.id:7,StoreId:store.id}).then(e => {
                    if(e.data.success) {
                        setItem(e.data.data)
                        setItemNum(e.data.data.length)

                    }
                })
            }
        }
        else {
            setItem(item)
        }
    },[])
    React.useEffect(() => {
        if(!item[0]) {
            
            if(myStore.map((e,i) => e.id).indexOf(store.id)>=0) {
                get(`http://${SERVER}/coupons/${store.id}`).then(res => {
                    if(res.data.success) {
                        setItem(res.data.data)
                        setItemNum(res.data.data.length)

                    }
                })
            }
            else {
                post(`http://${SERVER}/coupons/read`,{UserId:user.id?user.id:7,StoreId:store.id}).then(e => {
                    if(e.data.success) {
                        setItem(e.data.data)
                        setItemNum(e.data.data.length)

                    }
                })
            }
        }
        else {
            setItem(item)
        }
    },[update])
    React.useEffect(() => {
        if(index==1) {
            SetisMyStore(myStore.map((e,i) => e.id).indexOf(store.id)<0?false:true)
            handleHeight(tempHeight)
            if(Item.length==0) {
                handleHeight(0)
            }
        }
    },[index,tempHeight])
    const toggleModal = () => {
        if(isModalVisible == true) {
           setIsModalVisible(false)
        }
        else {
            setIsModalVisible(true)
        }
    };
    const toggleModal_ = () => {
        if(isModalVisible_ == true) {
           setIsModalVisible_(false)
        }
        else {
            setIsModalVisible_(true)
        }
    };
    const toggleModal_Present= () => {
        if(isModalVisible_Present == true) {
           setIsModalVisible_Present(false)
        }
        else {
            setIsModalVisible_Present(true)
        }
    };
    const onShare = async (e) => {
        try {
            const result = await Share_.share({
            message:
              `상가톡에서 쿠폰을 이용해주세요!\n[${user.nickname}}]님 으로부터 소중한 쿠폰 [${e.name}]이 도착했습니다!\n\n아래 링크를 클릭하여 쿠폰을 받아주세요!\n[https://sangatalk.page.link/?link=https://sanggatalk.io/app/stamp?params=${e.id}&apn=com.sangatalk]\n\n상가톡 서비스 문의는 아래 링크를 참고해주세요 ^~^\n상가톡 채널 바로가기 : [ http://sanggatalk.io ]\n상가톡 고객센터 바로가기 : [ http://sanggatalk.io/ClilentCenter ]\n`,

          }).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);
        }
      };
    return (
        <View  onLayout={(e) => setTempHeight(e.nativeEvent.layout.height)}    style={{paddingBottom:24,backgroundColor:"white"}} >
            
            {Item.map((e,i) =><View style={{paddingTop:16,paddingLeft:16,paddingRight:16,backgroundColor:"white",marginBottom:8}}>
            <View style={{position:"absolute",left:16,top:16}}>
            <Text style={{color:"#615F5F",fontSize:10}}>
                {console.log(isMyStore,e.option)}
                {e.option=="public" || isMyStore? `남은 수량 : ${e.stock_count}` : e.Users[0] && `${moment(e.Users[0].Coupon_user.createdAt).format('YY.M.D 받음')}`}
            </Text>
            <Text style={{color:"black",fontWeight:"bold",fontSize:10}}>
                {e.option == "public"? "공용" : "사용자지정" }
            </Text>
            </View>
            {isMyStore?e.option == "public"?undefined:<TouchableOpacity onPress={() => toggleModal_Present(true)} style={{zIndex:10,position:"absolute",right:16,top:16,padding:5.5,borderWidth:1,borderColor:"#FFD63A"}}>
                <Text style={{color:"#FFD63A",fontSize:14,fontWeight:"bold",lineHeight:16}}>
                    선 물
                </Text>
                <Text style={{color:"#FFD63A",fontSize:14,fontWeight:"bold",lineHeight:16}}>
                    하 기
                </Text>
            </TouchableOpacity>:undefined}
            <View style={{paddingTop:13,paddingBottom:11.5,borderBottomColor:"#BDBCBC",borderBottomWidth:1}}>
                <Text style={{textAlign:"center",fontSize:13,fontWeight:"bold"}}>
                    {e.name}
                </Text>
                <Text style={{textAlign:"center",color:"#D81F34",fontSize:24,marginTop:2,marginBottom:9,fontWeight:"bold"}}>
                    {e.sale_price}원 할인
                </Text>
                <Text style={{textAlign:"center",color:"#615F5F",fontSize:14}}>
                    {moment(e.use_time_max).format("~YYYY. MM. DD")}
                    <Text style={{color:"#D81F34",fontSize:15,paddingLeft:12}}>
                        {"   D"}{moment(e.use_time_min).diff(e.use_time_max,'day')}
                    </Text>
                </Text>
            </View>
            <View style={{flexDirection:"row",marginTop:10.5,marginBottom:17}}>
                <Text style={{fontSize:12,fontWeight:"bold",lineHeight:29}}>
                    사용조건
                </Text>
                <View>
                <Text style={{fontSize:12,color:"#615F5F",marginLeft:5,lineHeight:29}}> {e.use_condition} </Text> 
                </View>
            </View>
            <TouchableOpacity onPress={() => toggleModal()} style={{flexDirection:"row",marginBottom:8}}>
                <Text>
                    더 보기 +
                </Text>
                <Options width={15} height={22} style={{ marginLeft:12}}/>
            </TouchableOpacity>
            
      <Modal onBackButtonPress={() => setIsModalVisible(false)} onBackdropPress={() => toggleModal()} isVisible={isModalVisible}>
        <View>
        <View style={{ width:"80%",backgroundColor:"white",alignSelf:"center",paddingLeft:24,paddingTop:24,paddingBottom:24}}>
            <Text style={{fontSize:15,color:"#615F5F"}}>
                - {e.name} 한정
            </Text>
            <Text style={{fontSize:15,color:"#615F5F"}}>
                - {moment(e.use_time_min).format("YYYY. MM. DD")}{moment(e.use_time_max).format("~YYYY. MM. DD")}
            </Text>
            <Text style={{fontSize:15,color:"#615F5F"}}>
                - 결제시 점원에게 확인 후 적용
            </Text>
                <Text style={{fontSize:15,color:"#615F5F"}}>
                    - {e.use_condition}
                </Text>
        </View>
        <TouchableOpacity onPress={() => {toggleModal()
        toggleModal_()}} style={{paddingTop:12,paddingBottom:15,backgroundColor:"#FFD63A",width:"80%",alignSelf:"center"}}>
            <Text style={{textAlign:"center",color:"black",fontSize:14}}>
                쿠폰사용
            </Text>
        </TouchableOpacity>
        </View>
      </Modal>


      
      <Modal onBackButtonPress={() => setIsModalVisible_(false)} onBackdropPress={() => toggleModal_()} isVisible={isModalVisible_}>
        <View>
            
        <View style={{ width:"80%",backgroundColor:"white",alignSelf:"center",paddingLeft:24,paddingTop:24,paddingBottom:24,paddingRight:24}}>
            <Text style={{fontSize:16,color:"#615F5F",fontWeight:"bold",textAlign:"center",marginBottom:25}}>
                이 쿠폰을 사용하시겠습니까?
            </Text>
            
            <Text style={{fontSize:13,color:"black",fontWeight:"bold",textAlign:"center"}}>
                {e.name}
            </Text>
            <Text style={{color:"#D81F34",fontSize:24,fontWeight:"bold",textAlign:"center"}}>
                {e.sale_price}원 할인
            </Text>
            <View style={{flexDirection:"row",justifyContent:"center"}}>
                <Text style={{fontSize:14,color:"#615F5F",textAlign:"center"}}>
                    {moment(e.use_time_max).format("~YYYY. MM. DD")}
                </Text>
                <Text style={{fontSize:15,color:"#D81F34",textAlign:"center", marginLeft:10}}>
                    D-6
                </Text>
            </View>
        </View>
        <View style={{flexDirection:"row",alignSelf:"center"}}>
            <TouchableOpacity onPress={() => {toggleModal_()
            toggleModal_Use()}} style={{paddingTop:12,paddingBottom:15,backgroundColor:"#FFD63A",width:"40%",alignSelf:"center"}}>
                <Text style={{textAlign:"center",color:"black",fontSize:14}}>
                    사용하기
                </Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => toggleModal_()} style={{paddingTop:12,paddingBottom:15,backgroundColor:"white",width:"40%",alignSelf:"center"}}>
                <Text style={{textAlign:"center",color:"black",fontSize:14}}>
                    취소
                </Text>
            </TouchableOpacity>
        </View>
        </View>
      </Modal>

      
  <Modal onBackButtonPress={() => toggleModal_Use()} onBackdropPress={() => toggleModal_Use()} isVisible={isModalVisible_Use}>
    <View>
    
    <View style={{ width:"80%",backgroundColor:"white",alignSelf:"center",paddingLeft:24,paddingTop:24,paddingBottom:24,paddingRight:24,justifyContent:"center"}}>
        <Text style={{fontSize:16,color:"#615F5F",fontWeight:"bold",textAlign:"center",marginBottom:25}}>
            QR코드를 점원에게 제시해주세요.
        </Text>
            <View style={{alignSelf:"center",marginLeft:"auto",marginRight:"auto"}} >
                <QRCode size={120} value={e.option=="public"? JSON.stringify({url:`http://${SERVER}/coupons/${e.option}/${e.id}`,UserId:`${user.id}`}):
                JSON.stringify({url:`http://${SERVER}/coupons/${e.option}/${e.id}`,UserId:`${user.id}`})}/>
            </View>
        </View>
    </View>
  </Modal>
      
      <Modal  onBackdropPress={() => toggleModal_Present()} isVisible={isModalVisible_Present}>
        <View>
            
        <View style={{ width:"90%",backgroundColor:"white",alignSelf:"center",paddingLeft:24,paddingTop:24,paddingBottom:24,paddingRight:24}}>
            <Text style={{fontSize:16,color:"#615F5F",fontWeight:"bold",textAlign:"center",marginBottom:3}}>
                선물할 쿠폰 수량
            </Text>
            <View style={{marginTop:25,marginBottom:24,flexDirection:"row",marginLeft:"auto",marginRight:"auto"}}>
                <TextInput value={num} onChangeText={(e) => {
                        setNum(e)   
                    }} keyboardType="number-pad" style={{textAlign:"center",width:"33%",paddingTop:9,paddingBottom:9,fontSize:16,fontWeight:"bold",borderColor:"#FFD63A",borderWidth:1,}}/>
                <Text style={{alignSelf:"center",marginLeft:16,color:"#615F5F",fontSize:16,fontWeight:"bold"}}>
                    개
                </Text>
            </View>
        </View>
        <View style={{flexDirection:"row",alignSelf:"center"}}>
            <TouchableOpacity onPress={() => {toggleModal_Present()
            onShare(e)}} style={{paddingTop:12,paddingBottom:15,backgroundColor:"#FFD63A",width:"45%",alignSelf:"center"}}>
                <Text style={{textAlign:"center",color:"black",fontSize:14}}>
                    선물하기
                </Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => toggleModal_Present()} style={{paddingTop:12,paddingBottom:15,backgroundColor:"white",width:"45%",alignSelf:"center"}}>
                <Text style={{textAlign:"center",color:"black",fontSize:14}}>
                    취소
                </Text>
            </TouchableOpacity>
        </View>
        </View>
      </Modal>
      </View> )}
        </View>
    )
}

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