import React, { Component } from 'react';
import { View, Text, StyleSheet,TouchableOpacity,Image } from 'react-native';
import Store_Post from '../Store_Post'
import Checkbox from '@react-native-community/checkbox'
import {get,post,put,delete as remove,all} from 'axios'
import AsyncStorage from '@react-native-community/async-storage';
import { SERVER } from '../../common/servername';
import { ScrollView } from 'react-native-gesture-handler';
export default class AddTab extends Component {
    static navigationOptions = {
        
        headerShown: false
        
    }
    state= {
        store_posts: [
        ],
        user:{},
        checkbox:[]
    }
    checkAll = () => {
        this.state.checkbox.forEach((e,i) => {
            this.setState(prev => ({
                checkbox:[
                    ...prev.checkbox.slice(0,i),
                    {id:prev.checkbox[i].id,value:true},
                    ...prev.checkbox.slice(i+1,prev.checkbox.length)
                ]
            }))
        })
    }
    onSubmit = () => {
        all(this.state.checkbox.map((e,i) => remove(`http://${SERVER}/likes`,{UserId:this.state.user.id,StoreId:e.id}))).then(res => {
            this.props.navigation.goBack(null)
        })
        
    }
    componentDidMount() {
        AsyncStorage.getItem("user",(err,res) => {
            if(!res) {
                alert("로그인 후 이용해주세요.")
                this.props.navigation.goBack(null)
            }
            else {
                this.setState({
                    user:JSON.parse(res)
                })
                
            AsyncStorage.getItem("current",(err,current) => {
                AsyncStorage.getItem("distance",(err,distance) => {
                    AsyncStorage.getItem("filter_server",(err,filter) => {
                        post(`http://${SERVER}/stores/readAll/${JSON.parse(res).id}`,
                        {
                            latitude:JSON.parse(current).lat,
                            longitude:JSON.parse(current).lng,
                            radius:JSON.parse(distance).distance,
                            sorting:filter,
                        }).then(res => {
                            res.data.data.forEach((e,i) => {
                                this.setState(prev => ({
                                    checkbox:[
                                        ...prev.checkbox,
                                        {id:e.id,value:false},
                                    ]
                                }),() => {console.log(this.state.checkbox)})
                            })
                            this.setState({
                                store_posts:res.data.data.filter((e,i) => {
                                    if(e.isLike) {
                                        return true
                                    }
                                }),
                                refreshing:false
                            },() => {
                            })
                        })
                    })
                })
            })
            }
        })
    }
    handleCheckbox = (i,id) => {
        
        this.setState(prev => ({
            checkbox:[
                ...prev.checkbox.slice(0,i),
                {id,value:!prev.checkbox[i].value},
                ...prev.checkbox.slice(i+1,prev.checkbox.length)
            ]
        }))
    }
    render() {
        return (
            <View style={{width:"100%",height:"100%",backgroundColor:"#979292"}}>
            <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>
                <Text style={{color:"white",fontSize:16,marginLeft:16}}>
                    찜 편집
                </Text>
                
            </View>
            <ScrollView>
                {this.state.store_posts.map((e,i) =>
            <View style={{paddingLeft:16,paddingRight:16,paddingTop:16,marginBottom:16,flexDirection:"row",width:"100%"}}>
                <Checkbox onChange={() => this.handleCheckbox(i)} value={this.state.checkbox[i].value} tintColors={{true:'#f4cd37'}} style={{alignSelf:"center",marginRight:16}} />
                
                <View style={{width:"80%"}}>
                    <Store_Post size="small" contentsVisible={false} navigation={this.props.navigation} index={null} item={e}/>
                    
                </View>
                
            </View>)}
            </ScrollView>
            <View style={{flexDirection:"row",width:"100%",height:"8%",position:"absolute",justifyContent:"center",bottom:0,alignItems:"center"}}>     
                <TouchableOpacity onPress={() => this.checkAll()} style={{width:"50%",height:"100%",justifyContent:"center",backgroundColor:"#F1F1F1"}}>
                    <Text style={{fontSize:17,color:"black",paddingLeft:10,textAlign:"center"}}>전체선택</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => this.onSubmit()} style={{width:"50%",height:"100%",justifyContent:"center",backgroundColor:"white"}}>
                    <Text style={{fontSize:17,color:"black",paddingLeft:10,textAlign:"center"}}>찜 해제</Text>
                </TouchableOpacity>
            </View>
            </View>
        );
    }
}
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
});