import { useMemo, useCallback, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import MyProgress from "@/components/mui/MyProgress";
import style from "./index.module.css";

import runTime from '../../../../assets/project/runTime.svg'
import jobCostImg from '../../../../assets/project/jobCost.svg'
import jobSue from '../../../../assets/project/jobSue.svg'
import jobFail from '../../../../assets/project/jobFail.svg'
import jobRun from '../../../../assets/project/jobRun.svg'
import jobCadence from '../../../../assets/project/jobCadence.svg'
import fileIcon from "@/assets/project/fileIcon.svg";
import dataSetIcon from "@/assets/project/dataSetIcon.svg";

type TaskCardProps = {
    id: string;
    name: string;
    creator: string;
    state: string;
    completeNum: number;
    totalNum: number;
    costTime: string;
    jobCost: number;
    outputs: Array<any>;
};

const TaskCard = (props: TaskCardProps) => {
    const { id, name, creator, state, completeNum, totalNum, costTime, jobCost, outputs } = props;
    const navigate = useNavigate();
    const randerOutputs = useMemo(() => {
        if (outputs) {
            let result = Object.keys(outputs);
            let arr = result.map((item: any) => {
                let type = "file";
                if (outputs[item].indexOf("dataset") !== -1) {
                    type = "dataset";
                }
                return {
                    name: item,
                    type,
                    path: outputs[item],
                };
            });
            return arr;
        } else {
            return [];
        }
    }, [outputs])
    // 结果文件跳转
    const goToProjectData = (path: string) => {
        const lastIndex = path.lastIndexOf("/");
        if (lastIndex !== -1) {
            path = path.slice(0, lastIndex + 1);
        }
        path = path.slice(12);
        if (path) {
            navigate(`/product/cadd/projectData`, {
                state: { pathName: path },
            });
        } else {
            navigate(`/product/cadd/projectData`, {
                state: { pathName: "/" },
            });
        }
    }
    // 跳转详情页
    const gotoDetail = (id: string) => {
        navigate(`/product/cadd/projectJobDetail`, {
            state: { taskId: id },
        });
    }
    // 渲染状态图标
    const renderStatusIcon = (data: string) => {
        switch (data) {
            case "RUNNING":
                return jobRun
            case "ABORTED":
                return jobCadence
            case "FAILED":
                return jobFail
            case "SUCCEEDED":
                return jobSue
            default:
                return jobCadence
        }
    }
    // 渲染状态
    const renderStatusText = (data: string) => {
        switch (data) {
            case "RUNNING":
                return '正在运行'
            case "ABORTED":
                return '运行终止'
            case "FAILED":
                return '运行失败'
            case "SUCCEEDED":
                return '运行成功'
            default:
                return '未知'
        }
    }
    // 渲染字体颜色
    const renderTextColor = (data: string) => {
        switch (data) {
            case "RUNNING":
                return "#1370FF";
            case "ABORTED":
                return "#C2C6CC";
            case "FAILED":
                return "#FF4E4E";
            case "SUCCEEDED":
                return "#0DD09B";
            default:
                return "#C2C6CC";
        }
    };
    // 渲染状态框背景颜色
    const renderBackgroundColor = (data: string) => {
        switch (data) {
            case "RUNNING":
                return "#EBF3FF";
            case "ABORTED":
                return "#F5F6F7";
            case "FAILED":
                return "#FFECE8";
            case "SUCCEEDED":
                return "#E8FFF1";
            default:
                return "#C2C6CC";
        }
    };
    //渲染进度条颜色
    const renderProgressColor = useCallback((data: any) => {
        switch (data) {
            case "RUNNING":
                return "info";
            case "ABORTED":
                return "disable";
            case "FAILED":
                return "error";
            case "SUCCEEDED":
                return "success";
            default:
                return "disable";
        }
    }, []);
    return <div className={style.cardBox}>
        <div className={style.cardLeft}>
            <div className={style.topLine}>
                <div className={style.taskName} onClick={() => gotoDetail(id)}>{name}</div>
                <div className={style.taskStatus} style={{ color: renderTextColor(state), background: renderBackgroundColor(state) }}>
                    <img src={renderStatusIcon(state)} alt="" className={style.statusImg} />
                    <span>{renderStatusText(state)}</span>
                </div>
            </div>
            <div className={style.taskCreator}>{creator}</div>
            <div className={style.taskProgress}>
                <div className={style.progressInfo}>
                    <div>Progress</div>
                    <div style={{ color: renderTextColor(state) }}>{completeNum + "/" + totalNum}</div>
                </div>
                <MyProgress color={renderProgressColor(state)} value={(completeNum / totalNum) * 100} />
            </div>
            <div className={style.bottomLine}>
                <img alt="" src={runTime} />
                <div className={style.bottomInfo}>{costTime}</div>
                <img alt="" src={jobCostImg} />
                <div className={style.bottomInfo}>{jobCost?.toFixed(2)}元</div>
            </div>
        </div>
        <div className={style.dividingLine}>
            <div className={style.arrow}></div>
        </div>
        <div className={style.cardRight}>
            {randerOutputs.length === 0 ? <div className={style.noResult}>暂无结果文件</div> :
                <div className={style.resultBox}>
                    {randerOutputs.map((item, index) => {
                        return <div key={index} className={style.result} onClick={() => goToProjectData(item.path)}>
                            <img
                                className={style.outputLeftImg}
                                src={
                                    item.type === "file" ? fileIcon : dataSetIcon
                                }
                                alt=""
                            />
                            {item.name}</div>
                    })}
                </div>
            }
        </div>
    </div>
}

export default TaskCard