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 {post} from 'axios'
import { SERVER } from '../../common/servername';
import DateTimePickerModal from "react-native-modal-datetime-picker";
import ImagePicker from 'react-native-image-picker';
import moment from 'moment'
const options = {
    mediaType: 'photo',
    maxWidth: 550,
    storageOptions: {
        skipBackup:true
    },
    includeBase64:true
  };
export default class AddTab extends Component {
    static navigationOptions = {
        
        headerShown: false
        
    }
    state = {
        current:1,
        select:"업종",
        isModalVisible:false,
        dropdownVisible:false,
        name:"테스트",
        type:"%할인 / 금액할인 / 무료 / 1+1 / 2+1",
        sale_price:"1000",
        use_time_min:"2020-05-05",
        use_time_max:"2020-09-11",
        use_condition:"조건",
        stock_count:"1000",
        option:true,
        is_present_possible:true,
        option_1:false,
        option_2:false,
        present_1:false,
        present_2:false,
        storeId:0,
        store_select:"",
        store:[],
        DatePicker:false,
        image:null,
        file:null,
    }
    constructor(props) {
        super(props)
    }
    componentDidMount() {
        if(!this.props.navigation.state.params) {
            alert("잘못된 접근입니다.")
            this.props.navigation.goBack(null)
        }
        this.setState({
            storeId:this.props.navigation.state.params.id,
            store_select:this.props.navigation.state.params.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,
              //});
            }
          });
    }
    onSubmit = () => {
        
        const {name,type,sale_price,use_time_max,use_time_min,use_condition,stock_count,option_1,option_2,present_1,present_2,is_present_possible} = this.state
        if(!name) return alert("쿠폰명을 입력해주세요.")
        if(!this.state.image) return alert("이미지를 선택해주세요.")
        if(type =="%할인 / 금액할인 / 무료 / 1+1 / 2+1" ) return alert("쿠폰 종류를 선택해주세요.")
        if((!sale_price&& type=="%할인") || (!sale_price&& type=="금액할인") ) return alert("할인 금액을 입력해주세요.")
        if(!use_time_min) return alert("시작일을 선택해주세요.")
        if(!use_time_max) return alert("종료일을 선택해주세요.")
        if(!use_condition) return alert("사용조건을 입력해주세요.")
        if(!stock_count) return alert("발행수량을 입력해주세요.")
        if(!option_1 && !option_2) return alert("발행 종류를 선택해주세요.")
        if(!present_1 && !present_2) return alert("발행 종류를 선택해주세요.")
        var formData = new FormData()
        formData.append("image",{uri:this.state.file.uri,name:"jpeg",type:'image/jpeg'})
        formData.append("name",name)
        formData.append("type",type)
        formData.append("sale_price",sale_price)
        formData.append("use_time_max",new Date(use_time_max).toUTCString())
        formData.append("use_time_min",new Date(use_time_min).toUTCString())
        formData.append("use_condition",use_condition)
        formData.append("stock_count",stock_count)
        formData.append("option",option_1?"public":"private")
        formData.append("is_present_possible",present_1?true:false)
        formData.append("StoreId",this.state.storeId)
        
        post(`http://${SERVER}/coupons`,formData,{ headers: 
        {
            'Accept': 'application/json',
            'Content-Type': 'multipart/form-data' } 
        }).then(res => {
            console.log(res.data)
            if(res.data.success) {
                alert("쿠폰 등록이 완료되었습니다.")
                this.props.navigation.goBack(null)
            }
        })
    }
    showDatePicker = () => {
        this.setState({
            DatePicker:true
        })
    };

    hideDatePicker = () => {
        this.setState({
            DatePicker:false
        })
    };

    handleConfirm = (date) => {
        this.setState({
            use_time_min:date
        })
        this.hideDatePicker();
    };
    
    showDatePicker_ = () => {
        this.setState({
            DatePicker_:true
        })
    };

    hideDatePicker_ = () => {
        this.setState({
            DatePicker_:false
        })
    };

    handleConfirm_ = (date) => {
        this.setState({
            use_time_max:date
        })
        this.hideDatePicker_();
    };
    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:"#BDBCBC",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>
                    <Text style={{color:"#615F5F",fontSize:15,fontWeight:"bold",marginBottom:8}}>
                        쿠폰명
                    </Text>
                    <TextInput value={this.state.name} onChangeText={e => this.setState({name:e})} 
                    style={{textAlign:"center",marginBottom:17,width:"100%",
                    borderColor:"#615F5F",borderWidth:1,
                    width:"100%",paddingTop:10.5,paddingBottom:9.5,
                    paddingLeft:8}} 
                    placeholder="개업기념 20% 할인 쿠폰"/>

                    <TouchableOpacity onPress={() => this.ImagePick()} style={{borderBottomColor:"#FFD63A",borderBottomWidth:1,alignSelf:"center",marginBottom:17}}>
                        <Text style={{color:"#FFD63A",fontSize:15,fontWeight:"bold",textAlign:"center"}}>
                            쿠폰 사진 등록
                        </Text>
                    </TouchableOpacity>
                    <Text style={{color:"#615F5F",fontSize:15,fontWeight:"bold",marginBottom:8}}>
                        쿠폰 종류
                    </Text>
                    <View>
                    <View>
                    <TouchableOpacity onPress={() => this.setState({dropdownVisible:true})} style={{ borderWidth:1,borderColor:"#615F5F",paddingTop:10,paddingBottom:9,marginBottom:8}}>
                        <Text style={{fontSize:15,color:"#615F5F",fontWeight:"bold",textAlign:"center"}}>
                            {this.state.type}
                        </Text>
                    </TouchableOpacity>
                    
                    {this.state.dropdownVisible? 
                        
                        <View style={{width:"100%",position:"absolute",backgroundColor:"transparent",zIndex:100}}>
                            <View>
                                        
                                    <TouchableOpacity onPress={() => {this.setState({type:"%할인",dropdownVisible:false,zIndex:100})}} 
                                        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",textAlign:"center"}}>
                                                %할인
                                            </Text>
                                        </TouchableOpacity>
                                        
                                    <TouchableOpacity onPress={() => {this.setState({type:"금액할인",dropdownVisible:false,zIndex:100})}} 
                                        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",textAlign:"center"}}>
                                                금액할인
                                            </Text>
                                        </TouchableOpacity>
                                        
                                    <TouchableOpacity onPress={() => {this.setState({type:"무료",dropdownVisible:false,zIndex:100})}} 
                                        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",textAlign:"center"}}>
                                                무료
                                            </Text>
                                        </TouchableOpacity>
                                        
                                    <TouchableOpacity onPress={() => {this.setState({type:"1+1",dropdownVisible:false,zIndex:100})}} 
                                        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",textAlign:"center"}}>
                                                1+1
                                            </Text>
                                        </TouchableOpacity>
                                        
                                    <TouchableOpacity onPress={() => {this.setState({type:"2+1",dropdownVisible:false,zIndex:100})}} 
                                        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",textAlign:"center"}}>
                                                2+1
                                            </Text>
                                        </TouchableOpacity>
                                    
                            </View>
                        </View>:undefined}
                    </View>
                    </View>
                    {this.state.type == "%할인"? 
                    <View style={{flexDirection:"row",marginBottom:17}}>
                        <TextInput value={this.state.sale_price} onChangeText={e => this.setState({sale_price:e})} 
                        style={{textAlign:"center",width:"100%",
                        borderColor:"#615F5F",borderWidth:1,
                        width:"50%",paddingTop:10.5,paddingBottom:9.5,
                        paddingLeft:8}} />
                        <Text style={{color:"#615F5F",fontSize:15,paddingLeft:16,fontWeight:"bold",alignSelf:"center"}}>% 할인</Text>
                    </View>:this.state.type=="금액할인"?
                    <View style={{flexDirection:"row",marginBottom:17}}>
                        <TextInput value={this.state.sale_price} onChangeText={e => this.setState({sale_price:e})} 
                        style={{textAlign:"center",width:"100%",
                        borderColor:"#615F5F",borderWidth:1,
                        width:"50%",paddingTop:10.5,paddingBottom:9.5,
                        paddingLeft:8}} />
                        <Text style={{color:"#615F5F",fontSize:15,paddingLeft:16,fontWeight:"bold",alignSelf:"center"}}>원 할인</Text>
                    </View>:this.state.type=="1+1"?undefined:this.state.type=="2+1"?undefined:this.state.type=="무료"?undefined:undefined}
                    
                    <Text style={{color:"#615F5F",fontSize:15,fontWeight:"bold",marginBottom:8}}>
                        사용 가능 시간
                    </Text>
                    <View style={{flexDirection:"row",width:"100%",marginBottom:17,justifyContent:"space-between"}}>
                        
                        <Text style={{alignSelf:"center",color:"#615F5F",fontSize:15,fontWeight:"bold",marginBottom:8}}>
                            시작일
                        </Text>
                        <TouchableOpacity onPress={() => this.showDatePicker()}>
                            <View value={this.state.use_time_min} onChangeText={e => this.setState({use_time_min:e})} 
                            style={{width:Dimensions.get('screen').width*0.3,
                            borderColor:"#615F5F",borderWidth:1,
                            height:35,
                            paddingLeft:8,paddingRight:10,paddingTop:3,paddingbottom:3}} >
                                <Text style={{textAlign:"center",color:"black",}}>
                                    {!this.state.use_time_min?this.state.use_time_min :moment( this.state.use_time_min).format("YYYY-MM-DD")}
                                </Text>
                            </View>
                        
                        </TouchableOpacity>
                        
                        <Text style={{alignSelf:"center",color:"#615F5F",fontSize:15,fontWeight:"bold",marginBottom:8}}>
                            종료일
                        </Text>
                        <TouchableOpacity onPress={() => this.showDatePicker()}>
                            <View value={this.state.use_time_max} onChangeText={e => this.setState({use_time_max:e})} 
                            style={{width:Dimensions.get('screen').width*0.3,
                            borderColor:"#615F5F",borderWidth:1,
                            height:35,
                            paddingLeft:8,paddingRight:10,paddingTop:3,paddingbottom:3}} >
                                <Text style={{textAlign:"center",color:"black",}}>
                                    {!this.state.use_time_max?this.state.use_time_max :moment( this.state.use_time_min).format("YYYY-MM-DD")}
                                </Text>
                            </View>
                        
                        </TouchableOpacity>
                        
                    </View>
                    <TextInput value={this.state.use_condition} 
                    onChangeText={e => this.setState({use_condition:e})}  
                    style={{borderColor:"#615F5F",borderWidth:1,width:"100%",height:100,textAlignVertical:"top",paddingTop:10.5,paddingBottom:9.5,paddingLeft:8,marginBottom:19}} 
                    placeholder="이용조건"/>
                    <View style={{flexDirection:"row",marginBottom:29}}>
                        
                        <Text style={{alignSelf:"center",color:"#615F5F",fontSize:15,fontWeight:"bold",marginBottom:8}}>
                            발행 수량
                        </Text>
                        
                        <TextInput value={this.state.stock_count} keyboardType="number-pad" onChangeText={e => this.setState({stock_count:e})} 
                        style={{textAlign:"left",paddingRight:35,fontSize:15,fontWeight:"bold",width:"100%",
                        borderColor:"#615F5F",borderWidth:1,
                        width:"50%",paddingTop:7,paddingBottom:6,marginLeft:"auto",
                        paddingLeft:8}} />
                        <Text style={{position:"absolute",right:16,alignSelf:"center",color:"#615F5F",fontSize:15,fontWeight:"bold"}}>
                        개
                        </Text>
                    </View>

                 <View>
                    <View style={{flexDirection:"row",width:"100%",width:"100%",marginBottom:35,justifyContent:"space-between"}} >
                    
                        <Text style={{alignSelf:"center",width:"30%",color:"#615F5F",fontSize:15,fontWeight:"bold",marginBottom:8}}>
                            발행 종류
                        </Text>
                        <View style={{flexDirection:"row",width:"30%"}}>
                        <CheckBox value={this.state.option_1} onChange={() => {
                            if(this.state.option_1 == false) {
                                this.setState({
                                    option_2:false,
                                    option_1:true
                                })
                            }
                            else {
                                this.setState({
                                    option_1:false,
                                    option_2:true,
                                })
                            }}} tintColors={{true:'#f4cd37'}}  style={{marginTop:-5}}/>
                        <Text style={{color:"#615F5F",fontWeight:"bold"}}>
                            공용
                        </Text>
                        </View>
                        <View style={{flexDirection:"row",width:"30%"}}>
                        <CheckBox value={this.state.option_2} onChange={() => {
                            if(this.state.option_2 == false) {
                                this.setState({
                                    option_2:true,
                                    option_1:false,
                                })
                            }
                            else {
                                this.setState({
                                    option_2:false,
                                    option_1:true
                                })
                            }}} tintColors={{true:'#f4cd37'}}  style={{marginTop:-5}}/>
                        <Text style={{color:"#615F5F",fontWeight:"bold"}}>
                            지정
                        </Text>
                        </View>
                    </View>
                    
                    <View style={{flexDirection:"row",width:"100%",width:"100%",justifyContent:"space-between",marginBottom:26}} >
                    
                        <Text style={{alignSelf:"center",width:"30%",color:"#615F5F",fontSize:15,fontWeight:"bold"}}>
                            선물 하기
                        </Text>
                        <View style={{flexDirection:"row",width:"30%"}}>
                        <CheckBox value={this.state.present_1} onChange={() => {
                            if(this.state.present_1 == false) {
                                this.setState({
                                    present_1:true,
                                    present_2:false,
                                })
                            }
                            else {
                                this.setState({
                                    present_1:false,
                                    present_2:true
                                })
                            }}} tintColors={{true:'#f4cd37'}}  style={{marginTop:-5}}/>
                        <Text style={{color:"#615F5F",fontWeight:"bold"}}>
                            가능
                        </Text>
                        </View>
                        <View style={{flexDirection:"row",width:"30%"}}>
                        <CheckBox value={this.state.present_2} onChange={() => {
                            if(this.state.present_2 == false) {
                                this.setState({
                                    present_2:true,
                                    present_1:false,
                                })
                            }
                            else {
                                this.setState({
                                    present_2:false,
                                    present_1:true
                                })
                            }}} tintColors={{true:'#f4cd37'}}  style={{marginTop:-5}}/>
                        <Text style={{color:"#615F5F",fontWeight:"bold"}}>
                            불가능
                        </Text>
                        </View>
                    </View>
                    <TouchableOpacity onPress={() => this.setState({
                        name:"",
                        type:"%할인 / 금액할인 / 무료 / 1+1 / 2+1",
                        sale_price:"",
                        use_time_min:"",
                        use_time_max:"",
                        use_condition:"",
                        stock_count:"",
                        option:true,
                        is_present_possible:true,
                        option_1:false,
                        option_2:false,
                        present_1:false,
                        present_2:false,
                        storeId:0,
                    })} style={{flexDirection:"row",width:"100%",justifyContent:"center",paddingBottom:91}} >
                        <Text style={{color:"#615F5F",alignSelf:"center",fontWeight:"bold",textAlign:"center"}}>
                            초기화
                        </Text>
                        <Refresh style={{marginLeft:9,alignSelf:"center"}}/>
                    </TouchableOpacity>
                    
                 </View>
                 
                </ScrollView>
                
                <TouchableOpacity onPress={() =>  this.onSubmit()} 
                style={{backgroundColor:"#f4cd37",paddingTop:21,paddingBottom:19}}>
                    <Text style={{textAlign:"center",fontSize:18,color:"black",fontWeight:"bold"}}>
                        쿠폰 발행
                    </Text>
                </TouchableOpacity>
            
                <DateTimePickerModal
                  isVisible={this.state.DatePicker}
                  mode="date"
                  onConfirm={this.handleConfirm}
                  onCancel={this.hideDatePicker}
                />
                <DateTimePickerModal
                  isVisible={this.state.DatePicker_}
                  mode="date"
                  onConfirm={this.handleConfirm_}
                  onCancel={this.hideDatePicker_}
                />
            </View>
        );
    }
}
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
});