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

import Modal from 'react-native-modal';
import Options from '../assets/Options.svg'
import Available from '../assets/available.svg'
import {SERVER} from '../common/servername'

export default ({ myStore,item, height, handleHeight,index,setItemNum,store,user,StoreData }) => {
    const [stamp,setStamp] = React.useState(["","","","","","","","","","","",""])
    const [tempHeight,setTempHeight] = React.useState(0)
    const [num,setNum] = React.useState("")
    const [isMyStore,SetisMyStore] = React.useState(false)
    
    const [Item,setItem] = React.useState([{}])
    const [isModalVisible,setIsModalVisible] = React.useState(false)
    const [isModalVisible_Present,setIsModalVisible_Present] = React.useState(false)
    const [isModalVisible_Use,setIsModalVisible_Use] = React.useState(false)
    const [storeData,setStoreData] = React.useState({})
    const [maxNum, setMaxNum] = React.useState(0)
    const [indStampNum,setIndStampNum] = useState()
    const [useNum,setUseNum] = React.useState(0)
    React.useEffect(() => {
        if(index==2) {
            handleHeight(tempHeight)
        }
    },[index,tempHeight])
    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 toggleModal = () => {
        if(isModalVisible == true) {
            SetisMyStore(myStore.map((e,i) => e.id).indexOf(store.id)<0?false:true)
           setIsModalVisible(false)
        }
        else {
            setIsModalVisible(true)
        }
    };
    
    const toggleModal_Use= () => {
        if(isModalVisible_Use == true) {
           setIsModalVisible_Use(false)
        }
        else {
            setIsModalVisible_Use(true)
        }
    };
    React.useEffect(() => {
        setItem(item)
                
        if(item.length==0) setItemNum(0)
        setIndStampNum(StoreData.totalCount-StoreData.totalUsedCount)
        setStoreData(StoreData)
    },[])
    
    React.useEffect(() => {
            item.map((el,j,arr1) => {
                if(maxNum < el.conditionCount) {
                    const temp = (el.conditionCount/4).toString().split(".")[1]
                    setMaxNum(el.conditionCount + (temp=="25"?3:temp=="5"?2:temp=="75"?1:0))
                }
            })
    },[maxNum])
    return (
        <View onLayout={(e) => {
            setTempHeight(e.nativeEvent.layout.height)}}  style={{paddingLeft:16,paddingRight:16,paddingBottom:24,backgroundColor:"white"}}>
                    <View>
                    <View>
        <View style={{paddingTop:13,paddingBottom:11.5}}>
            <View style={{flexDirection:"row"}}>
                <Text style={{fontSize:15}}>
                    {storeData.storeName}
                    
                </Text>
                <TouchableOpacity onPress={() => toggleModal()} style={{marginLeft:"auto",marginRight:80}}>
                    <Text style={{color:"#979292",fontSize:11}}>사용가능 { Math.floor((indStampNum+1) / 10)}</Text>
                </TouchableOpacity>

            </View>
            <View style={{width:"50%"}}>
                    {Item.map((el,i,arr) => {
                        return (
                            <Text style={[{color:"#615F5F",fontSize:11},i==0?{marginTop:9}:i==arr.length-1?{marginBottom:15}:{}]}>
                                {"스탬프 "+ el.conditionCount + "개 모으면 " + el.reward}
                            </Text>)
                    })}
                <Text style={{color:"#615F5F",fontSize:11,marginTop:9,marginBottom:15}}>
                    
                </Text>
            </View>
            
        </View>

        <View style={{flexWrap:"wrap",flexDirection:"row",justifyContent:"space-between"}}>
            {[...Array(maxNum)].map((el,i) =>
            { 
                return (
                    
            <View>
            <View style={[indStampNum> maxNum-i-1? {width:60,height:60,borderColor:"#615F5F",
            borderWidth:1,borderRadius:100,marginRight:14,marginLeft:14,
            justifyContent:"center",marginBottom:18,backgroundColor:"#FFD63A"}:{width:60,height:60,borderColor:"#615F5F",
            borderWidth:1,borderRadius:100,marginRight:14,marginLeft:14,
            justifyContent:"center",marginBottom:18}, Item.filter((e) => { 
                if((maxNum-i === e.conditionCount) && (indStampNum>=e.conditionCount) ) 
                {
                    return e.conditionCount
                }}).length >0 ?{backgroundColor:"white"}:{}
            ]}>
            {Item.filter((e) => { 
            if((maxNum-i === e.conditionCount) && (indStampNum>=e.conditionCount) ) 
            {
                return e.conditionCount
            }}).length >0 ? <Available onPress={() => {toggleModal()
            setUseNum(maxNum-i)}} style={{marginLeft:-3}} width={65}height={65}/>
            :
                <Text style={ [{textAlign:"center",fontSize:28,fontWeight:"bold",color:"#615F5F"},
                    indStampNum>maxNum-i-1?{color:"white"}:{},Item.map((e,i) => e.conditionCount).indexOf(maxNum-i)>=0?{fontSize:14} :{}]}>

                        {Item.map((e,i) => e.conditionCount).indexOf(maxNum-i)>=0? "사용\n가능":maxNum-i}
                </Text>
                }
            </View>
            {StoreData[maxNum-i-1]?<View style={{margin:"auto",position:"absolute",bottom:3,justifyContent:"center",width:"100%"}}>
                <Text style={{fontSize:12,color:"#979292",textAlign:"center",justifyContent:"center"}}>
                    {moment(StoreData[maxNum-i-1].createdAt).format("MM.DD")}
                </Text>
            </View>:undefined}
            </View>
                )
            } )}
        </View>

  <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:15,color:"black",textAlign:"center"}}>
                {storeData.storeName}
            </Text>
            <Text style={{fontSize:15,color:"#615F5F",textAlign:"center",marginTop:9}}>
                {storeData.useCondition}
            </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>
  </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={JSON.stringify({url:`http://${SERVER}/stamps/use`,StoreId:`${storeData.StoreId}`,StampId:`${Item.id}`,UserId:`${user.id}`,count:`${useNum}`})}/>
            </View>
        </View>
    </View>
  </Modal>
                </View>
                        
                    </View>

            
        </View>
    )
}

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