import {useEffect, useState} from "react";
import TimelineManager from "@/core/components/timelines/timelineManager";
import moment from "jalali-moment";
import {Timeline} from "@mui/lab";
import {useConfig} from "@witel/webapp-builder";

const TimeLineDetails = () => {
    const {config} = useConfig()
    const [timeLineList, setTimeLineList] = useState([])

    const deadlines = Object.keys(config.deadlines).map(key => ({
        type: key,
        ...config.deadlines[key]
    }));

    useEffect(() => {
        let tempArr = []
        for (const timeLine of deadlines) {
            let temp = {}
            temp['label'] = timeLine.timeline_label
            temp['date'] = moment(timeLine.date.from, 'jYYYY/jMM/jDD').locale('fa').format('jD jMMMM')
            const fromDate = moment(timeLine.date.from, 'jYYYY/jMM/jDD')
            const toDate = moment(timeLine.date.to, 'jYYYY/jMM/jDD')
            const today = moment()
            if (today.isBetween(fromDate, toDate, null, '[]')) {
                temp['status'] = 'in progress'
            } else if (today.isAfter(toDate, null)) {
                temp['status'] = 'done'
            } else if (today.isBefore(fromDate, null)) {
                temp['status'] = 'open'
            }
            tempArr.push(temp)
        }
        setTimeLineList(tempArr)
    }, []);

    return (
        <Timeline position="alternate">
            {timeLineList.map((timeLine, index) => (
                <TimelineManager
                    key={index}
                    status={timeLine.status}
                    date={timeLine.date}
                    primaryLabel={timeLine.label.primary}
                    secondaryLabel={timeLine.label.secondary}
                    position={index === (timeLineList.length - 1) ? 'end' : ''}
                />
            ))
            }
        </Timeline>
    )
}
export default TimeLineDetails