import { View, Text, Image } from "@tarojs/components";
import { useEffect, useState } from "react";
import './SingleSelect.scss'
import check from '@/assets/svg/check.svg'

export default function Component(props: { items: any[],
    selColor?:string,
    itemSelect?:(index: number)=>void,
    selIndex?:number }) {
    const [selIndex, setSelIndex] = useState(props.selIndex?props.selIndex:-1)

    useEffect(()=>{
        setSelIndex(props.selIndex!)
    },[props.selIndex])

    function isString(variable: any): boolean {
        return typeof variable === 'string';
    }

    function itemClick(index: number) {
        setSelIndex(index)
        if(props.itemSelect){
            props.itemSelect(index)
        }
    }

    return (
        <View>{
            props.items.map((item, index) => {
                return <View className={selIndex == index ? 'item item_select' : 'item'} key={index} onClick={() => itemClick(index)}>
                    {/* <Text>{item}</Text> */}
                    {
                        isString(item) ? <Text style={{color:'#fff'}}>{item}</Text> : item
                    }
                    {
                        selIndex == index ? <Image style='width:12px;height:12px;' src={check} /> : null
                    }
                </View>
            })
        }</View>
    )
}