import React, { useState, useEffect } from 'react'
import ReactECharts from 'echarts-for-react'
import ColorMaker from '../service/colorGenerator'
import { getSeconds } from '../service/getSeconds'
import { getAppId } from '../service/getAppId'
import { getDayScreenUse } from '../service/getDayScreenUse'

const Gannt = () => {
    let [option, setOption] = useState({})

    useEffect(async () => {
        let categories = ['使用记录']
        var startTime = +new Date()

        function renderItem(params, api) {
            var categoryIndex = api.value(0)
            var start = api.coord([api.value(1), categoryIndex])
            var end = api.coord([api.value(2), categoryIndex])
            var height = api.size([0, 1])[1] * 0.6

            var rectShape = echarts.graphic.clipRectByRect(
                {
                    x: start[0],
                    y: start[1] - height / 2,
                    width: end[0] - start[0],
                    height: height
                },
                {
                    x: params.coordSys.x,
                    y: params.coordSys.y,
                    width: params.coordSys.width,
                    height: params.coordSys.height
                }
            )

            return (
                rectShape && {
                    type: 'rect',
                    shape: rectShape,
                    style: api.style()
                }
            )
        }

        let appIdArray = await getAppId('1')
        let types = new Array(appIdArray.data.length)
        for (let i = 0; i < appIdArray.data.length; i++) {
            types[i] = {
                appId: i + 1,
                name: appIdArray.data[i].text,
                color: '#' + ColorMaker.GetColor(i).Color
            }
        }

        for (let i = 0; i < appIdArray.length; i++) {
            types.push({
                appId: i + 1,
                name: appIdArray[i].text,
                color: '#' + ColorMaker.GetColor(i).Color
            })
        }
        let dateStr = '2022-09-07'
        let useRecord = await getDayScreenUse(dateStr)
        const date = new Date(dateStr)
        const timestampInMs = date.getTime()

        // 👇️ timestamp in seconds (Unix timestamp)
        const timestampInSeconds = Math.floor(date.getTime())

        let data = new Array(useRecord.data.length)
        for (let i = 0; i < useRecord.data.length; i++) {
            data[i] = {
                name: useRecord.data[i]['activity'],
                value: new Array(getSeconds(useRecord.data[i]['timeStart']) * 1000, timestampInSeconds + getSeconds(useRecord.data[i]['timeStart']) * 1000, getSeconds(useRecord.data[i]['timeEnd']) * 1000 + timestampInSeconds, getSeconds(useRecord.data[i]['timeEnd']) * 1000),
                itemStyle: {
                    normal: {
                        color: types[useRecord.data[i]['appId'] - 1]['color']
                    }
                }
            }
        }

        setOption({
            tooltip: {
                formatter: function (params) {
                    let seconds = params.value[3] / 1000
                    let duration = (params.value[3] - params.value[0]) / 1000
                    return (
                        params.marker +
                        params.name +
                        ': ' +
                        Math.floor(seconds / 3600) +
                        '时' +
                        Math.floor((seconds % 3600) / 60) +
                        '分' +
                        Math.floor(seconds % 60) +
                        '秒' +
                        '<br/>' +
                        '持续时间: ' +
                        Math.floor(duration / 3600) +
                        '时' +
                        Math.floor((duration % 3600) / 60) +
                        '分' +
                        Math.floor(duration % 60) +
                        '秒'
                    )
                }
            },
            dataZoom: [
                {
                    type: 'slider',
                    filterMode: 'weakFilter',
                    showDataShadow: false,
                    top: 550,
                    height: 10,
                    borderColor: 'transparent',
                    backgroundColor: '#e2e2e2',
                    handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
                    handleSize: 20,
                    handleStyle: {
                        shadowBlur: 6,
                        shadowOffsetX: 1,
                        shadowOffsetY: 2,
                        shadowColor: '#aaa'
                    },
                    labelFormatter: ''
                },
                {
                    type: 'inside',
                    filterMode: 'weakFilter'
                }
            ],
            grid: {
                height: 450
            },
            xAxis: {
                min: startTime,
                scale: true,
                axisLabel: {
                    formatter: function (val) {
                        let seconds = (val - startTime) / 1000 + 10620
                        return Math.floor(seconds / 3600) + '时' + Math.floor(seconds % 3600 / 60) + '分' + Math.floor(seconds % 60) + '秒'
                    }
                }
            },
            yAxis: {
                data: categories
            },
            series: [
                {
                    type: 'custom',
                    renderItem: function (params, api) {
                        var categoryIndex = api.value(0)
                        var start = api.coord([api.value(1), categoryIndex])
                        var end = api.coord([api.value(2), categoryIndex])
                        var height = api.size([0, 1])[1] * 0.6

                        var rectShape = echarts.graphic.clipRectByRect(
                            {
                                x: start[0],
                                y: start[1] - height / 2,
                                width: end[0] - start[0],
                                height: height
                            },
                            {
                                x: params.coordSys.x,
                                y: params.coordSys.y,
                                width: params.coordSys.width,
                                height: params.coordSys.height
                            }
                        )

                        return (
                            rectShape && {
                                type: 'rect',
                                shape: rectShape,
                                style: api.style()
                            }
                        )
                    },
                    itemStyle: {
                        normal: {
                            opacity: 0.8
                        }
                    },
                    encode: {
                        x: [1, 2],
                        y: 0
                    },
                    data: data
                }
            ]
        })
    }, [])

    return <ReactECharts option={option} style={{ height: '800px', width: '1200px' }}></ReactECharts>
}

export default Gannt