import React, { Component } from "react";

export class ToggleButton extends Component {

  state={
    surah:true,
    chapter:false,
    checkBtn:true
  }

  toggleChapter = ()=>{
    
    this.setState({
      surah:false,
      chapter:true,
      checkBtn:false
    })
  }

  toggleSurah = ()=>{
    
    this.setState({
      surah:true,
      chapter:false,
      checkBtn:true
    })
  }



  render() {

    const showSurah = (
      <div className="row d-flex justify-content-center mt-3">
              <div className="col-sm-4">
                <div className="card" style={{ boxShadow: "1px 2px 3px rgba(0, 0, 0, .1)" }}>
                  <div className="card-body m-auto">
                    <p>
                      Al-Faatiha <span className="text-success">(الفاتحة)</span>{" "}
                      <span className="text-info">The Opener</span>
                    </p>
                    <small>Details: Makkan / Ayat: 7 / Num: 1</small>
                  </div>
                </div>
              </div>

              <div className="col-sm-4">
                <div className="card" style={{  boxShadow: "1px 2px 3px rgba(0, 0, 0, .1)" }}>
                  <div className="card-body m-auto">
                    <p>
                      Al-Faatiha <span className="text-success">(الفاتحة)</span>{" "}
                      <span className="text-info">The Opener</span>
                    </p>
                    <small>Details: Makkan / Ayat: 7 / Num: 1</small>
                  </div>
                </div>
              </div>

              <div className="col-sm-4">
                <div className="card" style={{  boxShadow: "1px 2px 3px rgba(0, 0, 0, .1)" }}>
                  <div className="card-body m-auto">
                    <p>
                      Al-Faatiha <span className="text-success">(الفاتحة)</span>{" "}
                      <span className="text-info">The Opener</span>
                    </p>
                    <small>Details: Makkan / Ayat: 7 / Num: 1</small>
                  </div>
                </div>
              </div>
            </div>
    );

    const showChapter = (
      <div>
         <h1>not Hello</h1>
       </div>
    );

    return (
      <div>
        <div className="row d-flex justify-content-center mt-4">
        <div className="radio mr-3">
          <label className="text-success" style={{cursor:"pointer"}}>
            <input type="radio" name="optradio" onClick={this.toggleSurah} checked={this.state.checkBtn} />&nbsp;
            Surah
          </label>
        </div>
        <div className="radio">
          <label className="text-warning" style={{cursor:"pointer"}}>
            <input type="radio" name="optradio" onClick={this.toggleChapter} />&nbsp;
            Chapter
          </label>
        </div>
      </div>
     {
       this.state.surah ? showSurah : showChapter
     }
      </div>
      
    );
  }
}

export default ToggleButton;