import './proj-edit.css';
import {Link, useNavigate, useParams} from "react-router-dom";
import {Breadcrumb, Button, message} from "antd";
import StepProjEdit from "../../components/step/StepProjEdit.tsx";
import CardProjEdit from "../../components/card/CardProjEdit.tsx";
import {Process} from "../../interfaces/step/IStepProj.ts";
import CardProjLoading from "../../components/card/CardProjLoading.tsx";
import CardProjResult from "../../components/card/CardProjResult.tsx";
import CardProjDownload from "../../components/card/CardProjDownload.tsx";
import CardProjJump from "../../components/card/CardProjJump.tsx";
import {useEffect, useState} from "react";
import {get} from "../../util/AjaxUtils.ts";
import {EditStepEnum, IProjEdit} from "../../interfaces/card/ICardProj.ts";


export default function ProjEdit() {
    const nav = useNavigate();
    const pathParams = useParams();

    const [messageApi, contextHolder] = message.useMessage();
    const [editStepArray, setEditStepArray] = useState<IProjEdit[]>([]);
    const [configArray, setConfigArray] = useState<IProjEdit[]>([]);
    const [isAllStepEdited, setIsAllStepEdited] = useState(false);
    const [isAllConfig, setIsAllConfig] = useState(false);
    const [canGenerate, setCanGenerate] = useState(false);
    const height = window.innerHeight - 240;

    const renderEditStep = (editSteps: any[]) => {
        const editStepArray: IProjEdit[] = [];
        editStepArray.push(
            {
                title: '标题简介',
                desc: '完善代码、样式类型和详细介绍等内容',
                step: 1,
                status: editSteps[0].editStatus,
                handleEdit() {
                    nav(`/proj-edit/step1/${pathParams.projId}`)
                }
            },
            {
                title: '基本信息',
                desc: '完善项目简介、编程语言、版本、公司等内容',
                step: 2,
                status: editSteps[1].editStatus,
                handleEdit() {
                    nav(`/proj-edit/step2/${pathParams.projId}`)
                }
            },
            {
                title: '软件功能特点',
                desc: '请完善软件功能特点',
                step: 3,
                status: editSteps[2].editStatus,
                handleEdit() {
                    nav(`/proj-edit/step3/${pathParams.projId}`)
                }
            },
            {
                title: '著作人信息',
                desc: '请完善著作人相关信息',
                step: 4,
                status: editSteps[3].editStatus,
                handleEdit() {
                    nav(`/proj-edit/step4/${pathParams.projId}`)
                }
            },
            {
                title: '申请人信息',
                desc: '请完善申请人信息',
                step: 5,
                status: editSteps[4].editStatus,
                handleEdit() {
                }
            },
            {
                title: '选择登录页面',
                desc: '选择软件的登录页面模板',
                step: 6,
                status: editSteps[5].editStatus,
                handleEdit() {
                }
            }
        )
        setEditStepArray(editStepArray);
    }

    const renderSetting = () => {
        const configArray: IProjEdit[] = [];
        configArray.push(
            {
                title: '登录界面设置',
                desc: '请对登录界面完成个性化设置',
                step: 1,
                btnName: '设置',
                status: EditStepEnum.UN_EDIT,
                handleEdit() {
                }
            },
            {
                title: '系统菜单管理',
                desc: '请对系统菜单进行设置',
                step: 2,
                btnName: '设置',
                status: EditStepEnum.UN_EDIT,
                handleEdit() {
                }
            },
            {
                title: '菜单顺序',
                desc: '调整菜单顺序',
                step: 3,
                btnName: '设置',
                status: EditStepEnum.UN_EDIT,
                handleEdit() {
                }
            }
        )
        setConfigArray(configArray);
    }

    useEffect(() => {
        get({
            messageApi: messageApi,
            url: `/api/proj/get/${pathParams.projId}`,
            onSuccess({data}) {
                renderEditStep(data.editSteps);
                renderSetting();
            }
        })
    }, [])

    return (
        <>
            {contextHolder}
            <Breadcrumb
                items={[
                    {title: <Link to={'/'}>首页</Link>},
                    {title: <Link to={'/proj-create'}>创建项目</Link>},
                    {title: '编辑项目'},
                ]}
            />
            <div className="proj-edit" style={{height: `${height}px`}}>
                <StepProjEdit step={1} process={Process.COMPLETE} descTitle="完善信息"
                              descDetail="完善项目的基本信息"
                              hasNext={true}>
                    {
                        editStepArray.map((item, index) => {
                            return <CardProjEdit key={`editStep-${index}`}
                                                 title={item.title}
                                                 desc={item.desc}
                                                 status={item.status}
                                                 handleEdit={item.handleEdit}
                            />
                        })
                    }

                </StepProjEdit>
                <StepProjEdit step={2} process={Process.PROCESSING} descTitle="功能设置"
                              descDetail="设置系统的菜单功能" hasNext={true}>
                    {
                        configArray.map((item, index) => {
                            return <CardProjEdit key={`config-${index}`}
                                                 title={item.title}
                                                 desc={item.desc}
                                                 btnName={item.btnName}
                                                 status={item.status}
                                                 handleEdit={item.handleEdit}
                            />
                        })
                    }
                    <CardProjJump title="预览系统"
                                  desc="点击查看预览系统"
                                  handleJump={() => {
                                      nav('/agent-select/2');
                                  }}
                    />
                </StepProjEdit>
                <StepProjEdit step={3} process={Process.PENDING} descTitle="资料生成" hasNext={true}>
                    <CardProjEdit title="资料生成"
                                  desc="生成软著所需要的资料，此操作后项目无法再次编辑"
                                  btnName="生成"
                                  status={EditStepEnum.UN_EDIT}
                                  canBtnClick={canGenerate}
                                  handleEdit={() => {
                                      console.log('编辑')
                                  }}
                    />
                    <CardProjLoading title="正在排队"
                                     desc="资料正在排队，预计等待600秒"
                    />
                    <CardProjResult title="生成成功"
                                    isSuccess={true}
                                    handleFeedback={() => {
                                        console.log('反馈')
                                    }}
                    />
                </StepProjEdit>
                <StepProjEdit step={4} process={Process.PENDING} descTitle="资料下载">
                    <CardProjDownload title="软件基本信息"
                                      desc="请完善软件的介绍，详细介绍等基本信息"
                                      handleDownload={() => {
                                          console.log('下载')
                                      }}
                    />
                    <CardProjJump title="跳转"
                                  desc="请完善软件的介绍，详细介绍等基本信息"
                                  handleJump={() => {
                                      nav('/agent-select/2');
                                  }}
                    />
                </StepProjEdit>
            </div>
            <div className="btn-container">
                <Button size="large" style={{
                    width: '200px',
                    fontSize: '14px',
                    backgroundColor: 'var(--color-primary)',
                    color: 'var(--color-light)'
                }} onClick={() => {
                    nav(-1);
                }}>返回</Button>
            </div>

        </>
    )
}