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

import Position from '../assets/position.svg'
import Star from '../assets/star.svg'
import Heart from '../assets/heart.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 More from '../assets/more.svg'
import {SERVER} from '../common/servername'
export default ({ store,item,update, height, handleHeight,index,isModal,setItemNum }) => {
    const [isHidden,setIsHidden] = React.useState(2)
    const [tempHeight,setTempHeight] = React.useState(0)
    const [Item,setItem] = React.useState([])

    React.useEffect(() => {
        if(!item.name) {
            get(`http://${SERVER}/menu/${store.id}`).then(e => {
                setItem(e.data.data)
                setItemNum(e.data.data.length)
            })
        }
        else {
            setItem(item)
        }
    },[])
    React.useEffect(() => {
        if(!item.name) {
            get(`http://${SERVER}/menu/${store.id}`).then(e => {
                setItem(e.data.data)
                setItemNum(e.data.data.length)
            })
        }
        else {
            setItem(item)
        }
    },[update])
    React.useEffect(() => {
        if(index==3) {
            handleHeight(tempHeight)
        }
    },[index,tempHeight])
    return (
        <View  onLayout={(e) => setTempHeight(e.nativeEvent.layout.height)}  style={{backgroundColor:"white",paddingBottom:16}}>
            
        <View style={[{paddingTop:16,backgroundColor:"white"},isModal?{paddingTop:0}:{}]}>
            {isModal?undefined:<View style={{flexDirection:"row",paddingLeft:16}}>
                <Image style={{width:70,height:60,marginRight:10}} source={require("../assets/img.png")}/>
                <View>
                    <Text style={{fontSize:15,marginTop:3}}>
                        {store.name}
                    </Text>
                    <View>
                        <Text style={{fontSize:12,color:"#979292",marginTop:4.2}}>
                            {moment(Item.updatedAp).format("YYYY-HH-MM")}
                        </Text>
                    </View>
                </View>
                <Text style={{marginLeft:"auto",paddingRight:13,flexDirection:"row",color:"#979292",fontSize:12}}>
                    <Text>{store.category}</Text>
                </Text>
            </View>}
            <View style={[{flexWrap:"wrap",flexDirection:"row",marginTop:8,paddingLeft:16,paddingRight:16},isModal?{paddingLeft:0,paddingRight:0,marginTop:0}:{}]}>
            {Item.map((e,i) => {
                    return (
                   <View style={[{paddingTop:8.5,paddingBottom:8.5,width:"50%",borderColor:"#BDBCBC",borderWidth:1,borderBottomWidth:0.5,borderTopWidth:0.5}, i%2==0?{borderRightWidth:0.5}:{borderLeftWidth:0.5}]}>
                       <Image resizeMode="stretch" style={{alignSelf:"center",width:"100%",height:Dimensions.get('screen').width*0.3}} source={{uri:e.image}}/>
                       <Text style={{textAlign:"center",fontSize:11,color:"#615F5F"}}>
                           {e.menuName}
                       </Text>
                       <Text style={{textAlign:"center",fontSize:11,color:"#615F5F"}}>
                           {e.menuPrice}원
                       </Text>
                    </View> )}
                   )}
                <TouchableOpacity style={{width:"100%",backgroundColor:"white",paddingTop:12.5,paddingBottom:8.3,borderWidth:1,borderColor:"#BDBCBC"}}>
                    <More style={{alignSelf:"center"}}/>
                </TouchableOpacity>
            </View>
        </View>
        </View>
    )
}

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