import { View, Text } from '@tarojs/components'
import './MetricModalOrder.scss'
import { alphaToHex } from '@/utils/tools'
import { useTranslation } from 'react-i18next'
import { useEffect, useState } from 'react'
import MoveOrderList from './MoveOrderList'
import { IconDrag } from '@/components/basic/Icons'

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

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

    function cancel() {
        props.cancel()
    }

    function confirm() {
        props.confirm(list)
    }

    // function items() {
    //     var array:any = []
    //     for (var i = 0; i < list.length; i++) {
    //         var item = (
    //             <View className='modal_order_item' style={{ height: 40 }}>
    //                 <Text style={{color:color}}>{list[i].name}</Text>
    //                 <IconDrag width={20}/>
    //             </View>
    //         )
    //         array.push(item)
    //     }
    //     return array
    // }

    return <View className='modal_content'>
        <View className='modal_title_view'>
            <Text className='modal_title1'>{t('feature.track_something.metric.order')}</Text>
            <Text className='modal_subtitle'>长按可拖动排序</Text>
        </View>
        <View className='modal_order_detail'>
            <MoveOrderList itemHeight={40} array={list} color={color} update={(temps)=>{setList(temps)}}/>
        </View>
        <View className='modal_operate'>
            <View className='modal_btn' style={{ backgroundColor: color + alpha }} onClick={cancel}>
                <Text className='modal_cancel_text' style={{ color: color }}>{global.metricAdd ? '上一步' : '取消'}</Text>
            </View>
            <View className='btn_space' />
            <View className='modal_btn' style={{ backgroundColor: color }} onClick={confirm}>
                <Text className='modal_confirm_text' style={{ color: '#000' }}>{global.metricAdd ? '完成' : '确定'}</Text>
            </View>


        </View>
    </View>
}