import React from 'react';
import { Modal, Button, Form, Col } from 'react-bootstrap';
import Fetch from 'components/Fetch.js';

class ContainersDialog extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            possibles: [],
            checked: [],
            pulling: false
        };
    }

    handleClose = () => this.props.onHide();

    prepare() {
        this.setState({
            checked: [...this.props.containers],
            pulling: false
        });
        Fetch.fetchPossibleContainers(p => this.setState({ possibles: p }));
    }
    proceed() {
        this.setState({ pulling: true });

        const added = this.state.checked.filter(c => !this.props.containers.includes(c));
        if (added.length > 0) {
            Fetch.pullContainers(added, e => {
                this.props.containersChanged(e);
                this.handleClose();
            });
        }

        const removed = this.props.containers.filter(c => !this.state.checked.includes(c));
        if (removed.length > 0) {
            Fetch.deleteContainers(removed, e => {
                this.props.containersChanged(e);
                this.handleClose();
            });
        }

        if (removed.length === 0 && added.length === 0) {
            this.handleClose();
        }
    }

    changeDownloadList(k, name) {
        if (k.target.checked)
            this.setState({ checked: this.state.checked.concat([name]) });
        else
            this.setState({ checked: this.state.checked.filter(n => n !== name)});
    }

    render() {
        return (
            <Modal show={this.props.show} onHide={this.handleClose} onShow={() => this.prepare()} dialogClassName="modal-60w">
                <Modal.Header closeButton>
                    <Modal.Title>Choose your compilers</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    Choose which compilers to handle.
                    <br />
                    <Form>
                        <Form.Row>
                            <Form.Group as={Col} controlId="clangForm">
                                {this.state.possibles.filter(p => p.startsWith('clang')).map(p => <Form.Check type="checkbox" label={p} id={p} key={p} onChange={k => this.changeDownloadList(k, p)} defaultChecked={this.props.containers.includes(p)} />)}
                            </Form.Group>

                            <Form.Group as={Col} controlId="gccForm">
                                {this.state.possibles.filter(p => p.startsWith('gcc')).map(p => <Form.Check type="checkbox" label={p} id={p} key={p} onChange={k => this.changeDownloadList(k, p)} defaultChecked={this.props.containers.includes(p)}/>)}
                            </Form.Group>
                        </Form.Row>
                    </Form>
                </Modal.Body>
                <Modal.Footer>
                    <Button variant="primary" onClick={() => this.proceed()} disabled={this.state.pulling}>Proceed</Button>
                    <Button variant="light" onClick={this.handleClose} disabled={this.state.pulling}>Cancel</Button>
                </Modal.Footer>
            </Modal>
        );
    }
}

export default ContainersDialog;

@@ -335,38 +335,157 @@
  %7D;%0A
-    %7D%0A%0A    handleClose = () =%3E
+%0A        this.waitAdd = false;%0A        this.waitRemove = false;%0A    %7D%0A%0A    handleClose() %7B%0A        if (!this.waitAdd && !this.waitRemove)%0A           
  thi
@@ -501,16 +501,22 @@
 nHide();
+%0A    %7D
 %0A%0A    pr
@@ -629,32 +629,95 @@
 lse%0A        %7D);%0A
+        this.waitAdd = false;%0A        this.waitRemove = false;%0A
         Fetch.fe
@@ -779,24 +779,25 @@
  %7D));%0A    %7D%0A
+%0A
     proceed(
@@ -957,32 +957,65 @@
 d.length %3E 0) %7B%0A
+            this.waitAdd = true;%0A
             Fetc
@@ -1037,32 +1037,70 @@
 s(added, e =%3E %7B%0A
+                this.waitAdd = false;%0A
                 
@@ -1313,32 +1313,68 @@
 d.length %3E 0) %7B%0A
+            this.waitRemove = true;%0A
             Fetc
@@ -1400,32 +1400,73 @@
 removed, e =%3E %7B%0A
+                this.waitRemove = false;%0A
                 
@@ -1565,70 +1565,8 @@
  %7D%0A%0A
-        if (removed.length === 0 && added.length === 0) %7B%0A    
     
@@ -1589,26 +1589,16 @@
 lose();%0A
-        %7D%0A
     %7D%0A%0A 
@@ -3279,15 +3279,55 @@
 ng%7D%3E
-Proceed
+%7Bthis.state.pulling ? %22Proceeding%22 : %22Proceed%22%7D
 %3C/Bu

Fix dialog closing too soon when both adding and removing containers.