import React, { useState } from 'react';
import * as echarts from 'echarts';
import ReactCharts from 'echarts-for-react';
import { Distribute1 } from '../../../vm-charts';
import type { Distribute1Props } from '../../../vm-charts';
import { overViewService } from '../../api';
import VmSubTitle from '../../../vm-sub-title';
import VmButton from '../../../vm-button';
import {
    ThrowSumByGarbageTypeResp,
    ThrowSumByDayAndPointResp,
    ThrowSumByHourResp,
} from '../../types';
import moment from 'moment';
interface OverViewHotProps {
    classPrefix?: string;
    id: string;
}

enum GarbageType {
    KEHUISHOU = '可回收物',
    CHUYU = '厨余垃圾',
    QITA = '其他垃圾',
    YOUHAI = '有害垃圾',
}

enum GarbageTypeColor {
    KEHUISHOU = '#6BB8FF',
    CHUYU = '#46DA91',
    QITA = '#C4C4C4',
    YOUHAI = '#FF8288',
}

interface GarbageSummaryProps {
    type: GarbageType;
    data?: ThrowSumByGarbageTypeResp[];
}

const GarbageSummary = ({ type, data }: GarbageSummaryProps) => {
    let imgSrc = '',
        bucketSrc = '',
        bgSrc = '',
        color = '',
        count = 0,
        weight = 0;
    switch (type) {
        case GarbageType.KEHUISHOU:
            imgSrc = require('../../imgs/khsw.png');
            bucketSrc = require('../../imgs/bucket-khsw.png');
            bgSrc = require('../../imgs/khsw-bg.png');
            color = GarbageTypeColor.KEHUISHOU;
            count = data?.find?.(item => item.garbageTypeCode === 'KEHUISHOU')?.throwCount || 0;
            weight = data?.find?.(item => item.garbageTypeCode === 'KEHUISHOU')?.weight || 0;
            break;
        case GarbageType.CHUYU:
            imgSrc = require('../../imgs/cylj.png');
            bucketSrc = require('../../imgs/bucket-cylj.png');
            bgSrc = require('../../imgs/cylj-bg.png');
            color = GarbageTypeColor.CHUYU;
            count = data?.find?.(item => item.garbageTypeCode === 'CHUYU')?.throwCount || 0;
            weight = data?.find?.(item => item.garbageTypeCode === 'CHUYU')?.weight || 0;
            break;
        case GarbageType.QITA:
            imgSrc = require('../../imgs/qtlj.png');
            bucketSrc = require('../../imgs/bucket-qtlj.png');
            bgSrc = require('../../imgs/qtlj-bg.png');
            color = GarbageTypeColor.QITA;
            count = data?.find?.(item => item.garbageTypeCode === 'QITA')?.throwCount || 0;
            weight = data?.find?.(item => item.garbageTypeCode === 'QITA')?.weight || 0;
            break;
        case GarbageType.YOUHAI:
            imgSrc = require('../../imgs/yhlj.png');
            bucketSrc = require('../../imgs/bucket-yhlj.png');
            bgSrc = require('../../imgs/yhlj-bg.png');
            color = GarbageTypeColor.YOUHAI;
            count = data?.find?.(item => item.garbageTypeCode === 'YOUHAI')?.throwCount || 0;
            weight = data?.find?.(item => item.garbageTypeCode === 'YOUHAI')?.weight || 0;
            break;
        default:
            break;
    }

    return (
        <div className="garbage-summary" style={{ background: `url(${bgSrc})` }}>
            <div className="garbage-summary-bucket" style={{ background: `url(${bucketSrc})` }}>
                <img src={imgSrc} />
            </div>
            <p style={{ color }}>{type}</p>
            <p>
                <span>{count ?? 0}</span>次
            </p>
            <p>
                <span>{weight ?? 0}</span>kg
            </p>
        </div>
    );
};

function getBarOption(data: ThrowSumByDayAndPointResp[]) {
    const arr = data?.filter?.(item => item.day === moment().format('YYYY-MM-DD'));
    return {
        tooltip: {
            trigger: 'item',
        },
        legend: {
            top: 0,
            left: 'center',
            textStyle: {
                color: '#fff',
            },
        },
        grid: {
            top: 40,
            left: 30,
            right: 0,
            bottom: 50,
        },
        xAxis: {
            data: arr?.map?.(item => item.throwPointName),
            axisLabel: {
                color: '#DAF1FF',
                interval: 0,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            z: 10,
        },
        yAxis: {
            name: '单位：次',
            nameTextStyle: {
                color: '#fff',
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                color: '#fff',
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(255,255,255,0.2)',
                },
            },
        },
        series: [
            {
                name: '',
                type: 'bar',
                barWidth: 12,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#51F2FF' },
                            { offset: 1, color: '#1B89FF' },
                        ]),
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: '#56FCFF',
                            },
                        },
                    },
                },
                data: arr?.map?.(item => item.throwCount),
            },
        ],
    };
}

export function getDistributeChartData(data: ThrowSumByHourResp[]): Distribute1Props['data'] {
    return data.filter(item => item.date).map(item => {
        const [date, hour] = (item.date || '').split(' ');
        return {
            date,
            hour,
            value: item.throwCount || 0
        }
    })
}

const Left: React.FC<OverViewHotProps> = ({ classPrefix, id }) => {
    const [chartType, setChartType] = useState<'point' | 'hour'>('point');
    const sumByGarbageType = overViewService.throwSumByGarbageType({
        housingEstateId: id,
    });

    const sumByPoint = overViewService.throwSumByDayAndPoint({
        housingEstateId: id,
    });

    const sumByHour = overViewService.throwSumByHour({
        housingEstateId: id,
    });
    return (
        <div className={`${classPrefix}-hot`}>
            <VmSubTitle title="投放热度" />
            <div className={`${classPrefix}-hot-summary`}>
                <GarbageSummary type={GarbageType.KEHUISHOU} data={sumByGarbageType} />
                <GarbageSummary type={GarbageType.CHUYU} data={sumByGarbageType} />
                <GarbageSummary type={GarbageType.QITA} data={sumByGarbageType} />
                <GarbageSummary type={GarbageType.YOUHAI} data={sumByGarbageType} />
            </div>
            <div className={`${classPrefix}-hot-buttons`}>
                <VmButton
                    onClick={() => setChartType('point')}
                    name="点位分布"
                    style={{ marginRight: 10 }}
                    active={chartType === 'point'}
                />
                <VmButton
                    onClick={() => setChartType('hour')}
                    name="24h分布"
                    active={chartType === 'hour'}
                />
            </div>
            <div className={`${classPrefix}-hot-chart`}>
                {chartType === 'point' && (
                    <ReactCharts
                        option={getBarOption(sumByPoint || [])}
                        style={{ height: '100%', width: '100%' }}
                    />
                )}

                {chartType === 'hour' && <Distribute1 data={getDistributeChartData(sumByHour || [])}/>}
            </div>
        </div>
    );
};

export default Left;
