import * as React from 'react';
import {StyleSheet, Image, Text, TextInput, TouchableOpacity, View, StatusBar, SafeAreaView, FlatList, Platform} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import * as StyleUtils from '../utils/StyleUtils';
import Card from '../Card';
import * as Consts from '../Consts';
import Button from '../components/Button';
import Icon from 'react-native-vector-icons/MaterialIcons';

export default function(props) {
    return <ReportIllegalContentScreen {...props} navigation={useNavigation()} />
}

const types = [
    '违背国家法律法规',
    '色情或性暗示',
    '语言低俗、恶意攻击他人',
    '广告内容',
    '其它',
]

class ReportIllegalContentScreen extends React.Component {

    constructor(params) {
        super(params);

        this.state = {
            content : '',
            contentLength : 0,
            type : types[0],
        }
    }

    componentDidMount(): void {
        this.props.navigation.setOptions({
            headerRight: ()=> <View style={{flex:1, alignItems:'center', justifyContent:'center'}}>
                <TouchableOpacity style={{paddingRight:StyleUtils.p16, paddingLeft:StyleUtils.p8, flexDirection:'row', alignItems: 'center'}} onPress={()=>this.done()}>
                    <Text style={{color:'white', fontSize: StyleUtils.fontSizes.small}}>提交</Text>
                </TouchableOpacity>
            </View>,
            headerBackTitle: '取消'
        })
    }

    done=()=>{
        const { content, type } = this.state;
        const { category, id } = this.props.route.params;

        if (!content) {
            global.toast.info('请填写举报内容');
            return ;
        }

        // 调用举报API
        global.httpPost('/api/v1/cs/message/illegal-content', { category, id : (id ? (id+'') : ''), content, type }, ()=>{
            global.toast.info('举报成功, 我们会尽快处理您的意见');
            this.props.navigation.goBack();
        })

    }

    changeContent=(content)=>{
        this.setState({
            content : content.length > 100 ? content.substr(0, 100) : content,
            contentLength : content.length
        })
    }

    changeType=(type)=>{
        this.setState({ type })
    }

    render(){

        const { content, contentLength, type } = this.state;

        return <SafeAreaView style={{ backgroundColor: Consts.SECOND_COLOR, flex:1 }}>
            <View style={{paddingHorizontal: StyleUtils.p16, paddingTop: StyleUtils.p8, flex:1}}>
                {
                    types.map(t=>{

                        return <TouchableOpacity key={t} onPress={()=>this.changeType(t)}>
                            <View style={{
                                flexDirection:'row', alignItems:'center', marginVertical: StyleUtils.p8
                            }}>
                                <View style={{
                                    height:StyleUtils.p16,
                                    width: StyleUtils.p16,
                                    borderRadius: StyleUtils.p8,
                                    borderWidth: StyleUtils.border1px,
                                    borderColor: Consts.MAIN_COLOR,
                                    marginRight: StyleUtils.p4,
                                    justifyContent:'center',
                                    alignItems:'center',
                                }}>
                                    {
                                        t===type && <View style={{
                                            height:StyleUtils.p12,
                                            width: StyleUtils.p12,
                                            borderRadius: StyleUtils.p12 / 2,
                                            backgroundColor: Consts.MAIN_COLOR,
                                        }} />
                                    }

                                </View>

                                <Text style={{color: '#222'}}>{t}</Text>
                            </View>
                        </TouchableOpacity>

                    })
                }

                <View style={{height: StyleUtils.p8}} />
                <View>
                    <TextInput multiline={true}
                               underlineColorAndroid = {'transparent'}
                               onChangeText={content=>this.changeContent(content)}
                               style={{
                                   height: StyleUtils.normalize(100),
                                   textAlignVertical:'top',
                                   padding: StyleUtils.p8,
                                   fontSize: StyleUtils.fontSizes.small,
                                   lineHeight: StyleUtils.fontSizes.small * 1.5,
                                   color: '#222',
                                   borderColor: Consts.MAIN_COLOR,
                                   borderWidth: 1,
                                   borderRadius: StyleUtils.p4,
                               }}>
                        {content}
                    </TextInput>
                    <Text style={{color:'#666', textAlign:'right', marginTop: StyleUtils.p4}}>{contentLength}/100</Text>
                </View>

            </View>
        </SafeAreaView>

    }

}
