// Define styles

const smallStyles = {
    container: {
        backgroundColor: 'white',
        fontFamily: 'Helvetica',
        //height: "150px",
        width: '95%',
        margin: 0,
        padding: 0,
    },
    bucketRow: {
        width: '100%',
        height: "30px",
        margin: 0,
        position: 'relative'
    },
    slipRow: {
        width: '100%',
        height: "25px",
        margin: 0,
        position: 'relative',
        marginBottom: '10px',
    },
    slip: {
        marginTop: '2%',
        padding:0,
        background: "white",
        border: "1px solid grey",
        justifyContent: "center",
        alignItems: "center",
        color: 'black',
    }
};

// Create class
class SmallShellGame extends React.Component {
  constructor(props) {
      super(props);
      // Bind Functions
  }

  getBuckets() {
    const buckets = Array.from({length: this.props.payoffs.length});
    
    let width = (90 / buckets.length)// Same for all shells
    return (
        <div className="row" style={ smallStyles.bucketRow } >
            { 
            buckets.map( (val, idx) => {
                let left = 5 * (idx + 1) + width * idx
                const stylesContainer = Object.assign({}, {
                    width: width + "%", 
                    left: parseInt(left) + "%", 
                    maxHeight: "100%", 
                    top: "0%",
                    padding:0,
                    } )

                return (
                    <>
                    <div 
                        key={(idx+1).toString()}
                        className="shellContainer d-flex justify-content-center align-items-center" 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 = 20 * slips.length + "px"
        const rowStyle = Object.assign({}, smallStyles.slipRow, {height:height} );

        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({}, smallStyles.slip, {top:top} );
                    return (
                            <div className="
                                col-6 offset-3
                                d-flex" style={slipStyle}>
                                {textToShow}
                            </div>
                    )}
                    )}
            </div>
            </>
        );
    }

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