const {useEffect, useState} = React;
const SubscriptionVoucherBox = ({subscriptionTypeConfig, voucherType, voucher, voucherSubscriptionType, handleSubscriptionSelect}) => {

    const [link, setLink] = useState();
    const descriptionArray = subscriptionTypeConfig.description.split(';');

    useEffect(() => {
        setLink('/mam-voucher/' + voucherSubscriptionType +'?voucher_code=' + voucher);
    }, [voucherType]);

    const description = useMemo(() => {
        return descriptionArray.indexOf('+') > 0 ? (
            <React.Fragment>
                <p dangerouslySetInnerHTML={{__html: descriptionArray.shift()}}></p>
                <div className="category__divider">
                    <span>Plus</span>
                </div>
                <ul>
                    {descriptionArray.slice(1).map(item => {
                        return (<li dangerouslySetInnerHTML={{__html: item}}></li>);
                    })}
                </ul>
            </React.Fragment>
        ) : (
            <React.Fragment>
                <ul>
                    {descriptionArray.map(item => {
                        return (<li dangerouslySetInnerHTML={{__html: item}}></li>);
                    })}
                </ul>
            </React.Fragment>
        );
    }, [subscriptionTypeConfig]);

    return (
        <div>
            <h2>VAŠE PŘEDPLATNÉ</h2>
            <div className="category__inner">
                <div className="category__favourite">
                    <p>Oblíbené</p>
                </div>
                <h3>{subscriptionTypeConfig.name}</h3>
                {description}
            </div>
            <div className="category__buttons single">
                <div className="category__buttons__button">
                    {!subscriptionTypeConfig.subscription_type_products ?
                        <a href={link} className="btn btn-primary btn-pick-subscription" data-subscription-type-code={subscriptionTypeConfig.code}>Pokračovat</a> :
                        <a className="btn btn-primary" onClick={() => handleSubscriptionSelect('subscription_type', subscriptionTypeConfig.code, true)}>Pokračovat</a>
                    }
                </div>
            </div>
        </div>
    );

}