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 Fake_Marker from '../../assets/marker.svg'
import MapView, { Marker, Polyline } from "react-native-maps";
import {post,put} from 'axios'
import { SERVER } from '../../common/servername';
import AsyncStorage from '@react-native-community/async-storage';
import QRCode from 'react-native-qrcode-svg';
import ImagePicker from 'react-native-image-picker';
import MapApi from "react-native-daummap";
const options = {
    mediaType: 'photo',
    storageOptions: {
        skipBackup:true
    },
    includeBase64:true
  };
export default class AddTab extends Component {
    static navigationOptions = {
        
        headerShown: false
        
    }
    state = {
        current:1,
        select:"업종",
        isModalVisible:false,
        isModalVisible_info:false,
        isModalVisible_status:false,
        position:"현재위치",
        location:null,
        errorMsg:null,
        name:"",
        category:"",
        phone_number:"",
        address:"",
        address_detail:"",
        wifi_name:"",
        wifi_pw:"",
        wifi_type:"",
        post:"",
        profile:"",
        item:"",
        intro:"",
        franchise:false,
        can_deliver:false,
        business_hours:"",
        closed:"",
        status:"",
        QRcode_url:"",
        first_order:false,
        user:{},
        latitude:0,
        longitude:0,
        current_location:"",
        dropdownVisible:false,
        dropdownVisible_:false,
        select_position:"현재 위치",
        distance:"",
        checkbox1:false,
        checkbox2:false,
        checkbox3:false,
        checkbox4:false,
        checkbox5:false,
        checkbox6:false,
        checkbox7:false,
        checkbox8:false,
        checkbox9:false,
        checkbox10:false,
        ischecked:false,
        status:"",
        StoreId:0,
        image:null,
        file:null,
        intro_images:[],
        intro_files:[],
    }
    constructor(props) {
        super(props)
    }
    onSave = () => {
        var temp = {
            select:this.state.select,
            name:this.state.name,
            category:this.state.category,
            phone_number:this.state.phone_number,
            address:this.state.address,
            address_detail:this.state.address_detail,
            wifi_name:this.state.wifi_name,
            wifi_pw:this.state.wifi_pw,
            wifi_type:this.state.wifi_type,
            post:this.state.post,
            profile:this.state.profile,
            item:this.state.item,
            intro:this.state.intro,
            franchise:this.state.franchise,
            can_deliver:this.state.can_deliver,
            business_hours:this.state.business_hours,
            closed:this.state.closed,
            status:this.state.status,
            QRcode_url:this.state.QRcode_url,
            first_order:this.state.first_order,
            latitude:this.state.latitude,
            longitude:this.state.longitude,
            select_position:this.state.select_position,
            image:this.state.image,
            file:this.state.file,
            intro_images:this.state.intro_images,
            intro_files:this.state.intro_files,
        }
        AsyncStorage.setItem("Add_Store",JSON.stringify(temp))
        alert("저장이 완료되었습니다.")
    }
    componentDidMount() {
        (async () => {
            AsyncStorage.getItem("distance",(err,res) => {
                this.setState({
                    distance:JSON.parse(res).distance
                })
            })
            AsyncStorage.getItem("Add_Store",async (err,res) => {
                let location = await Location.getCurrentPositionAsync({});
                if(res) {
                    this.setState({
                            select:JSON.parse(res).select,
                            name:JSON.parse(res).name,
                            category:JSON.parse(res).category,
                            phone_number:JSON.parse(res).phone_number,
                            address:JSON.parse(res).address,
                            address_detail:JSON.parse(res).address_detail,
                            wifi_name:JSON.parse(res).wifi_name,
                            wifi_pw:JSON.parse(res).wifi_pw,
                            wifi_type:JSON.parse(res).wifi_type,
                            post:JSON.parse(res).post,
                            profile:JSON.parse(res).profile,
                            item:JSON.parse(res).item,
                            intro:JSON.parse(res).intro,
                            franchise:JSON.parse(res).franchise,
                            can_deliver:JSON.parse(res).can_deliver,
                            business_hours:JSON.parse(res).business_hours,
                            closed:JSON.parse(res).closed,
                            status:JSON.parse(res).status,
                            QRcode_url:JSON.parse(res).QRcode_url,
                            first_order:JSON.parse(res).first_order,
                            longitude:parseFloat (JSON.parse(res).longitude),
                            latitude:parseFloat(JSON.parse(res).latitude),
                            select_position:JSON.parse(res).select_position,
                            image:JSON.parse(res).image,
                            file:JSON.parse(res).file,
                            intro_images:JSON.parse(res).intro_images?JSON.parse(res).intro_images:[],
                            intro_files:JSON.parse(res).intro_files?JSON.parse(res).intro_files:[],
                    },() => {
                        console.log(this.state.longitude)
                        console.log(this.state.latitude)
                    })
                }
                else {
                    this.setState({
                        location,
                        latitude:location.coords.latitude,
                        longitude:location.coords.longitude
                    },() => {
                    })
                }
            })

        AsyncStorage.getItem('user',(err,res) => {
            if(!res) return
            this.setState({
                user:JSON.parse(res)
            })
        })
    })();

    }
    onComplete = () => {
        const {name, category, phone_number,address,address_detail,latitude,longitude,wifi_name,wifi_pw,wifi_type,profile,item,intro, franchise,can_deliver,business_hours,closed,status,QRcode_url} = this.state
        if(!name) return alert("스토어명을 입력해주세요.")
        if(!phone_number) return alert("전화번호를 입력해주세요.")
        if(!address) return alert("주소를 선택해주세요.")
        if(!address_detail) return alert("상세주소를 입력해주세요.")
        if(!item) return alert("취급품목을 입력해주세요.")
        if(!intro) return alert("소개글을 입력해주세요.")
        this.setState({
            isModalVisible_info:true
        })
        post(`http://${SERVER}/stores/`,{latitude:this.state.latitude,longitude:this.state.longitude,
        UserId:this.state.user.id,
        name,
         category:this.state.select,
          phone_number,
          address:address+" " + address_detail,wifi_name,wifi_pw,wifi_type,post:this.state.post,profile,item,intro, franchise,can_deliver,business_hours,closed,status,QRcode_url}).then(res => {
            this.setState({
                StoreId:res.data.data.id
            })
            if(res.data.success) {
                AsyncStorage.setItem("Add_Store","")
            }
        })
    }
    onSubmit = () => {
        const {name, category, phone_number,address,address_detail,latitude,longitude,wifi_name,wifi_pw,wifi_type,profile,item,intro, franchise,can_deliver,business_hours,closed,QRcode_url} = this.state
        if(!this.state.ischecked) return alert("상태를 입력해주세요.")
        var status = ""
        if(this.state.checkbox1) status="표시 안함"
        if(this.state.checkbox2) status="금일 휴업"
        if(this.state.checkbox3) status="영업 준비중"
        if(this.state.checkbox4) status="영업중"
        if(this.state.checkbox5) status="OPEN"
        if(this.state.checkbox6) status="CLOSED"
        if(this.state.checkbox7) status="영업중 (대기 고객 많음)"
        if(this.state.checkbox8) status="영업중 (대기 고객 없음)"
        if(this.state.checkbox9) status="예약 문의"
        if(this.state.checkbox10) status=this.state.status

        AsyncStorage.getItem('token',(err,res) => {
            if(res)
            put(`http://${SERVER}/stores/status/${this.state.StoreId}`,{status},{
                headers: {'Authorization': JSON.parse(res)}
                 }).then(res => {
                     if(res.data.success) {
                         alert("스토어 생성에 성공하였습니다.")
                         this.props.navigation.goBack(null)
                     }
            },(err) => {
                console.log(err)
            })
        })
    }
    getCurrentPosition = () => {
        MapApi.getCoordToAddress(this.state.latitude,this.state.longitude).then(res => {
            if(res.documents[0].road_address) {
                var temp = res.documents[0].road_address.address_name + " (" + res.documents[0].address.region_3depth_name + " " +res.documents[0].address.main_address_no 
                res.documents[0].address.sub_address_no? temp+=("-" +res.documents[0].address.sub_address_no):undefined
                temp+=")"
            }
            else {
                var temp = res.documents[0].address.address_name
            }
            this.setState({
                current:temp,
                address:res.documents[0].address.address_name,
                road_address:res.documents[0].road_address? res.documents[0].road_address.address_name:""
            })
        })
    }
    searchAddress = (e) => {
        if(e.nativeEvent.target) {
            MapApi.serachAddress(this.state.address).then(res => {
                this.setState({
                    longitude:parseFloat(res.documents[0].x),
                    latitude:parseFloat(res.documents[0].y),
                    address:res.documents[0].address.address_name
                })
            })
        }
    }
    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,
              //});
            }
          });
    }
    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(prev=> ({
                  intro_images:[
                      ...prev.intro_images,
                      response.uri
                  ],
                  intro_files: [
                      ...prev.intro_files,
                      response
                  ]
              }))
              // You can also display the image using data:
              // const source = { uri: 'data:image/jpeg;base64,' + response.data };
            
              //this.setState({
                //avatarSource: source,
              //});
            }
          });
    }
    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,borderBottomWidth:1,borderBottomColor:"white"}}>
                            스토어 등록
                        </Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => this.props.navigation.replace("Add_Coupon")}>
                        <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:"#BDBCBC",fontSize:16,marginLeft:16}}>
                            메뉴 등록
                        </Text>
                        </TouchableOpacity>
                    </View>
                </View>
                <ScrollView style={{paddingLeft:16,paddingRight:16,paddingTop:16}}>
                    <TextInput value={this.state.name} onChangeText={e => this.setState({name:e})} style={{width:"100%",borderColor:"#615F5F",borderWidth:1,width:"100%",paddingTop:10.5,paddingBottom:9.5,paddingLeft:8,marginBottom:8}} placeholder="스토어명 *"/>
                    <View>
                    <TouchableOpacity  onPress={() => this.setState({dropdownVisible:true})} style={{marginBottom:8,width:"100%",borderColor:"#615F5F",borderWidth:1,paddingTop:12,paddingBottom:11}}>
                        <Text style={{fontSize:14,fontWeight:"bold",color:"#615F5F",paddingLeft:8}}>
                            {this.state.select}
                        </Text>
                    </TouchableOpacity>
                    
                    {this.state.dropdownVisible? 
                        
                        <View style={{width:"100%",position:"absolute",backgroundColor:"white",zIndex:10}}>
                            <View>
                            <View onPress={() => this.setState({dropdownVisible:false,select:"파리바게트 건대점1"})} 
                            style={{position:"relative",width:"100%",backgroundColor:"white",paddingLeft:16,paddingTop:11,paddingBottom:9,backgroundColor:"white",borderColor:"#FFD63A",borderWidth:1,borderBottomWidth:0,borderTopWidth:1}}>
                                <Text style={{fontSize:14,fontWeight:"bold",color:"#615F5F"}}>
                                    업종
                                </Text>
                            </View>
                            <TouchableOpacity onPress={() => this.setState({dropdownVisible:false,select:"음식  ·  외식  ·  배달"})} 
                            style={{position:"relative",width:"100%",backgroundColor:"white",paddingLeft:16,paddingTop:11,paddingBottom:9,backgroundColor:"white",borderColor:"#FFD63A",borderWidth:1,borderBottomWidth:0,borderTopWidth:0}}>
                                <Text style={{fontSize:14,fontWeight:"bold",color:"#615F5F"}}>
                                음식  ·  외식  ·  배달
                                </Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => this.setState({dropdownVisible:false,select:"호프  ·  주점  ·  포차"})} 
                            style={{width:"100%",backgroundColor:"white",paddingLeft:16,paddingTop:11,paddingBottom:9,backgroundColor:"white",borderColor:"#FFD63A",borderWidth:1,borderTopWidth:0,borderBottomWidth:0,borderTopWidth:0}}>
                                <Text style={{fontSize:14,fontWeight:"bold",color:"#615F5F"}}>
                                호프  ·  주점  ·  포차
                                </Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => this.setState({dropdownVisible:false,select:"편의점  ·  마트  ·  소매점"})} 
                            style={{width:"100%",backgroundColor:"white",paddingLeft:16,paddingTop:11,paddingBottom:9,backgroundColor:"white",borderColor:"#FFD63A",borderWidth:1,borderTopWidth:0,borderBottomWidth:0,borderTopWidth:0}}>
                                <Text style={{fontSize:14,fontWeight:"bold",color:"#615F5F"}}>
                                편의점  ·  마트  ·  소매점
                                </Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => this.setState({dropdownVisible:false,select:"PC방  ·  당구  ·  오락  ·  레저"})} 
                            style={{width:"100%",backgroundColor:"white",paddingLeft:16,paddingTop:11,paddingBottom:9,backgroundColor:"white",borderColor:"#FFD63A",borderWidth:1,borderTopWidth:0,borderBottomWidth:0,borderTopWidth:0}}>
                                <Text style={{fontSize:14,fontWeight:"bold",color:"#615F5F"}}>
                                PC방  ·  당구  ·  오락  ·  레저
                                </Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => this.setState({dropdownVisible:false,select:"미용  ·  뷰티  ·  네일"})} 
                            style={{width:"100%",backgroundColor:"white",paddingLeft:16,paddingTop:11,paddingBottom:9,backgroundColor:"white",borderColor:"#FFD63A",borderWidth:1,borderTopWidth:0,borderBottomWidth:0,borderTopWidth:0}}>
                                <Text style={{fontSize:14,fontWeight:"bold",color:"#615F5F"}}>
                                미용  ·  뷰티  ·  네일
                                </Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => this.setState({dropdownVisible:false,select:"숙박업  ·  펜션  ·  모텔"})} 
                            style={{width:"100%",backgroundColor:"white",paddingLeft:16,paddingTop:11,paddingBottom:9,backgroundColor:"white",borderColor:"#FFD63A",borderWidth:1,borderTopWidth:0,borderBottomWidth:0,borderTopWidth:0}}>
                                <Text style={{fontSize:14,fontWeight:"bold",color:"#615F5F"}}>
                                숙박업  ·  펜션  ·  모텔
                                </Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => this.setState({dropdownVisible:false,select:"전문서비스  ·  기술창업"})} 
                            style={{width:"100%",backgroundColor:"white",paddingLeft:16,paddingTop:11,paddingBottom:9,backgroundColor:"white",borderColor:"#FFD63A",borderWidth:1,borderTopWidth:0,borderBottomWidth:0,borderTopWidth:0}}>
                                <Text style={{fontSize:14,fontWeight:"bold",color:"#615F5F"}}>
                                전문서비스  ·  기술창업
                                </Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => this.setState({dropdownVisible:false,select:"노점  ·  푸드트럭"})} 
                            style={{width:"100%",backgroundColor:"white",paddingLeft:16,paddingTop:11,paddingBottom:9,backgroundColor:"white",borderColor:"#FFD63A",borderWidth:1,borderTopWidth:0,borderBottomWidth:0,borderTopWidth:0}}>
                                <Text style={{fontSize:14,fontWeight:"bold",color:"#615F5F"}}>
                                노점  ·  푸드트럭
                                </Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => this.setState({dropdownVisible:false,select:"애견샵  ·  반려동물"})} 
                            style={{width:"100%",backgroundColor:"white",paddingLeft:16,paddingTop:11,paddingBottom:9,backgroundColor:"white",borderColor:"#FFD63A",borderWidth:1,borderTopWidth:0,borderBottomWidth:0,borderTopWidth:0}}>
                                <Text style={{fontSize:14,fontWeight:"bold",color:"#615F5F"}}>
                                애견샵  ·  반려동물
                                </Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => this.setState({dropdownVisible:false,select:"스터디  ·  학원  ·  교육"})} 
                            style={{width:"100%",backgroundColor:"white",paddingLeft:16,paddingTop:11,paddingBottom:9,backgroundColor:"white",borderColor:"#FFD63A",borderWidth:1,borderTopWidth:0,borderBottomWidth:0,borderTopWidth:0}}>
                                <Text style={{fontSize:14,fontWeight:"bold",color:"#615F5F"}}>
                                스터디  ·  학원  ·  교육
                                </Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => this.setState({dropdownVisible:false,select:"병의원  ·  약국",borderBottomWidth:0,borderTopWidth:0})} 
                            style={{width:"100%",backgroundColor:"white",paddingLeft:16,paddingTop:11,paddingBottom:9,backgroundColor:"white",borderColor:"#FFD63A",borderWidth:1,borderTopWidth:0,borderBottomWidth:0,borderTopWidth:0}}>
                                <Text style={{fontSize:14,fontWeight:"bold",color:"#615F5F"}}>
                                병의원  ·  약국
                                </Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => this.setState({dropdownVisible:false,select:"학교  ·  관공서  ·  기타"})} 
                            style={{width:"100%",backgroundColor:"white",paddingLeft:16,paddingTop:11,paddingBottom:9,backgroundColor:"white",borderColor:"#FFD63A",borderWidth:1,borderTopWidth:0}}>
                                <Text style={{fontSize:14,fontWeight:"bold",color:"#615F5F"}}>
                                학교  ·  관공서  ·  기타
                                </Text>
                            </TouchableOpacity>
                            </View>
                        </View>:undefined}
                    </View>
                    <TextInput value={this.state.phone_number} onChangeText={e => this.setState({phone_number:e})}  style={{width:"100%",borderColor:"#615F5F",borderWidth:1,width:"100%",paddingTop:10.5,paddingBottom:9.5,paddingLeft:8,marginBottom:8}} 
                    placeholder="전화번호 *"/>

                    <View style={{flexDirection:"row",justifyContent:"space-between"}}>
                        <TouchableOpacity onPress={() => this.setState({dropdownVisible_:true})} style={{marginRight:5,marginBottom:8,width:"25%",borderColor:"#615F5F",borderWidth:1,paddingTop:12,paddingBottom:11}}>
                            <Text style={{fontSize:14,fontWeight:"bold",color:"#615F5F",paddingLeft:8}}>
                                {this.state.select_position}
                            </Text>
                        </TouchableOpacity>
                        {this.state.select_position=="현재 위치"?
                        <View onSubmitEditing={(e) => this.searchAddress(e)} returnKeyType="done" onKeyPress={e => this.searchAddress(e)} value={this.state.address} onChangeText={e => this.setState({address:e})}  
                        style={{width:"73%",borderColor:"#615F5F",borderWidth:1,paddingTop:10.5,paddingBottom:9.5,paddingLeft:8,marginBottom:8}} 
                        placeholder="주소 입력 *"> 
                            <Text>
                                {this.state.address}
                            </Text> 
                        </View> :
                        <TextInput onSubmitEditing={(e) => this.searchAddress(e)} returnKeyType="done" onKeyPress={e => this.searchAddress(e)} value={this.state.address} onChangeText={e => this.setState({address:e})}  
                        style={{width:"73%",borderColor:"#615F5F",borderWidth:1,paddingTop:10.5,paddingBottom:9.5,paddingLeft:8,marginBottom:8}} 
                        placeholder="주소 입력 *"/>}

                        
                    {this.state.dropdownVisible_? 
                        
                        <View style={{width:"25%",position:"absolute",backgroundColor:"white",zIndex:10}}>
                            <View>
                            <TouchableOpacity onPress={() => this.setState({dropdownVisible_:false,select_position:"현재 위치"})} 
                            style={{position:"relative",width:"100%",backgroundColor:"white",paddingLeft:16,paddingTop:11,paddingBottom:9,backgroundColor:"white",borderColor:"#FFD63A",borderWidth:1,borderBottomWidth:0,borderTopWidth:1}}>
                                <Text style={{fontSize:14,fontWeight:"bold",color:"#615F5F"}}>
                                    현재 위치                                    
                                </Text>
                            </TouchableOpacity>
                            <TouchableOpacity  onPress={() => this.setState({dropdownVisible_:false,select_position:"지정 위치",address:""})}
                            style={{position:"relative",width:"100%",backgroundColor:"white",paddingLeft:16,paddingTop:11,paddingBottom:9,backgroundColor:"white",borderColor:"#FFD63A",borderWidth:1,borderBottomWidth:1,borderTopWidth:0}}>
                                <Text style={{fontSize:14,fontWeight:"bold",color:"#615F5F"}}>
                                    지정 위치
                                </Text>
                            </TouchableOpacity>
                            </View>
                        </View>:undefined}
                    </View>

                    <View style={{width:"100%",height:Dimensions.get('screen').width-32,marginBottom:7}}>
                {this.state.location || this.state.latitude?
                <MapView 
                initialRegion={{ 
                    latitude: this.state.latitude, 
                    longitude: this.state.longitude, 
                    latitudeDelta: 0.005, 
                    longitudeDelta: 0.001, 
                }}
                minZoom= {20}
                tracksViewChanges={true}
                onRegionChange={(region) => {
                    this.setState({
                        latitude:region.latitude,
                        longitude:region.longitude
                    })
                }}
                onRegionChangeComplete={() => {
                    this.getCurrentPosition()
                }}
                showsUserLocation={true}
                 style={{width:"100%",height:"100%"}} >
                 <Marker style={{display:"none"}} coordinate={{
                    latitude: this.state.latitude, 
                    longitude: this.state.longitude}} 
                    title="내 위치"
                    description={this.state.current_location}
                    tracksViewChanges={true}>
                    
                        <Fake_Marker/>
                        <MapView.Callout
                        
                        style={{alignItems:"center",width:260}}>
                            <View style={{width:"100%"}}>
                                <Text style={{fontWeight:"bold"}}>
                                    상가 위치
                                </Text>    
                                <Text>
                                    {`${this.state.address}`}
                                </Text>    
                            </View>    
                        </MapView.Callout>
                        
                    </Marker>

                 </MapView>:<MapView></MapView>}
                 </View>
                 <View>
                     <Text style={{color:"#615F5F",fontWeight:"bold",fontSize:12,marginBottom:9}}>
                         스토어 주소 : {this.state.address + " " + this.state.address_detail}
                     </Text>
                     
                    <TextInput value={this.state.address_detail} onChangeText ={e => this.setState({address_detail:e})} style={{width:"100%",borderColor:"#615F5F",borderWidth:1,width:"100%",paddingTop:10.5,paddingBottom:9.5,paddingLeft:8,marginBottom:8}} 
                    placeholder="상세주소 입력 *"/>
                    <View style={{paddingTop:16,borderColor:"#615F5F",borderWidth:1,minHeight:250,marginBottom:8}}>
                        <Text style={{fontSize:14,paddingBottom:8,paddingLeft:8,fontWeight:'bold',color:"#BDBCBC"}}>
                            대표이미지 등록 *
                        </Text>
                        <TouchableOpacity onPress={() => this.ImagePick()} style={{justifyContent:"center"}}>
                            {this.state.image?<Image style={{width:"100%",height:Dimensions.get('screen').width/3*1.9}} resizeMode="stretch" source={{uri:this.state.image}} />:
                            <Text style={{fontSize:93,fontWeight:"bold",textAlign:"center"}}>
                                +
                            </Text>}
                        </TouchableOpacity>
                    </View>
                    <TextInput  value={this.state.item} onChangeText={e => this.setState({item:e})}  style={{width:"100%",borderColor:"#615F5F",borderWidth:1,width:"100%",paddingTop:10.5,paddingBottom:9.5,paddingLeft:8,marginBottom:8}} 
                    placeholder="취급 품목"/>
                    <View style={{position:"relative"}}>
                    <TextInput multiline={true} value={this.state.intro} onChangeText={e => this.setState({intro:e})}  style={{textAlignVertical:"top",borderColor:"#615F5F",borderWidth:1,borderBottomWidth:0,width:"100%",height:Dimensions.get('screen').width/2,paddingTop:10.5,paddingLeft:8}} 
                    placeholder="소개글 쓰기"/>
                    <View style={{borderWidth:1,borderColor:"#615F5F",borderTopWidth:0,marginBottom:8}}>
                    <TouchableOpacity  onPress={() => this.ImagePick_()}>
                        <Text style={{paddingLeft:10,paddingBottom:15,color:"#615F5F",fontWeight:"bold",fontSize:12}}>
                            + 사진 추가 & 동영상 추가
                        </Text>
                    </TouchableOpacity>
                    </View>
                    </View>
                    <View style={{flexWrap:"wrap",flexDirection:"row",marginBottom:9}}>
                    {this.state.intro_images.map((e,i) => {
                        return (
                            <Image resizeMode="stretch" style={{paddingRight:5,width:Dimensions.get('screen').width*0.28,height:Dimensions.get('screen').width*0.28}} source={{uri:e}}/>
                        )
                    })}
                    </View>
                 </View>
                 
                </ScrollView>
                
            <View style={{display:"flex",flexDirection:"row",bottom:0}}>
                <TouchableOpacity onPress={() => this.onSave()} style={{flex:1,backgroundColor:"#f4cd37",padding:10}}>
                    <Text style={{textAlign:"center",fontSize:18,color:"white"}}>
                        저장
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => this.onComplete()} style={{flex:1,padding:10,backgroundColor:"white"}}>
                    <Text style={{textAlign:"center",fontSize:18}}>
                        스토어등록
                    </Text>
                </TouchableOpacity>
            </View>
      <Modal onBackButtonPress={() => this.setState({isModalVisible_info:false})} onBackdropPress={() => this.setState({isModalVisible_info:false})} isVisible={this.state.isModalVisible_info}>
        <View>
                <View style={{ width:"90%",backgroundColor:"white",alignSelf:"center",paddingLeft:24,paddingTop:24,paddingBottom:24,paddingRight:24,justifyContent:"center"}}>
                    <Text style={{fontSize:27,color:"#615F5F",fontWeight:"bold",marginBottom:18}}>
                    이 스토어는
                    반경 {this.state.distance>=1000? this.state.distance/1000 + "k":this.state.distance}m 이내
                    최대 13,466명에게
                    노출됩니다.
                    </Text>
                <View>
                    <Text style={{fontSize:17,fontWeight:"bold",color:"#615F5F"}}>
                    {this.state.name}가
                    정상 등록되었습니다.
                    </Text>
                </View>
                <TouchableOpacity onPress={() => this.setState({isModalVisible_info:false,isModalVisible:true})} style={{paddingTop:8,marginTop:13,paddingBottom:8,borderColor:"#FFD63A",borderWidth:5,marginLeft:13,marginRight:13}}>
                    <Text style={{textAlign:"center"}}>
                        스토어용 QR코드 다운로드
                    </Text>
                </TouchableOpacity>
                </View>
                <View style={{flexDirection:"row",alignSelf:"center"}}>
                    <TouchableOpacity onPress={() => {
                        this.setState({isModalVisible_info:false,isModalVisible_status:true})
                        
                        }} style={{width:"45%",paddingTop:21,paddingBottom:19,backgroundColor:"#FFD63A"}}>
                        <Text style={{textAlign:"center",color:"black",fontSize:12,fontWeight:"bold"}}>
                            확인
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.setState({isModalVisible_info:false})} style={{width:"45%",paddingTop:21,paddingBottom:19,backgroundColor:"white"}}>
                        <Text style={{textAlign:"center",color:"#615F5F",fontSize:12,fontWeight:"bold"}}>
                            취소
                        </Text>
                    </TouchableOpacity>
                </View>
            </View>
      </Modal>
      <Modal onBackButtonPress={() => this.setState({isModalVisible:false})} onBackdropPress={() => this.setState({isModalVisible:false})} isVisible={this.state.isModalVisible}>
        <View>
                <View style={{ width:"90%",backgroundColor:"white",alignSelf:"center",paddingLeft:24,paddingTop:24,paddingBottom:24,paddingRight:24,justifyContent:"center"}}>
                    <Text style={{fontSize:21,textAlign:"center",color:"black",fontWeight:"bold",marginBottom:18}}>
                        {"파리바게트 건대점"+this.state.name}
                    </Text>
                <View>
                    <Text style={{fontSize:20,fontWeight:"300",textAlign:"center",color:"#615F5F"}}>
                    점포 확인용 QR코드
                    </Text>
                </View>
                <View style={{marginTop:16,borderColor:"#979292",borderWidth:5,paddingTop:22,paddingBottom:22,paddingLeft:27,paddingRight:27,justifyContent:"center"}}>
                    <View style={{alignSelf:"center"}}>
                    <QRCode size={Dimensions.get('screen').width*0.5}/>
                    </View>
                </View>
                <Text style={{marginTop:15.6,textAlign:"center",fontWeight:"100",color:"black",fontSize:15}}>
                {"고객이 쿠폰 / 스탬프 등을 제시하면\n사용 확인을 위하여\n이 QR코드(점포 확인용)를 스캔합니다."}
                </Text>
                </View>
                <View style={{flexDirection:"row",alignSelf:"center"}}>
                    <TouchableOpacity onPress={() => {
                        this.setState({isModalVisible:false,
                        isModalVisible_info:true})
                        
                        }} style={{width:"45%",paddingTop:21,paddingBottom:19,backgroundColor:"#FFD63A"}}>
                        <Text style={{textAlign:"center",color:"black",fontSize:12,fontWeight:"bold"}}>
                            다운로드
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.setState({isModalVisible:false})} style={{width:"45%",paddingTop:21,paddingBottom:19,backgroundColor:"white"}}>
                        <Text style={{textAlign:"center",color:"#615F5F",fontSize:12,fontWeight:"bold"}}>
                            공유하기
                        </Text>
                    </TouchableOpacity>
                </View>
            </View>
      </Modal>
      <Modal onBackButtonPress={() => this.setState({isModalVisible_status:false})} onBackdropPress={() => this.setState({isModalVisible_status:false})} isVisible={this.state.isModalVisible_status}>
        <View>
            
                <View style={{ width:"90%",backgroundColor:"white",alignSelf:"center",paddingLeft:24,paddingTop:24,paddingBottom:24,paddingRight:24,justifyContent:"center"}}>
                    <Text style={{textAlign:"center",fontSize:25,color:"#615F5F",fontWeight:"bold",marginBottom:27}}>
                        점포 상태 선택
                    </Text>
                    
                    <View style={{flexDirection:"row",marginBottom:16}}>
                        <CheckBox value={this.state.checkbox1} onChange={() => {this.setState(prev => ({
                            checkbox1:true,
                            checkbox2:false,
                            checkbox3:false,
                            checkbox4:false,
                            checkbox5:false,
                            checkbox6:false,
                            checkbox7:false,
                            checkbox8:false,
                            checkbox9:false,
                            checkbox10:false,
                            ischecked:true,
                        }))}} tintColors={{true:'#f4cd37'}} style={{marginTop:-5}}/>
                        <Text style={{paddingLeft:10,color:"#615F5F",fontSize:12,fontWeight:"bold"}}>표시 안함</Text>
                    </View>
                    <View style={{flexDirection:"row",marginBottom:16}}>
                        <CheckBox value={this.state.checkbox2} onChange={() => {this.setState(prev => ({
                            
                            checkbox1:false,
                            checkbox2:true,
                            checkbox3:false,
                            checkbox4:false,
                            checkbox5:false,
                            ischecked:true,
                            checkbox6:false,
                            checkbox7:false,
                            checkbox8:false,
                            checkbox9:false,
                            checkbox10:false,
                        }))}} tintColors={{true:'#f4cd37'}} style={{marginTop:-5}}/>
                        <Text style={{paddingLeft:10,color:"#615F5F",fontSize:12,fontWeight:"bold"}}>금일 휴업</Text>
                    </View>
                    <View style={{flexDirection:"row",marginBottom:16}}>
                        <CheckBox value={this.state.checkbox3} onChange={() => {this.setState(prev => ({
                            
                            checkbox1:false,
                            checkbox2:false,
                            checkbox3:true,
                            checkbox4:false,
                            ischecked:true,
                            checkbox5:false,
                            checkbox6:false,
                            checkbox7:false,
                            checkbox8:false,
                            checkbox9:false,
                            checkbox10:false,
                        }))}} tintColors={{true:'#f4cd37'}} style={{marginTop:-5}}/>
                        <Text style={{paddingLeft:10,color:"#615F5F",fontSize:12,fontWeight:"bold"}}>영업 준비중</Text>
                    </View>
                    <View style={{flexDirection:"row",marginBottom:16}}>
                        <CheckBox value={this.state.checkbox4} onChange={() => {this.setState(prev => ({
                            
                            checkbox1:false,
                            checkbox2:false,
                            checkbox3:false,
                            checkbox4:true,
                            checkbox5:false,
                            ischecked:true,
                            checkbox6:false,
                            checkbox7:false,
                            checkbox8:false,
                            checkbox9:false,
                            checkbox10:false,
                        }))}} tintColors={{true:'#f4cd37'}} style={{marginTop:-5}}/>
                        <Text style={{paddingLeft:10,color:"#615F5F",fontSize:12,fontWeight:"bold"}}>영업중</Text>
                    </View>
                    <View style={{flexDirection:"row",marginBottom:16}}>
                        <CheckBox value={this.state.checkbox5} onChange={() => {this.setState(prev => ({
                            
                            checkbox1:false,
                            checkbox2:false,
                            ischecked:true,
                            checkbox3:false,
                            checkbox4:false,
                            checkbox5:true,
                            checkbox6:false,
                            checkbox7:false,
                            checkbox8:false,
                            checkbox9:false,
                            checkbox10:false,
                        }))}} tintColors={{true:'#f4cd37'}} style={{marginTop:-5}}/>
                        <Text style={{paddingLeft:10,color:"#615F5F",fontSize:12,fontWeight:"bold"}}>OPEN</Text>
                    </View>
                    <View style={{flexDirection:"row",marginBottom:16}}>
                        <CheckBox value={this.state.checkbox6} onChange={() => {this.setState(prev => ({
                            
                            checkbox1:false,
                            checkbox2:false,
                            checkbox3:false,
                            checkbox4:false,
                            checkbox5:false,
                            ischecked:true,
                            checkbox6:true,
                            checkbox7:false,
                            checkbox8:false,
                            checkbox9:false,
                            checkbox10:false,
                        }))}} tintColors={{true:'#f4cd37'}} style={{marginTop:-5}}/>
                        <Text style={{paddingLeft:10,color:"#615F5F",fontSize:12,fontWeight:"bold"}}>CLOSED</Text>
                    </View>
                    <View style={{flexDirection:"row",marginBottom:16}}>
                        <CheckBox value={this.state.checkbox7} onChange={() => {this.setState(prev => ({
                            
                            checkbox1:false,
                            checkbox2:false,
                            checkbox3:false,
                            checkbox4:false,
                            ischecked:true,
                            checkbox5:false,
                            checkbox6:false,
                            checkbox7:true,
                            checkbox8:false,
                            checkbox9:false,
                            checkbox10:false,
                        }))}} tintColors={{true:'#f4cd37'}} style={{marginTop:-5}}/>
                        <Text style={{paddingLeft:10,color:"#615F5F",fontSize:12,fontWeight:"bold"}}>영업중 (대기 고객 많음)</Text>
                    </View>
                    <View style={{flexDirection:"row",marginBottom:16}}>
                        <CheckBox value={this.state.checkbox8} onChange={() => {this.setState(prev => ({
                            
                            checkbox1:false,
                            checkbox2:false,
                            checkbox3:false,
                            checkbox4:false,
                            checkbox5:false,
                            checkbox6:false,
                            checkbox7:false,
                            ischecked:true,
                            checkbox8:true,
                            checkbox9:false,
                            checkbox10:false,
                        }))}} tintColors={{true:'#f4cd37'}} style={{marginTop:-5}}/>
                        <Text style={{paddingLeft:10,color:"#615F5F",fontSize:12,fontWeight:"bold"}}>영엄중 (대기 고객 없음)</Text>
                    </View>
                    <View style={{flexDirection:"row",marginBottom:16}}>
                        <CheckBox value={this.state.checkbox9} onChange={() => {this.setState(prev => ({
                            
                            checkbox1:false,
                            checkbox2:false,
                            checkbox3:false,
                            checkbox4:false,
                            checkbox5:false,
                            checkbox6:false,
                            ischecked:true,
                            checkbox7:false,
                            checkbox8:false,
                            checkbox9:true,
                            checkbox10:false,
                        }))}} tintColors={{true:'#f4cd37'}} style={{marginTop:-5}}/>
                        <Text style={{paddingLeft:10,color:"#615F5F",fontSize:12,fontWeight:"bold"}}>예약 문의</Text>
                    </View>
                    <View style={{flexDirection:"row",marginBottom:16}}>
                        <CheckBox value={this.state.checkbox10} onChange={() => {this.setState(prev => ({
                            
                            checkbox1:false,
                            checkbox2:false,
                            checkbox3:false,
                            checkbox4:false,
                            checkbox5:false,
                            checkbox6:false,
                            ischecked:true,
                            checkbox7:false,
                            checkbox8:false,
                            checkbox9:false,
                            checkbox10:true,
                        }))}} tintColors={{true:'#f4cd37'}} style={{marginTop:-5}}/>
                        <Text style={{paddingLeft:10,color:"#615F5F",fontSize:12,fontWeight:"bold"}}>직접 입력</Text>
                    </View>
                    <TextInput onChangeText={(e) => this.setState({
                        status:e,
                        checkbox1:false,
                        checkbox2:false,
                        checkbox3:false,
                        checkbox4:false,
                            ischecked:true,
                            checkbox5:false,
                        checkbox6:false,
                        checkbox7:false,
                        checkbox8:false,
                        checkbox9:false,
                        checkbox10:true,

                    })} style={{borderColor:"#5F6161",borderWidth:1,paddingTop:9.5,paddingBottom:8.5,paddingLeft:16.5,paddingRight:16,fontSize:16,fontWeight:"bold"}} placeholder="ex) 알바급구"/>
                </View>
                <View style={{flexDirection:"row",alignSelf:"center"}}>
                    <TouchableOpacity onPress={() => {
                        this.setState({isModalVisible_info:false})
                        this.onSubmit()
                        }} style={{width:"90%",paddingTop:21,paddingBottom:19,backgroundColor:"#FFD63A"}}>
                        <Text style={{textAlign:"center",color:"black",fontSize:12,fontWeight:"bold"}}>
                            확인
                        </Text>
                    </TouchableOpacity>
                </View>
                
            </View>
      </Modal>
            </View>
        );
    }
}
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
});