import React,{ Component } from 'react'
import More from '../../assets/more_.svg'
import Store_Post from '../Store_Post'
import Checkbox from '@react-native-community/checkbox'

import * as Location from 'expo-location';
import {View,Text,RefreshControl,Image,ScrollView,Dimensions,TextInput,TouchableOpacity,StatusBar,StyleSheet} from 'react-native'
import { post,all, get, put, delete as remove } from 'axios'
import AsyncStorage from '@react-native-community/async-storage';
import { SERVER } from '../../common/servername';
class MainPage extends Component {

    state = {
        refreshing:false,
        store_posts: [
        ],
        location:null,
        checkbox:[],
        user:{}
    }

    constructor(props) {

        super(props)
        
    }
    _onRefresh = () => {
        this.setState({refreshing: true});
        this.setState({
            refreshing:false,
        })

    }
    componentDidMount() {
        (async () => {
        let location = await Location.getCurrentPositionAsync({});
        this.setState({
            location,
        },() => {
            AsyncStorage.getItem("user",(err,res) => {
                if(res) {
                    this.setState({
                        user:JSON.parse(res)
                    })
                    post(`http://${SERVER}/blacks/read`,{UserId:JSON.parse(res).id,latitude:this.state.location.coords.latitude, longitude:this.state.location.coords.longitude,sorting:"distance"}).then(res => {
                        this.setState({
                            checkbox:res.data.data.map((e,i) => {
                                return false     
                            })
                        },() => {
                        })
                        this.setState({
                            store_posts:res.data.data
                        })
                    })

                }
            })
        })
    })();


    }
    handleCheckbox = (i) => {
        this.setState((prev)=>({
            checkbox:[
                ...prev.checkbox.slice(0,i),
                !prev.checkbox[i],
                ...prev.checkbox.slice(i+1,prev.checkbox.length)
            ]
        }),() => {
        })
    }
    checkAll = () => {
        this.setState({
            checkbox:this.state.store_posts.map((e,i) => {
                return true     
            })

        })
    }
    cancel_black = () => {

        all(this.state.checkbox.map((e,i) => {
            if(e == true) {
                remove(`http://${SERVER}/blacks/${this.state.store_posts[i].id}`)
            }
        })).then(() => {
            alert("차단이 해제되었습니다.")
            post(`http://${SERVER}/blacks/read`,{UserId:this.state.user.id,latitude:this.state.location.coords.latitude, longitude:this.state.location.coords.longitude,sorting:"distance"}).then(res => {
                this.setState({
                    checkbox:res.data.data.map((e,i) => {
                        return false     
                    })
                },() => {
                })
                this.setState({
                    store_posts:res.data.data
                })
            })
            
        })
    }
    
    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>
                <TouchableOpacity style={{marginLeft:"auto",marginRight:16}} onPress={() => this.props.navigation.navigate("EditLike")} >
                    <More />
                </TouchableOpacity>
            </View>
            <ScrollView style={{paddingLeft:16,paddingRight:16,paddingTop:16,width:"100%"}}>
                
            {this.state.store_posts.map((e,i) =>
                    <View style={{width:"80%",flexDirection:"row",marginBottom:16}}>
                        <Checkbox onChange={() => this.handleCheckbox(i)} value={this.state.checkbox[i]} tintColors={{true:'#f4cd37'}} style={{alignSelf:"center",marginRight:10}}/>
                        <Store_Post size="small" contentsVisible={false} navigation={this.props.navigation} index={null} item={e}/> 
                    </View>
                )}
                <View style={{height:16}}>

                </View>
            </ScrollView>
            <View style={{width:"100%",flexDirection:"row"}}>
                <TouchableOpacity onPress={() => this.checkAll()} style={{backgroundColor:"white",width:"50%",paddingTop:21,paddingBottom:19}}>
                    <Text style={{fontWeight:"bold",textAlign:"center",color:"black",fontSize:15}}>
                        전체 선택
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => this.cancel_black()} style={{backgroundColor:"#FFD63A",width:"50%",paddingTop:21,paddingBottom:19}}>
                    <Text style={{fontWeight:"bold",textAlign:"center",color:"black",fontSize:15}}>
                        차단 해제
                    </Text>
                </TouchableOpacity>
            </View>
            </View>
        );
        

    }

}

const style=StyleSheet.create({
    list_pick_event: {
        paddingTop:17,
        paddingBottom:17,
        borderBottomColor:"#BBB9B9",
        borderTopColor:"#BBB9B9",
        borderBottomWidth:0.5,
    },
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    avatar : {
        width:32,
        height:32,
        borderRadius:100,
    },
    detail: {
        marginLeft:15,
        flex:1,
        flexDirection:"row",
    },
    hit: {
        fontSize:9,
        fontWeight:"bold"
    },
    date: {
        marginLeft:9,
        fontSize:9,
        color:"black"
    },
    userWrapper : {
        flex:1,
        flexDirection:"row",
        paddingTop:13,
        paddingBottom:17,
        borderBottomColor:"#AEAEAE",
        borderBottomWidth:1,
    },
    nickname : {
        marginLeft:10,
        fontSize:13,
        fontWeight:"bold",
        color:"black"
    },
    title : {
        fontSize:13,
        fontWeight:"bold",
        color:"black"
    },
    like : {
        marginTop:3,
        fontSize:10,
        color:"red",
        marginLeft:5,
    },
    titleWrapper : {
        marginTop:17,
        paddingLeft:19,
        flex:1,
        flexDirection:"row"
    }
})
export default MainPage