import './step-proj-edit.css';
import {IStepProj, Process} from "../../interfaces/step/IStepProj.ts";
import {CheckOutlined} from "@ant-design/icons";

export default function StepProjEdit(props: IStepProj) {

    const height = window.innerHeight - 390;

    const renderStepNo = () => {
        if (props.process == Process.COMPLETE) {
            return (
                <div className="no complete">
                    <CheckOutlined/>
                </div>
            )
        } else if (props.process == Process.PROCESSING) {
            return <div className="no processing">{props.step}</div>
        }
        return (
            <div className="no pending">
                {props.step}
            </div>
        )
    }

    const renderStepDesc = () => {
        if (props.process != Process.PENDING) {
            return (
                <div className="desc">
                    <div className="title">{props.descTitle}</div>
                    <div className="detail">{props.descDetail}</div>
                </div>
            )
        }
        return (
            <div className="desc pending">
                <div className="title">{props.descTitle}</div>
                <div className="detail">{props.descDetail}</div>
            </div>
        )
    }

    const renderStepLine = () => {
        if (!props.hasNext) {
            return <></>
        }
        if (props.process == Process.COMPLETE) {
            return <div className="step-line step-line-complete"></div>
        }
        return <div className="step-line"></div>
    }

    return (
        <div className="step-proj">
            <div className="step">
                {renderStepNo()}
                {renderStepDesc()}
                {renderStepLine()}
            </div>
            <div className="step-card" style={{maxHeight: `${height - 20}px`}}>
                <div className="step-card-list">{props.children}</div>
            </div>
        </div>
    )
}