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} 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:[]
    }
    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)
        this.setState({
            storeId:this.props.navigation.state.params.id,
            store_select:this.props.navigation.state.params.name
        })
        
        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 = () => {
        console.log(this.state.storeId)
        if(!this.state.image ) return alert("이미지를 등록해주세요.")
        if(!this.state.menuName) return alert("메뉴명을 입력해주세요")
        if(!this.state.menuSalePrice) 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)
                this.setState((prev) => ({
                    menuList: [
                        ...prev.menuList,
                        formData
                    ],
                    image:null,
                    menuName:"",
                    file:null,
                    menuSalePrice:"",
                    menuPrice:""
                }))
                alert("메뉴가 추가되었습니다. 수정 완료를 눌러주세요.")

            })
        }
        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)
            this.setState((prev) => ({
                menuList: [
                    ...prev.menuList,
                    formData
                ],
                image:null,
                menuName:"",
                file:null,
                menuSalePrice:"",
                menuPrice:""
            }))
            alert("메뉴가 추가되었습니다. 수정 완료를 눌러주세요.")
        
        }
    }
    onSubmit = () => {
        console.log(this.state.menuList[0])
        if(this.state.menuList.length ==0) return alert("메뉴를 먼저 추가해주세요.")
        all(this.state.menuList.map((e,i) => post(`http://${SERVER}/menu`,e,{ headers: 
        {
            'Accept': 'application/json',
            'Content-Type': 'multipart/form-data' } 
        }))).then(res=> {
            if(res[0].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 onPress={() => this.props.navigation.replace("Add_Store")}>
                        <Text style={{color:"#BDBCBC",fontSize:16,marginLeft:16}}>
                            스토어 등록
                        </Text>
                        </TouchableOpacity>
                        <TouchableOpacity>
                        <Text style={{color:"#BDBCBC",fontSize:16,marginLeft:16}}>
                            쿠폰발행
                        </Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => this.props.navigation.replace("Add_Stamp")}>
                        <Text style={{color:"#BDBCBC",fontSize:16,marginLeft:16}}>
                            스탬프 발행
                        </Text>
                        </TouchableOpacity>
                        <TouchableOpacity  onPress={() => this.props.navigation.replace("Add_Menu")} >
                        <Text style={{color:"white",fontSize:16,marginLeft:16,borderBottomWidth:1,borderBottomColor:"white"}}>
                            메뉴 등록
                        </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',
    }
});