import React, {Component} from 'react';
import {
    View,
    Text, StyleSheet, ScrollView,
} from 'react-native';

import {connect} from 'react-redux';
import {Button, Checkbox, List,} from '@ant-design/react-native';
import ComponentsStyles from '../../components/ComponentsStyles';
const CheckboxItem = Checkbox.CheckboxItem;

@connect(customer => ({...customer}))
class SearchProject extends Component {
    // 多选项目
    constructor(props) {
        super(props);
        const checked_names = this.props.navigation.state.params.checked_names
        this.state = {
            callback: this.props.navigation.state.params.callback,
            ids: this.props.navigation.state.params.checked_ids ?? [], // 加载已选择的项目
            names: checked_names && checked_names !== '请选择' ? checked_names.split(',') : [],
        };
    }

    onChange = (checked, item) => {
        let {ids, names} = this.state;
        if (checked) {
            ids.push(item.id);
            names.push(item.name);
        } else {
            ids.splice(ids.indexOf(item.id), 1);
            names.splice(names.indexOf(item.name), 1);
        }
        this.setState({names, ids});
    };

    onSave = () => {
        const name = this.state.names.join(',')
        this.state.callback(this.state.ids, name ? name : '请选择')
        this.props.navigation.goBack();
    };

    render() {
        const {projectDict} = this.props.customer;
        return (
            <View style={{flex: 1, backgroundColor: '#fff'}}>
                <ScrollView>
                    <List style={{flex: 1}}>
                        {projectDict.map((item, index) => {
                            // 判断是否选择过了
                            const checked = this.state.ids.indexOf(item.id) > -1 ? true : false
                            return (<CheckboxItem
                                    key={index}
                                    checked={checked}
                                    onChange={event => {
                                        this.onChange(event.target.checked, item);
                                    }}
                                >
                                    {item.name}
                                </CheckboxItem>
                            );
                        })}
                    </List>
                </ScrollView>
                <Button
                    type="primary"
                    onPress={() => this.onSave()}
                    style={ComponentsStyles.button}><Text
                    style={{color: '#fff'}}>确定</Text>
                </Button>
            </View>
        );
    }
}

export default SearchProject;