const CarritoItem = ({ item, ind, eliminar }) => {

    const useState = React.useState, useEffect = React.useEffect;

    const [beneficiaryTypes, setBeneficiaryTypes] = useState([]);
    const [cartQuestions, setCartQuestions] = useState([]);

    useEffect(() => {

        let beneficiarys = []
        if (item.BeneficiaryType) {
            item.BeneficiaryType.forEach(elm => {
                item.Product.Configuration.Beneficiary.Beneficiaries.some(itmBfy => {
                    if (itmBfy.Id === elm.Id) {
                        itmBfy.Quantity = elm.Quantity
                        beneficiarys.push(itmBfy);
                        return true;
                    }
                });
            });
        }

        let cartQuestionsItems = []
        if (item.OrderLine.CartQuestions) {
            item.Product.Configuration.CartQuestions.forEach((itmCft, indx) => {
                itmCft.Values.some(itm => {
                    if (itm.Id === item.OrderLine.CartQuestions[indx].Value) {
                        itm.nameSup = itmCft.Name
                        cartQuestionsItems.push(itm);
                        return true;
                    }
                });
            });
        }

        setBeneficiaryTypes(beneficiarys);
        setCartQuestions(cartQuestionsItems);
    }, []);

    return (<>
        <div className={item.Available ? "item" : "item inAct"}>
            <div className="itemElm" onClick={() => eliminar(ind)} >
                <svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 24 24"  >
                    <path d="M19 7a1 1 0 0 0-1 1v11.191A1.92 1.92 0 0 1 15.99 21H8.01A1.92 1.92 0 0 1 6 19.191V8a1 1 0 0 0-2 0v11.191A3.918 3.918 0 0 0 8.01 23h7.98A3.918 3.918 0 0 0 20 19.191V8a1 1 0 0 0-1-1ZM20 4h-4V2a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v2H4a1 1 0 0 0 0 2h16a1 1 0 0 0 0-2ZM10 4V3h4v1Z" fill="#000000"></path>
                    <path d="M11 17v-7a1 1 0 0 0-2 0v7a1 1 0 0 0 2 0ZM15 17v-7a1 1 0 0 0-2 0v7a1 1 0 0 0 2 0Z" fill="#000000"></path>
                </svg>
            </div>
            <div className="itemImg">
                <a href={item.Url}>
                    <img src={item.Img} />
                </a>
            </div>
            <div className="itemDesc">
                {
                    item.Available ? null : <div className="itemNotAvailable">
                        <p>Producto no disponible, verificar disponibilidad</p>
                    </div>
                }
                <div className="itemTitle">
                    <h3><a href={item.Url}>{item.Product.Name}</a></h3>
                    <p>{item.OrderLine.Quantity} x {item.Price} €</p>
                </div>
                <div className="itemInfo">
                    <p>Fecha {item.OrderLine.StartDate} x {item.OrderLine.NumberDays} dias</p>
                    {
                        item.OrderLine.StartTime ? <p>Hora {`${item.OrderLine.StartTime.Hour}:${item.OrderLine.StartTime.Minute}`}</p> : null
                    }
                    {
                        item.OrderLine.TimePerDay ? <p>Tiempo {`${item.OrderLine.TimePerDay.Hour}:${item.OrderLine.TimePerDay.Minute}`}</p> : null
                    }
                    {
                        item.OrderLine.AccessCredentialIdentifier ? <p>{item.Product.Configuration.AccessCredential.Name}: {item.OrderLine.AccessCredentialIdentifier}</p> : null
                    }
                    {
                        item.OrderLine.NumberSlots ? <p>Nº de personas {item.OrderLine.NumberSlots}</p> : null
                    }
                </div>
                <div className="con">
                    {
                        beneficiaryTypes.length > 0 ? <fieldset>
                            <legend><h4>Beneficiarios</h4></legend>
                            <ul>
                                {
                                    beneficiaryTypes.map(e => <li key={e.Id}>
                                        <h6>{e.Name} x {e.Quantity}</h6>
                                    </li>)
                                }
                            </ul>
                        </fieldset> : null
                    }
                    {
                        cartQuestions.length > 0 ? <fieldset>
                            <legend><h4>Variaciones</h4></legend>
                            <ul>
                                {
                                    cartQuestions.map(e => <li key={e.Id}>
                                        <h6>{e.nameSup}: {e.Name}</h6>
                                    </li>)
                                }
                            </ul>
                        </fieldset> : null
                    }
                </div>



            </div>


        </div>
    </>)
}