import { View, Image, Text } from '@tarojs/components'
import './Timeline.scss'
import { CheckBoxType, TimelineType } from '@/utils/types'
import CheckBox from '../basic/CheckBox'


export default function Component(props: { items: any[], title?: string, type?: TimelineType }) {
    return <View className="timeline">
        {
            props.title && <Text className='timeline_title'>{props.title}</Text>
        }
        {
            props.items.map((item, index) => (
                <View className='timelineItem'>
                    <View className='timelineContentView'>
                        {
                            item.status == 'padding' && <CheckBox type={CheckBoxType.empty} opacity={0.4} />
                        }
                        {
                            item.status == 'done' && <CheckBox type={CheckBoxType.check} opacity={0.4} />
                        }
                        {
                            item.status == 'un_done' && <CheckBox type={CheckBoxType.cross} opacity={0.4} />
                        }
                        <View className='timelineContentDetail'>
                            <View className="timeline-time">{props.type == TimelineType.timeSecond ? item.title : item.content}</View>

                            <View style={{ flex: 1 }} />
                            {
                                item.date && <View className="timeline-date">{item.date}</View>
                            }

                        </View>
                    </View>
                    <View className="timeline-detail">{props.type == TimelineType.timeSecond ? item.content : item.title}</View>
                    <View className={index !== props.items.length - 1 ? 'timeline_line1 line1_bottom_space' : 'timeline_line1 line1_bottom_zero'} />
                    {index !== props.items.length - 1 && <View className={(props.items[index + 1].status == 'done' && item.status == 'done') ? 'timeline-line' : 'timeline-line dash'} />}

                </View>
            ))
        }

    </View>
}
