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

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)

    function cancel() {
        props.cancel()
    }

    function confirm() {
        props.confirm()
    }
    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_detail'>

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