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.png1';1
import serveImg from '../../static/serve.png'
import useImg from '../../static/use.png'
import leftImg from '../../static/createPro/left.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 renderNewContents = (lineIndex: number, contents: string[]) => {
        return contents.map((item, index) => <li key={`content_${lineIndex}_${index}`}>
            <span className="newIndex">
                <img src={leftImg} alt="" />
            </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> */}
                    <img src={serveImg} className='seruseImg' alt="" />
                    <div className="line-content">
                        <ul>{renderNewContents(index, line.contents)}</ul>
                    </div>
                </div>
            )
        })
    }
    const renderNew = () => {
        return props.newArray.map((line, index) => {
            return (
                <div className="line useline" key={`line_${index}`}>
                    {/* <div className="line-title">{line.title}</div> */}
                    <img src={useImg} className='seruseImg' alt="" />
                    <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="chargeline" key={`charge_${index}`}>
                                <Checkbox onChange={(e) => {
                                    onChargeChange(e.target.checked, line);
                                }}>
                                    <span className='chargeCon'>{line.title}</span>
                                </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
                            });
                        }}
                            style={{
                                cursor: props.isClickable == 1 ? 'pointer' : 'not-allowed'
                            }}
                            disabled={props.isClickable == 1 ? false : true}
                        >购买</button>
                    </div>
                </div>
            )
        })

    }


    // const lprice = props.buyArray[0].price
    // const llabel = props.buyArray[0].label
    // return (
    //     <div className='two-buy-btn' >
    //         <div className='one-buy-btn'>
    //             <div className="twoprice">
    //                 {llabel}{(lprice) / 100} 元
    //             </div>
    //             <div className="twobuy">
    //                 <button onClick={() => {
    //                     props.buyArray[0].handleClick(props.head, {
    //                         pkg: pkg,
    //                         videoDemo: videoDemo
    //                     });
    //                 }}>购买</button>
    //             </div>
    //         </div>
    //         <div className='one-buy-btn'>
    //             <div className="twoprice">
    //                 {llabel}{(lprice) / 100} 元
    //             </div>
    //             <div className="twobuy">
    //                 <button onClick={() => {
    //                     props.buyArray[0].handleClick(props.head, {
    //                         pkg: pkg,
    //                         videoDemo: videoDemo
    //                     });
    //                 }}>购买</button>
    //             </div>
    //         </div>
    //     </div>
    // )





    // 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" style={{ display: props.isShow == 1 ? 'block' : 'none',  }}>
                <div className='projTop'>
                    {/* <div className="proj-head" style={{ backgroundImage: `url(${ProjCardHeadBg})` }}> */}
                    <div className="proj-head">
                        <div>{props.head}</div>
                    </div>
                    <div className="proj-body">
                        <div>{renderLines()}</div>
                        <div>{renderNew()}</div>
                        {renderCharge()}
                    </div>
                </div>
                <div className="proj-foot">{renderBuyBtn()}</div>
            </div>
    
    )
}