// Define styles

const styles = {
    container: {
        backgroundColor: 'white',
        fontFamily: 'Helvetica',
        //height: "150px",
        margin: '0 auto 0 auto',
        width: '90%'
    },
    bucketRow: {
        width: '100%',
        height: "75px",
        margin: '5% 0% 0% 0%',
        position: 'relative'
    },
    headerRow: {
        width: '100%',
        height: "5px",
        margin: '0% 0% 0% 0%',
        position: 'relative'
    },
    slipRow: {
        width: '100%',
        height: "25px",
        margin: '4% 0% 0% 0%',
        position: 'relative'
    },
    slip: {
        position:"absolute",
        left:"44%", // Was 44%
        height: "25px",
        width: "15%", // Was 15%
        minWidth: "45px",
        background: "white",
        border: "1px solid grey",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        color: 'black',
        //fontSize: "200%",
        fontWeight: "50",
    }
};

// Create class
class ShellGame extends React.Component {
  constructor(props) {
      super(props);
      this.state = {wtp: -100}
      // Bind Functions
  }

  getBuckets() {
    const buckets = Array.from({length: this.props.payoffs.length});
    
    if (buckets.length == 2) {
        buckets[0] = "L"
        buckets[1] = "R"
    } 
    else {
        buckets.map( (val, idx) => {
            buckets[idx] = idx
            return (<></>);
        })
    }

    let width = (90 / buckets.length)// Same for all shells

    let addId = ""

    if (this.props.verification == true) {
        addId="_verify"
    }
    
    return (
        <div className="row" style={ styles.bucketRow } >
            { 
            buckets.map( (val, idx) => {
                let left = 5 * (idx + 1) + width * idx
                const stylesContainer = Object.assign({}, {width: width + "%", left: parseInt(left) + "%", maxHeight: "100%", top: "10%"} )

                return (
                    <>
                    <div 
                        key={(idx+1).toString()}
                        id = {"shell_" + idx + addId}
                        className="shellContainer d-flex justify-content-center align-items-center grayscale" style={stylesContainer}>
                        <img src='/static/img/shell.png' style={{maxWidth:"100%", maxHeight: "100%"}}/>
                        {/*
                        <div className="shellText">
                            {val}
                        </div>
                        */}
                    </div>
                    </>
                );
            })
            }
        </div>
    );
    }

    getPayoffSlips() {
        const slips = this.props.payoffs;

        const height = 30 * slips.length + "px"
        const rowStyle = Object.assign({}, styles.slipRow, {height:height} );

        let addId = ""

        if (this.props.verification == true) {
            addId="_verify"
        }

        return (
            <>
            <div className="row" style={ rowStyle } >
                { 
                slips.map( (val, idx) => {
                    let textToShow = ""
                    
                    if (isNaN(val)) {
                        textToShow = val
                    } else {
                        textToShow = " £" + val.toFixed(2)
                    }

                    let top = (100 / slips.length) * idx + "%"
                    const slipStyle = Object.assign({}, styles.slip, {top:top} );
                    return (
                            <div id={"slip_" + idx + addId} className="d-flex payoffSlip" style={slipStyle}>
                                {textToShow}
                            </div>
                    )}
                    )}
            </div>
            </>
        );
    }

    getColumnHeaders() {
        const numElements = this.props.payoffs.length;
        const width = 90 / numElements;
        const leftArray = {}

        for (let i=0; i<numElements;i++) {
            let left = 5 * (i + 1) + width * i
            leftArray[i] = left + "%"
        }

        return(
            <>
            <div className="row" style={ styles.headerRow  } >
                
                    <div id="leftShellText" className="d-flex justify-content-center d-none" 
                        style={{left:leftArray[0], width: width + "%", position:'absolute'}}>
                        Left shell
                    </div>
                    <div id="rightShellText" className="d-flex justify-content-center d-none"
                        style={{left:leftArray[1], width: width + "%",position:'absolute'}}>
                        Right shell
                    </div>
                
            </div>
            </>
        )
    }

  render() {
      return (
        <div className="container" style={ styles.container } >
            { this.getColumnHeaders() }
            { this.getBuckets() }
            { this.getPayoffSlips() }
        </div>
    )
  }
}