/**
*  选择项
*/

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

interface Props {

    /**
    *  样式
    */
    style?: ViewStyle

    /**
    *  lattice 格子选择器   list 列表选择器
    */
    type?: 'list' | 'lattice'

    /**
    *  列表 数据源
    */
    listSource?: string[]

    /**
    *  列表当前选择
    */
    lsIndex?: number

    /**
    *  列表选择事件
    */
    onListSelect?: (index: number) => void

    /**
    *  格子 数据源
    */
    latticeSource?: { title?: string, items: string[], single?: boolean }[]

    /**
    *  格子列表当前选择
    */
    laIndex?: { title?: string, items: string[] }[]

    /**
    *  格子 选择确定事件
    */
    onLatticeSelect?: (select: { title?: string, items: string[] }[]) => void

}

export default function SelectView(props: Readonly<Props>) {

    const { type = 'list', listSource = [], latticeSource = [], laIndex = props.latticeSource?.map(la => { return { title: la.title, items: [] } }) || [] } = props

    const [lsi, setLsi] = useState(props.lsIndex)
    const [lai, setLai] = useState(laIndex)
    const [fatherWidth, setFatherWidth] = useState(375)


    let onLayout = (event: { nativeEvent: { layout: { width: number, height: number } } }) => {
        setFatherWidth(event.nativeEvent.layout.width)
    }

    let listViewSelect = (index: number) => {
        setLsi(index)
        props.onListSelect && props.onListSelect(index)
    }

    let latticeSelect = (aIndex: number, bIndex: number, title: string, select: boolean) => {

        if (aIndex >= lai.length) {
            console.error('数据问题，初始化时 laIndex 没有请传undefind ，不要传空数组')
            return
        }
        let newLai = [...lai]
        if (select) {
            newLai[aIndex] = { ...lai[aIndex], items: lai[aIndex].items.filter(t => t != title) }
            setLai(newLai)
        } else {
            newLai[aIndex] = { ...lai[aIndex], items: [...lai[aIndex].items, title] }
            setLai(newLai)
        }
    }

    useEffect(() => {
        props.onLatticeSelect && props.onLatticeSelect(lai)
    }, [lai])

    let itemWidth = (fatherWidth - 10 * 3 - 10 * 2) / 3 - 1

    return (
        <View style={{ backgroundColor: 'rgba(0,0,0,0.6)', flex: 1 }} onLayout={onLayout}>
            <ScrollView style={{ height: type == 'list' ? 250 : 400 }}>
                {
                    type == 'list' ? (
                        <View style={{ backgroundColor: '#fff' }} >
                            {
                                listSource.map((title, index) => {
                                    let select = index == lsi
                                    return (
                                        <TouchableOpacity style={{ height: 40, paddingHorizontal: 15, backgroundColor: '#fff', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}
                                            onPress={() => listViewSelect(index)} >
                                            <Text style={{ color: select ? defaultStyle.color.mainColor : '#333', fontSize: 14 }} >{title}</Text>
                                            <Icon style={{ color: select ? defaultStyle.color.mainColor : '#00000000', fontSize: 12 }} iconCode={0xe646} />
                                        </TouchableOpacity>
                                    )
                                })
                            }
                        </View>
                    ) : (
                            <View style={{ paddingTop: 5, backgroundColor: '#fff', paddingBottom: 10 }} >
                                {
                                    latticeSource.map((source, aIndex) => {
                                        return (
                                            <View style={{ paddingHorizontal: 10 }} >
                                                {source.title && (<Text style={{ marginTop: 15, marginBottom: 4, color: '#999', fontSize: 12, marginLeft: 5 }} >{source.title}</Text>)}
                                                <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
                                                    {
                                                        source.items.map((item, bIndex) => {
                                                            let select = false;
                                                            if (lai[aIndex]) {
                                                                select = lai[aIndex].items.indexOf(item) != -1
                                                            }
                                                            return (
                                                                <TouchableOpacity style={{ width: itemWidth, height: 36, marginTop: 10, marginHorizontal: 5, borderRadius: 2, backgroundColor: select ? 'rgba(90, 169, 250, 0.1)' : '#f3f3f3', justifyContent: 'center', alignItems: 'center' }}
                                                                    onPress={() => latticeSelect(aIndex, bIndex, item, select)} >
                                                                    <Text style={{ color: select ? defaultStyle.color.mainColor : '#666', fontSize: 14 }}>{item}</Text>
                                                                </TouchableOpacity>
                                                            )
                                                        })
                                                    }
                                                </View>
                                            </View>
                                        )
                                    })
                                }
                            </View>
                        )
                }


            </ScrollView>
        </View >
    )

}
