import './card-proj-type.css';
import {ICardProj, ICardProjChargeLine} from "../../interfaces/proj/ICardProj.ts";
import {Checkbox} from 'antd';
import {useState} from "react";
import {ProjAdditionalType} from "../../interfaces/proj/IProj.ts";
import ProjCardHeadBg from '../../assets/proj-card-head-bg.png';

export default function CardProjType(props: ICardProj) {

    const [chargeAmount, setChargeAmount] = useState(0);
    const [pkg, setPkg] = useState(false);
    const [videoDemo, setVideoDemo] = useState(false);

    const renderContents = (lineIndex: number, contents: string[]) => {
        return contents.map((item, index) => <li key={`content_${lineIndex}_${index}`}>
            <span className="index">{index + 1}</span>
            <span className="title">{item}</span>
        </li>);
    }

    const renderLines = () => {
        return props.bodyLineArray.map((line, index) => {
            return (
                <div className="line" key={`line_${index}`}>
                    <div className="line-title">{line.title}</div>
                    <div className="line-content">
                        <ul>{renderContents(index, line.contents)}</ul>
                    </div>
                </div>
            )
        })
    }

    const onChargeChange = (checked: boolean, line: ICardProjChargeLine) => {
        if (checked) {
            if (line.id == ProjAdditionalType.PKG) {
                setPkg(true);
            } else if (line.id == ProjAdditionalType.VIDEO_DEMO) {
                setVideoDemo(true);
            }
            setChargeAmount(chargeAmount + line.price);
        } else {
            if (line.id == ProjAdditionalType.PKG) {
                setPkg(false);
            } else if (line.id == ProjAdditionalType.VIDEO_DEMO) {
                setVideoDemo(false);
            }
            setChargeAmount(chargeAmount - line.price);
        }
    }

    const renderCharge = () => {
        if (!props.chargeLineArray || props.chargeLineArray.length == 0) {
            return <></>
        }
        return (
            <>
                <div className="proj-charge">
                    {
                        props.chargeLineArray.map((line, index) => (
                            <div className="line" key={`charge_${index}`}>
                                <Checkbox onChange={(e) => {
                                    onChargeChange(e.target.checked, line);
                                }}>{line.title}</Checkbox>
                            </div>
                        ))
                    }
                </div>
            </>
        )
    }

    const renderBuyBtn = () => {
        return props.buyArray.map((buy, index) => {
            return (
                <div className="buy-btn" key={`buy_${index}`}>
                    <div className="price">{buy.label}{(buy.price + chargeAmount) / 100} 元</div>
                    <hr/>
                    <div className="buy">
                        <button onClick={() => {
                            buy.handleClick(props.head, {
                                pkg: pkg,
                                videoDemo: videoDemo
                            });
                        }}>购买</button>
                    </div>
                </div>
            )
        })
    }

    return (
        <div className="proj">
            <div className="proj-head" style={{backgroundImage: `url(${ProjCardHeadBg})`}}>
                <div>{props.head}</div>
            </div>
            <div className="proj-body">
                <div>{renderLines()}</div>
                {renderCharge()}
            </div>
            <div className="proj-foot">{renderBuyBtn()}</div>
        </div>
    )
}