import React from 'react';

function PhotopermissionsContainer({ onStepClick, labels, event_data }) {
    const accept_all_permissions = () => {
        document.getElementById( 'foto_socialmedia' ).checked = true;
        document.getElementById( 'foto_print' ).checked       = true;
        document.getElementById( 'foto_webseite' ).checked    = true;
        document.getElementById( 'foto_partner' ).checked     = true;
        document.getElementById( 'foto_intern' ).checked      = true;
        handle_next_step();
    }

    const handle_next_step = () => {
        onStepClick(8);

    }

    const handle_previous_step = () => {
        if (event_data.addons.length > 0 || event_data.registration_mode === 'solidarity') {
            onStepClick(6);
        } else {
            onStepClick(5);
        }
    }

    return (
        <div>
            <p class="phptopermission_container">
                <h3>{labels.photopermissions.headline}</h3>
            </p>

            <p>
                <input type="checkbox" name="foto[socialmedia]" value="active" id="foto_socialmedia"/>
                <label
                    htmlFor="foto_socialmedia">{labels.photopermissions.socialmedia}
                    </label><br/>
            </p>

            <p>
                <input type="checkbox" name="foto[print]" value="active" id="foto_print"/>
                <label
                    htmlFor="foto_print">{labels.photopermissions.printmedia}
                </label><br/>
            </p>

            <p>
                <input type="checkbox" name="foto[webseite]" value="active" id="foto_webseite"/>
                <label
                    htmlFor="foto_webseite">{labels.photopermissions.websites}
                </label><br/>
            </p>

            <p>
                <input type="checkbox" name="foto[partner]" value="active" id="foto_partner"/>
                <label
                    htmlFor="foto_partner">{labels.photopermissions.partners}
                </label><br/>
            </p>

            <p>
                <input type="checkbox" name="foto[intern]" value="active" id="foto_intern"/>
                <label
                    htmlFor="foto_intern">{labels.photopermissions.internalpurpose}
                </label><br/>
            </p>

            <input class="acceptallbutton" type="button"
                   value={labels.photopermissions.acceptall}
                   onClick={() => accept_all_permissions()}
            />
            <input type="button" value={labels.common.go_back} onClick={() => handle_previous_step()} /> &nbsp;
            <input type="button" value={labels.common.next} onClick= {()  => handle_next_step()} />
        </div>
    );
}

export default PhotopermissionsContainer;