import React, { useState } from 'react';
import { Text, TextStyle, TouchableOpacity, View, ViewStyle } from 'react-native';
import { defaultStyle } from '../../configs';
import Icon from '../icon';

interface SingleParam<T> {
    title: string,
    value: T,
    checked?: boolean
}

interface MoreParam<T> {
    // 复选每一项标题名
    itemName: string,

    // 复选每一项的列表数据
    moreList: SingleParam<T>[]
}

interface ButtonItem<T> {
    // 按钮样式
    buttonStyle?: ViewStyle,
    // 按钮文字
    buttonText: string,
    // 按钮文字样式
    buttonTextStyle?: TextStyle,
    // 按钮回调函数
    callBack?: (data?: MoreParam<T>[]) => any,
}

interface Props<T> {
    // 组件样式
    drawerStyle?: ViewStyle,

    // 顶部框自定义样式
    topBackStyle?: ViewStyle,

    // 选择区域外框样式
    boxStyle?: ViewStyle,

    // 单选文字样式
    singleTextStyle?: TextStyle,

    // 单选勾 的样式
    singleIconStyle?: TextStyle,

    // 按钮外框样式
    buttonBoxStyle?: ViewStyle,

    // 单选类型参数
    singleParam?: SingleParam<T>[],

    // 单选是否显示右侧勾选图标
    showSingleIcon?: boolean,

    // 子组件向父组件传值 （单选）
    childrenSingleData?: (data: SingleParam<T>) => any,

    // 单选当前选中的下标
    singleIndex?: number,

    // 单选或复选标记  true单选  false复选
    singleOrMore?: boolean,

    // 多选参数
    moreParam?: MoreParam<T>[],

    // 按钮数组
    buttonArr?: ButtonItem<T>[],

    // 子组件向父组件传值 （复选）
    childrenMoreData?: (data: any) => any,
}

export default function Drawer<T>(props: Props<T>) {
    let [singleIndex, setSingleIndex] = useState(props.singleIndex || 0),
        [singleParam, setSingleParam] = useState(props.singleParam),
        [moreParam, setMoreParam] = useState(props.moreParam);

    let itemWidth = ((defaultStyle.device.width - 16) / 3) - 12;
    let {
        drawerStyle,
        singleOrMore = true,
        showSingleIcon = false,
        topBackStyle,
        boxStyle,
        singleTextStyle,
        singleIconStyle,
        buttonArr,
        buttonBoxStyle,
    } = props;

    // 单选改变勾选
    const _changeSingle = (item: SingleParam<T>, _index: number): void => {
        setSingleIndex(_index);
        props.childrenSingleData && props.childrenSingleData(item)
    };

    // 多选改变勾选状态
    const _changeMore = (_index: number, _index1: number): void => {
        let tmpArr1 = [...new Set(moreParam)],
            tmpCheck = !tmpArr1[_index].moreList[_index1].checked;
        tmpArr1[_index].moreList[_index1].checked = tmpCheck;
        setMoreParam(tmpArr1)
    };

    return (
        <View style={{
            backgroundColor: 'rgba(0, 0, 0, 0.7)',
            height: '100%',
            width: '100%',
            position: 'absolute',
            zIndex: 100,
            ...drawerStyle,
        }}>
            <View style={{ backgroundColor: 'white', ...topBackStyle }}>

                <View style={{ padding: 16, paddingRight: 0, ...boxStyle }}>
                    {
                        // 单选
                        singleOrMore ?
                            (singleParam?.map((_item, _index) => {
                                let tmpBool = singleIndex == _index;
                                let _color = tmpBool ? 'rgba(90, 169, 250, 1)' : 'rgba(51, 51, 51, 1)';
                                return (
                                    <TouchableOpacity
                                        onPress={() => _changeSingle(_item, _index)}
                                        activeOpacity={1}
                                        style={{
                                            flexDirection: 'row',
                                            justifyContent: 'space-between',
                                            alignItems: 'center'
                                        }}
                                        key={_index}
                                    >
                                        <Text style={{
                                            fontSize: 14,
                                            fontFamily: 'PingFang SC',
                                            lineHeight: 32,
                                            color: _color,
                                            ...singleTextStyle
                                        }}>{_item.title}</Text>
                                        {
                                            showSingleIcon && tmpBool &&
                                            <Icon style={{ color: _color, ...singleIconStyle }}
                                                iconCode={0xe631} />
                                        }
                                    </TouchableOpacity>
                                )
                            })) :
                            (
                                // 复选
                                moreParam?.map((item, index) => (
                                    <View key={item.itemName}>
                                        <Text>{item.itemName}</Text>
                                        <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
                                            {
                                                item.moreList.map((item1, index1) => {
                                                    let _color = item1.checked ? 'rgba(90, 169, 250, 1)' : 'rgba(51, 51, 51, 1)';
                                                    let _backgroundColor = item1.checked ? 'rgba(90, 169, 250, 0.1)' : 'rgba(250, 250, 252, 1)';
                                                    return (
                                                        <TouchableOpacity
                                                            key={item1.title}
                                                            onPress={() => _changeMore(index, index1)}
                                                            activeOpacity={1}
                                                            style={{
                                                                flexDirection: 'row',
                                                                justifyContent: 'center',
                                                                width: itemWidth,
                                                                alignItems: 'center',
                                                                margin: 10,
                                                                marginLeft: 0,
                                                                borderRadius: 3,
                                                                backgroundColor: _backgroundColor,
                                                            }}
                                                        >
                                                            <Text style={{
                                                                fontSize: 14,
                                                                fontFamily: 'PingFang SC',
                                                                lineHeight: 36,
                                                                color: _color,
                                                            }}>{item1.title}</Text>
                                                        </TouchableOpacity>
                                                    )
                                                })
                                            }
                                        </View>

                                    </View>
                                ))
                            )
                    }
                </View>

                {/*底部操作按钮*/}
                {!singleOrMore && <View
                    style={{
                        flexDirection: 'row',
                        width: '100%',
                        justifyContent: 'center',
                        ...buttonBoxStyle,
                    }}>
                    {
                        buttonArr?.map(item =>
                            (
                                <TouchableOpacity
                                    key={item.buttonText}
                                    activeOpacity={1}
                                    onPress={() => {
                                        item.callBack && item.callBack(moreParam);
                                    }}
                                    style={{
                                        height: 50,
                                        justifyContent: 'center',
                                        alignItems: 'center',
                                        borderWidth: 1,
                                        width: '50%',
                                        borderColor: 'rgba(220, 220, 220, 1)',
                                        ...item.buttonStyle,
                                    }}>
                                    <Text style={{ justifyContent: 'center', ...item.buttonTextStyle }}>
                                        {item.buttonText || '按钮'}</Text>
                                </TouchableOpacity>
                            )
                        )
                    }
                </View>}

            </View>
            <View style={{ flex: 1 }}></View>
        </View>
    )
}
