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'

export default function Component(props: { themeColor: string, cancel: Function, confirm: Function, array: any, limit: any, orders: any }) {
    const color = props.themeColor ? props.themeColor : '#ff0000'
    const [list, setList] = useState(props.array)
    const [orderList, setOrderList] = useState(props.orders)
    const min = props.limit.min
    const max = props.limit.max
    const { t } = useTranslation()
    var alpha = alphaToHex(0.4)

    useEffect(()=>{
        setList(props.array)
        setOrderList(props.orders)
    },[props.array,props.orders])

    function cancel() {
        props.cancel()
    }

    function confirm() {
        // var datas: any = []
        // list.map(item => {
        //     item.items.map(data => {
        //         if (data.is_following) {
        //             datas.push(data as any)
        //         }
        //     })
        // })

        if (min > orderList.length) {
            Taro.showToast({
                icon: 'none',
                title: t('feature.common.toast.min_value'),
            })
            return
        }
        if (max < orderList.length) {
            Taro.showToast({
                icon: 'none',
                title: t('feature.common.toast.max_value'),
            })
            return
        }

        props.confirm(orderList)
    }

    function tapItem(obj) {
        var check = !obj.is_following
        if (check) {
            orderList.push({
                name: obj.name,
                code: obj.code
            })
        }
        else {
            for (var i = 0; i < orderList.length; i++) {
                if (orderList[i].code == obj.code) {
                    orderList.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)))
        setOrderList(JSON.parse(JSON.stringify(orderList)))
    }


    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>
                                })
                            }
                        </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>
}