const SubscriptionGiftPick = ({handleFieldChange, active, setActive, subscriptionTypeCode, form}) => {

    const [products, setProducts] = useState([]);
    const [orderLink, setOrderLink] = useState();

    useEffect(() => {

        setProducts([]);

        if (!subscriptionTypeCode) {
            return;
        }

        let link = buildModalLink()
        setOrderLink(link);

        fetch(
            '/api/v1/subscriptions/list-products',
            {
                headers: {
                    'Content-Type': 'application/json'
                },
                method: 'POST',
                body: JSON.stringify({
                    subscription_type_code: subscriptionTypeCode,
                    limit: 3
                })
            }
        )
            .then(response => response.json())
            .then(result => {

                if (!result.products || !result.products.length) {
                    throw new Error();
                }

                setProducts(result.products);

            })
            .catch(() => window.location.href = link);

    }, [active]);


    const buildModalLink = () => {
        let link = form.funnel_url_key + '/' + subscriptionTypeCode;
        if (subscriptionTypeCode === 'kmenta') {
            link = '/kmenta/kmenta';
        }

        return link;
    }

    const renderProduct = (product) => {
        return (
            <div className="col-xl-4 col-md-4 col-sm-6">
                <div className="category category-gift">
                    <div className="category__inner">
                        <div className="category__img">
                            <img src={product.image} alt="image" />
                        </div>
                        <h3>{product.name}</h3>
                        <h4>{product.description}</h4>
                        <div className="category__buttons single">
                            <div className="category__buttons__button">
                                <a href={orderLink} onClick={() => handleFieldChange('product_id', product.id)} className="btn btn-primary btn-pick-subscription mx-auto" data-subscription-type-code={subscriptionTypeCode}>Vybrat</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        )
    }

    return products.length ? (
        <div className={`modal bg-opacity-25 bg-black ${active ? 'd-block': ''}`} tabIndex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div className="modal-dialog modal-dialog-centered modal-xl">
                <div className="modal-content">
                    <div className="modal-header">
                        <span className="modal-title fs-5" id="exampleModalLabel">
                            Výběr dárku
                        </span>
                        <button type="button" className="btn-close" onClick={() => setActive(false)}></button>
                    </div>
                    <div className="modal-body">
                        <div className="subscription__gift">
                            <div className="row w-100 ms-0 me-0 mb-5">
                                {products.map(renderProduct)}
                            </div>
                            { subscriptionTypeCode !== 'kmenta' && (
                                <div className="subscription__gift__nav mt-3">
                                    <a href={orderLink} className="btn btn-default">Nechci dárek, děkuji</a>
                                </div>
                            ) }
                        </div>
                    </div>
                </div>
            </div>
        </div>
    ) : null;

}