import { View, Text, ScrollView } from '@tarojs/components'
import './MetricModalChoose.scss'
import { alphaToHex } from '@/utils/tools'
import { useTranslation } from 'react-i18next'
import { useEffect, useState } from 'react'
import { IconRadio, IconRadioCheck } from '@/components/basic/Icons'
import Taro from '@tarojs/taro'
import { useSelector } from 'react-redux'

export default function Component(props: {
    themeColor: string, cancel: Function, confirm: Function, array: any, limit: any,
    orders: any, newOrders: any
}) {
    const color = props.themeColor ? props.themeColor : '#ff0000'
    const user = useSelector((state: any) => state.user);
    const [list, setList] = useState(props.array)
    const [oldList, setOldList] = useState(props.orders)
    const [newList, setNewList] = useState(props.newOrders)
    const min = props.limit.min
    const max = props.limit.max
    const { t } = useTranslation()
    var alpha = alphaToHex(0.4)

    function cancel() {
        props.cancel()
    }

    function confirm() {
        // props.confirm(orderList)
        var array: any = []
        for (var i = 0; i < oldList.length; i++) {
            if (oldList[i].is_following) {
                array.push(oldList[i])
            }
        }
        for (var i = 0; i < newList.length; i++) {
            array.push(newList[i])
        }
        console.log(oldList,newList,array)
        debugger
        props.confirm(oldList,newList,array,list)
    }

    function tapItem(obj) {
        
        var check = !obj.is_following
        var count = 0;
        oldList.map(item => {
            if (item.is_following) {
                count++;
            }
        })
        newList.map(item => {
            if (item.is_following) {
                count++;
            }
        })

        if (check) {
            if (max == count) {
                Taro.showToast({
                    icon: 'none',
                    title:`高级会员可选择${count}项以上`
                    // title: t('feature.common.toast.max_metric_count',{count:count}),
                })
                return
            }
        }
        else {
            if (min == count) {
                Taro.showToast({
                    icon: 'none',
                    title: t('feature.common.toast.min_metric_count',{count:count}),
                })
                return
            }
        }

        var isFind = false;
        oldList.map(item => {
            if (obj.code == item.code) {
                isFind = true;
                item.is_following = check
            }
            return item
        })
        if (!isFind) {
            if (check) {
                obj.is_following = true
                newList.push(obj)
            } else {
                for (var i = 0; i < newList.length; i++) {
                    if (newList[i].code == obj.code) {
                        newList.splice(i, 1)
                    }
                }
            }
        }

        for (var i = 0; i < list.length; i++) {
            for (var j = 0; j < list[i].items.length; j++) {
                var temp = list[i].items[j]
                if (obj.code == temp.code) {
                    temp.is_following = check
                }
            }
        }

        setList(JSON.parse(JSON.stringify(list)))
        setOldList(JSON.parse(JSON.stringify(oldList)))
        setNewList(JSON.parse(JSON.stringify(newList)))
    }

    function codeIndex(code) {
        for (var i = 0; i < oldList.length; i++) {
            if (oldList[i].code == code) {
                return `序号：${i + 1}`;
            }
        }
        // for (var i = 0; i < newList.length; i++) {
        //     if (newList[i].code == code) {
        //         return i + 1 + oldList.length;
        //     }
        // }
        return ''
    }

    function codeNewIndex(code){
        for (var i = 0; i < newList.length; i++) {
            if (newList[i].code == code) {
                return `序号：${i + 1 + oldList.length}`;
            }
        }
        return ''
    }

    function codeOldIndex(code){
        for (var i = 0; i < oldList.length; i++) {
            if (oldList[i].code == code) {
                return `序号：${i + 1}`;
            }
        }
        return ''
    }


    return <View className='modal_content'>
        <View className='modal_title_view'>
            <Text className='modal_title1'>{t('feature.track_something.metric.choose_metric')}</Text>
            <Text className='modal_subtitle'>按需选择自己常用的指标</Text>
        </View>
        <ScrollView className='modal_detail' scrollY>
            <View>
                {
                    list.map((item, index) => {
                        return <View className='modal_group' key={index}>
                            <Text className='modal_group_title'>{item.name}</Text>
                            {
                                item.items.map((obj, i) => {
                                    return <View className='modal_item' onClick={() => tapItem(obj)}>
                                        {
                                            obj.is_following ? <IconRadioCheck width={16} color='#fff' /> : <IconRadio width={16} color='#fff' />
                                        }

                                        <Text className='modal_item_text' style={{ color: color, marginLeft: 10 }}>{obj.name}</Text>
                                        <View style={{ flex: 1 }} />
                                        {
                                            user.test_user && <Text>{obj.is_following ? codeIndex(obj.code) : ''}</Text>
                                        }
                                         {
                                            user.test_user && <Text style={{color:'green'}}>{obj.is_following ? codeNewIndex(obj.code) : ''}</Text>
                                        }
                                        {
                                            user.test_user && <Text style={{color:'red'}}>{!obj.is_following &&  codeOldIndex(obj.code)}</Text>
                                        }
                                        <View className='px1SeperateHeight'/>
                                    </View>
                                })
                            }
                        </View>
                    })
                }
            </View>
        </ScrollView>
        <View className='modal_operate'>
            <View className='modal_btn' style={{ backgroundColor: color + alpha }} onClick={cancel}>
                <Text className='modal_cancel_text' style={{ color: color }}>取消</Text>
            </View>
            <View className='btn_space' />
            <View className='modal_btn' style={{ backgroundColor: color }} onClick={confirm}>
                <Text className='modal_confirm_text' style={{ color: '#000' }}>下一步</Text>
            </View>


        </View>
    </View>
}