import { EyeOutlined } from "@ant-design/icons";
import { Tooltip } from "antd";
import React, { useEffect, useState } from "react"
import { getTimeSeriesList, WEEK_SERIRES } from "./const"
const totalHour = 48;

interface Props {
    timeSeries: string,  // 投放时间
}
const TimeSeriesLook: React.FC<Props> = (prosp) => {

    const { timeSeries } = prosp
    const [text, setText] = useState<string[]>([])


    useEffect(() => {
        if (timeSeries) {
            if (timeSeries === getTimeSeriesList().join('')) {
                setText([])
            } else {
                let newTimesText: string[] = []
                WEEK_SERIRES.forEach((item, index) => {
                    let data = timeSeries.slice(index * totalHour, totalHour + totalHour * index)
                    let times: string[] = []
                    let startTime = ''
                    let endTime = ''
                    for (let i = 0; i < data.length; i++) {
                        if (data[i] === '1') {
                            const hour = Math.floor(i / 2);
                            const curHour = ('00' + hour).slice(-2);
                            const curMinute = i % 2 ? '30' : '00'
                            const nextHour = ('00' + (hour + 1)).slice(-2);
                            if (!startTime) {
                                startTime = `${curHour}:${curMinute}`
                                endTime = i % 2 ? `${nextHour}:00` : `${curHour}:${curMinute}`
                            } else {
                                endTime = i % 2 ? `${nextHour}:00` : `${curHour}:${curMinute}`
                            }
                            if (data.length === i + 1) {
                                if (startTime && endTime) {
                                    times.push(`${startTime}-${endTime}`)
                                }
                            }
                        } else {
                            if (startTime && endTime) {
                                times.push(`${startTime}-${endTime}`)
                            }
                            startTime = ''
                            endTime = ''
                        }

                    }
                    if (times.length > 0) {
                        newTimesText.push(`${item}:${times.toString()}`)
                    }
                })
                setText(newTimesText)
            }
        } else {
            setText([])
        }
    }, [timeSeries])

    return <>
        {text.length === 0 ? '不限' : <Tooltip title={text.map((item, index) => <div key={index}>{item}</div>)}>
            <a><EyeOutlined /></a>
        </Tooltip>}
    </>
}

export default React.memo(TimeSeriesLook)