import React, { Component } from 'react';
import {Image, View, Text, StyleSheet,ScrollView,TouchableOpacity,TextInput,Dimensions } from 'react-native';
import CouponeItem from '../CouponItem'
import StampItem from '../StampItem'
import Modal from 'react-native-modal'
import CheckBox from '@react-native-community/checkbox'
import * as Location from 'expo-location'
import Refresh from '../../assets/Refresh.svg'
import AsyncStorage from '@react-native-community/async-storage';
import { SERVER } from '../../common/servername';
import ImagePicker from 'react-native-image-picker';
import {get,post,all,put} from 'axios'
const options = {
    mediaType: 'photo',
    maxWidth: 550,
    storageOptions: {
        skipBackup:true
    },
    includeBase64:true
  };
export default class AddTab extends Component {
    static navigationOptions = {
        
        headerShown: false
        
    }
    state = {
        current:1,
        storeId:0,
        store_select:"",
        store:[],
        image:null,
        file:null,
        menuName:"",
        type:"default",
        menuPrice:"",
        menuSalePrice:"",
        menuList:[],
        item:{}
    }
    constructor(props) {
        super(props)
    }
    
    ImagePick = () => {
        ImagePicker.launchImageLibrary(options, (response) => {
        
            if (response.didCancel) {
              console.log('User cancelled image picker');
            } else if (response.error) {
              console.log('ImagePicker Error: ', response.error);
            } else if (response.customButton) {
              console.log('User tapped custom button: ', response.customButton);
            } else {
              const source = { uri: response.uri };
              this.setState({
                  image:response.uri,
                  file:response
              })
              // You can also display the image using data:
              // const source = { uri: 'data:image/jpeg;base64,' + response.data };
            
              //this.setState({
                //avatarSource: source,
              //});
            }
          });
    }
    componentDidMount() {
        if(!this.props.navigation.state.params) {
            alert("잘못된 접근입니다.")
            return this.props.navigation.goBack(null)
        }
        console.log(this.props.navigation.state.params.item)
        this.setState({
            storeId:this.props.navigation.state.params.id,
            store_select:this.props.navigation.state.params.name,
            menuName:this.props.navigation.state.params.item.menuName,
            menuSalePrice:this.props.navigation.state.params.item.menuSalePrice.toString(),
            menuPrice:this.props.navigation.state.params.item.menuPrice.toString(),
            item:this.props.navigation.state.params.item
        })
        AsyncStorage.getItem("user",(err,res) => {
            if(res) {
                get(`http://${SERVER}/stores/managerRead/${JSON.parse(res).id}`).then(res => {
                    if(res.data.success) {
                    this.setState({
                        store:res.data.data,
                    })
                    }
                })
            }
        })

    }
    AddMenu = () => {
    }
    onSubmit = () => {
        
        if(!this.state.menuName) return alert("메뉴명을 입력해주세요")
        if(!this.state.menuSalePrice) return alert("할인가를 입력해주세요")
        if(!this.state.image) return alert("이미지를 선택해주세요")        
        if(!this.state.menuPrice) return alert("정상가를 입력해주세요")
        const formData = new FormData()
        if(this.state.menuPrice > this.state.menuSalePrice) {
            this.setState({
                type:"sale"
            },() => {
                formData.append('image', {uri:this.state.file.uri,name:"jpeg",type:'image/jpeg'})
                formData.append('menuName',this.state.menuName)
                formData.append('menuSalePrice',this.state.menuSalePrice)
                formData.append('menuPrice',this.state.menuPrice)
                formData.append('StoreId',this.state.storeId)
                formData.append('type',this.state.type)

            })
        }
        else {
            formData.append('image', {uri:this.state.file.uri,name:"jpeg",type:'image/jpeg'})
            formData.append('menuName',this.state.menuName)
            formData.append('menuSalePrice',this.state.menuSalePrice)
            formData.append('menuPrice',this.state.menuPrice)
            formData.append('StoreId',this.state.storeId)
            formData.append('type',this.state.type)
        
        }
        put(`http://${SERVER}/menu/${this.state.item.id}`,formData).then(res => {
            console.log(res.data)
            if(res.data.success) {
                alert("메뉴가 수정되었습니다.")
                this.props.navigation.goBack(null)
            }
            else {
                alert("다시 시도해주세요.")
            }
        })
        
    }
    render() {
        return (
            <View style={{marginBottom:100,backgroundColor:"white",height:"100%",width:"100%"}}>
                <View style={{width:"100%",flexDirection:"row",paddingTop:16,paddingBottom:16,paddingLeft:16,backgroundColor:"#615F5F"}}>
                    <TouchableOpacity onPress={() => this.props.navigation.goBack(null)}>
                        <Image source={require('../../assets/back.png')}/>
                    </TouchableOpacity>
                    <View style={{flexDirection:"row",justifyContent:"space-between"}}>
                        <TouchableOpacity>
                        <Text style={{color:"white",fontSize:16,marginLeft:16}}>
                            메뉴 수정
                        </Text>
                        </TouchableOpacity>
                    </View>
                </View>
                <ScrollView style={{paddingLeft:16,paddingRight:16,paddingTop:16}}>
                    <Text style={{color:"#615F5F",fontSize:15,fontWeight:"bold",marginBottom:8}}>
                        스토어 (상점) 선택
                    </Text>
                    <View style={{ borderWidth:1,borderColor:"#615F5F",paddingTop:10,paddingBottom:9,marginBottom:17}}>
                        <Text style={{fontSize:15,color:"#615F5F",fontWeight:"bold",textAlign:"center"}}>
                            {this.state.store_select}
                        </Text>
                    </View>
                    
                    <View style={{flexDirection:"row",marginBottom:17}}>
                        <TextInput placeholder="메뉴명" value={this.state.menuName} onChangeText={e => this.setState({menuName:e})} 
                        style={{textAlign:"center",width:"100%",fontWeight:"bold",
                        borderColor:"#615F5F",borderWidth:1,
                        width:"100%",paddingTop:10.5,paddingBottom:9.5,
                        paddingLeft:8}} />
                    </View>
                    <TouchableOpacity onPress={() => this.ImagePick()} style={{paddingTop:10.4,paddingBottom:8.6,paddingLeft:20,paddingRight:20,alignSelf:"center",borderWidth:5,borderColor:"#FFD63A",marginBottom:18}}>
                        <Text style={{fontWeight:"bold",fontSize:15,textAlign:"center"}}>
                            + 사진
                        </Text>
                    </TouchableOpacity>
                    <Text style={{color:"#615F5F",fontSize:15,fontWeight:"bold",marginBottom:8}}>
                        할인가
                    </Text>
                    
                    <View style={{flexDirection:"row",marginBottom:17}}>
                        <Text style={{left:"60%",fontWeight:"bold",fontSize:15,color:"#615F5F",position:"absolute",alignSelf:"center"}}>
                            원
                        </Text>
                        <TextInput keyboardType="number-pad" placeholder="ex) 15000" value={this.state.menuSalePrice} onChangeText={e => this.setState({menuSalePrice:e})} 
                        style={{textAlign:"right",width:"100%",fontWeight:"bold",
                        borderColor:"#615F5F",borderWidth:1,
                        width:"100%",paddingTop:10.5,paddingBottom:9.5,
                        paddingLeft:8,paddingRight:"40%"}} />
                    </View>
                    <Text style={{color:"#615F5F",fontSize:15,fontWeight:"bold",marginBottom:8}}>
                        정상가
                    </Text>
                    
                    <View style={{flexDirection:"row",marginBottom:17}}>
                        <Text style={{left:"60%",fontWeight:"bold",fontSize:15,color:"#615F5F",position:"absolute",alignSelf:"center"}}>
                            원
                        </Text>
                        <TextInput keyboardType="number-pad" placeholder="ex) 15000" value={this.state.menuPrice} onChangeText={e => this.setState({menuPrice:e})} 
                        style={{textAlign:"right",width:"100%",fontWeight:"bold",
                        borderColor:"#615F5F",borderWidth:1,
                        width:"100%",paddingTop:10.5,paddingBottom:9.5,
                        paddingLeft:8,paddingRight:"40%"}} />
                    </View>
                {/*}    
                    <TouchableOpacity onPress={() => this.AddMenu()} style={{paddingTop:10.4,paddingBottom:8.6,paddingLeft:20,paddingRight:20,alignSelf:"center",borderWidth:5,borderColor:"#FFD63A",marginBottom:18}}>
                        <Text style={{fontWeight:"bold",fontSize:15,textAlign:"center"}}>
                            + 메뉴추가
                        </Text>
                    </TouchableOpacity>
        */}
                 
                </ScrollView>
                
                <TouchableOpacity onPress={() => this.onSubmit()} 
                style={{backgroundColor:"#f4cd37",paddingTop:21,paddingBottom:19}}>
                    <Text style={{textAlign:"center",fontSize:18,color:"black",fontWeight:"bold"}}>
                        수정 완료
                    </Text>
                </TouchableOpacity>
            
      <Modal onBackButtonPress={() => this.setState({isModalVisible:false})} onBackdropPress={() => this.setState({isModalVisible:false})} isVisible={this.state.isModalVisible}>
        <View style={{ width:"80%",backgroundColor:"white",alignSelf:"center"}}>
          <TouchableOpacity onPress={() => { 
              this.setState({isModalVisible:false})
              this.props.navigation.navigate("Store")}}>
          <Text style={{color:"#979292",fontSize:16,lineHeight:50,textAlign:"center",marginTop:10}}>스토어</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => { this.setState({isModalVisible:false}) 
          this.props.navigation.navigate("Coupon")}}>
          <Text style={{color:"#979292",fontSize:16,lineHeight:50,textAlign:"center"}}>쿠폰</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => { this.setState({isModalVisible:false})
          this.props.navigation.navigate("Stamp")}}>
          <Text style={{color:"#979292",fontSize:16,lineHeight:50,textAlign:"center"}}>스탬프</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => { this.setState({isModalVisible:false})
          this.props.navigation.navigate("Menu")}}>
          <Text style={{color:"#979292",fontSize:16,lineHeight:50,textAlign:"center"}}>메뉴</Text>
          </TouchableOpacity>
          <TouchableOpacity>
          <Text style={{color:"#979292",fontSize:16,lineHeight:50,textAlign:"center"}}>리뷰게시판</Text>
          </TouchableOpacity>
          <TouchableOpacity>
          <Text style={{color:"#979292",fontSize:16,lineHeight:50,textAlign:"center",marginBottom:10}}>알림발송</Text>
          </TouchableOpacity>
        </View>
      </Modal>
            </View>
        );
    }
}
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
});