import React, { Component } from "react";
import { isMobile } from "react-device-detect";

let leveldesign = {
  msFlexAlign: "center",
  alignItems: "center",
  msFlexPack: "justify",
  display: "flex",
  flexWrap: "wrap",
  clear: "both",
  marginLeft:"10px"
};

let levelitemdesign = {
  msFlexAlign: "center",
  alignItems: "center",
  display: "flex",
  msFlexPreferredSize: "auto",
  flexBasis: "auto",
  msFlexPositive: 0,
  flexGrow: 0,
  msFlexNegative: 0,
  flexShrink: 0,
  msFlexPack: "center",
  justifyContent: "center",
  textAlign: "center !important"
};
class ButtonSelect extends Component {
  constructor(props) {
    super(props),
      (this.state = {
        questionList: [],
        valueGet: ""
      });
  }
  componentDidMount() {
    let listlength = this.props.radioOption.length;
    let options = [];
    for (let i = 0; i < listlength; i++) {
      options.push(false);
    }
    this.setState({
      questionList: this.props.radioOption,
      optiondisable: options,
      listlength: listlength
    });
  }

  onChange(selected) {
    this.setState({ selected });
  }

  changeColor(index, value) {
    this.setState({ valueGet: value.value });
    let optionlist = [];

    for (let i = 0; i < this.state.listlength; i++) {
      if (index === i) {
        optionlist.push(true);
      } else {
        optionlist.push(false);
      }
    }
    this.setState({ optiondisable: optionlist });
    if (this.props.onChange) {
      this.props.onChange(
        index,
        value.value,
        this.props.fieldname,
        value.color
      );
    }
  }

  render() {
    return (
      <div>
        {this.props.fieldname && (
          <label style={{ fontSize:'1.3rem', color: "#969696", fontFamily:'lato', float:"left", paddingLeft:'9px', clear:'both' ,paddingBottom: 15,
    paddingTop: 10}}>
            {this.props.fieldname}
          </label>
        )}
        <nav style={leveldesign}>
          {this.state.questionList &&
            this.state.questionList.map((answerList, indexs) => (
              <div key={indexs} style={levelitemdesign}>
                <button
                  className="buttonselectclass"
                  style={{
                    width: 100,
                    height: 100,
                    //marginRight: "5px",
                    marginRight: isMobile ? 2 : 5,
                    marginBottom: "10px",
                    whiteSpace: "normal",
                    flexWrap: "wrap",
                    MozAppearance: "none",
                    WebkitAppearance: "none",
                    msFlexAlign: "center",
                    borderStyle: "solid",
                    WebkitBoxShadow: "none",
                    boxShadow: "none",
                    display: "-ms-inline-flexbox",

                    fontWeight: 600,
                    lineHeight: "1.5",
                    paddingBottom: "calc(0.375em - 1px)",

                    paddingTop: "calc(0.375em - 1px)",
                    position: "relative",
                    verticalAlign: "top",
                    WebkitTouchCallout: "none",
                    WebkitUserSelect: "none",
                    MozUserSelect: "none",
                    msUserSelect: "none",
                    userSelect: "none",
                    fontSize:13,

                    color: "#fff",
                    cursor: "pointer",
                    msFlexPack: "center",
                    justifyContent: "center",
                    padding: "15px",
                    // paddingLeft: '0.75em',
                    // paddingRight: '0.75em',
                    borderWidth: "1px",
                    textAlign: "center",
                    backgroundColor: answerList.color,
                    borderColor: answerList.color
                  }}
                  key={answerList.displayValue + "" + indexs}
                  onClick={this.changeColor.bind(this, indexs, answerList)}
                >
                  {answerList.displayValue}
                </button>
              </div>
            ))}
        </nav>
      </div>
    );
  }
}

export default ButtonSelect;
