import React, { Component } from 'react';
import './shop.css'

// class Button extends React.Component {
//     constructor() {
//         super();
//         this.state = {
//             value: null,
//         };
//     }
//     render() {
//         return (
//             <button className="button"
//                 onClick={() => this.props.Clic()}>
//                 {this.props.value}

//             </button>

//         );


//     }
// }









class Books_Store extends React.Component {
    constructor() {
        super();
        this.state = {
            names: ['שס', "rishon", "aharon"],
         //   Books: [[  'kidushin'  , "ctobot", "brahot"], ["rashi", "tosfot", "ritva"], ["rabi", "rabi2", "rabi3"]],
          Books:[
               {name:'kidushin',autor:'dfdgf',cotigoru:'0',stok:6,price:50,id:123},
              {name:"ctobot",autor:'dfdgf',cotigoru:'0',stok:6,price:40,id:124},
              {name:"ramban",autor:'rashi',cotigoru:'1',stok:5,price:30,id:125},
              {name:"rashi",autor:'rashi',cotigoru:'1',stok:5,price:35,id:126},
              {name:"rambam",autor:'RaMbam',cotigoru:'1',stok:5,price:45,id:127},
              {name:"rabi  Akiva",autor:'AGER',cotigoru:'2',stok:7,price:55,id:128},
              {name:"Igrot  Moshe",autor:' rav  Moshe Fanshtein',cotigoru:'2',stok:7,price:59,id:129}

          ],


            current: [],
            ammont:0,
            id:130,
            page2:false

        }
        this.showTask = this.showTask.bind(this);
        this.showTO = this.showTO.bind(this);
        this.pay = this.pay.bind(this);
        this.New_books=this.New_books.bind(this);
        this.New_page=this.New_page.bind(this)
        this.Page1=this.Page1.bind(this)
    }


    showTask(index) {
        console.log(index);

        const book= []
        // const d = this.state.Books[index]
        for ( let i=0;i<this.state.Books.length;i++)
        { if(this.state.Books[i].cotigoru==index)
            { book.push(this.state.Books[i])}

        }
console.log(book);


        this.setState({ current: book })
    }


       pay(){

        this.setState({ ammont:0 })
       }



New_books(book)

{
     book.id=this.state.id

    const Books2=this.state.Books;
   Books2.push(book)

   this.setState({ Books: Books2 })
   this.setState({ id:this.state.id+1})
   console.log('books11',book);
console.log('books2',Books2);
console.log('books1',this.state.Books);
}
    showTO(index){
        const Books2=this.state.Books;



         const a=this.state.current[index].id
         let b;
         let price


            for ( let i=0;i<Books2.length;i++)

                           // ammont=ammont+price
            { if(Books2[i].id==a)
                {
                       price=Books2[i].price


                        this.setState({ ammont: this.state.ammont+price })
                     b=Books2[i].stok-1;
                    if(b>=0){
                   (Books2[i].stok=b)}
                console.log(Books2[i].stok);

                console.log(this.state.Books[i].stok);
            }

            }

        this.setState({ Books: Books2 })

    }

    New_page(){
        this.setState({page2 : true })
    }

    Page1(){
        this.setState({page2 : false })
    }

    render() {

        console.log('this.state.current=', this.state.current)


        return (
            <div className="center">
                < Sidebar names={this.state.names} clik={this.showTask} amount={this.state.ammont} pay={this.pay}  new_bookss={this.New_page}/>,
            < Windows window={this.state.current} cliks={this. showTO} trues={this.state. page2}new_books={this. New_books}page1={this.Page1}/>
            </div>
        )

    }

}


   const wind2=""



class Windows extends React.Component {
    constructor(props) {
        super(props);

    };

    return

    creatWins() {

        console.log(this.props)
        const wind = this.props.window.map((elm, index) => {
            return <div className="screen" key={index}>{"name is "+elm.name+" autor  is "+elm.autor +" in stok is "+elm.stok }

                 <button className="button_sm"  key={index} onClick={() => this.props.cliks(index)}>buy</button></div>
        })



        return wind


    }


    CreatBooks(){

        const  book={}


           function Nbooks(obj){
              for(const key  in obj){
         book[key]=obj[key] }

      console.log(book);

      }


              return (
                <div>
              <input type="text" onChange={function (event) {Nbooks({name:event.target.value})}} placeholder='name'/>
              <input type="text" onChange={function (event) {Nbooks({autor:event.target.value})}} placeholder='autor'/>
              <input type="number" onChange={function (event) {Nbooks({stok:parseInt(event.target.value)})}} placeholder='how   mush '/>
              <input type="number" onChange={function (event) {Nbooks({price:parseInt(event.target.value)})}} placeholder='price'/>
              <select  onChange={function (event) {Nbooks({cotigoru:event.target.value})}}>
              <option value="">what category</option>
                <option value="0">שס</option>
                  <option value="1">rishon</option>
                  <option value="2">aharon</option>

                  </select>
                  <button className="button"  onClick={() => this.props.new_books(book)+this.props.page1()}>save</button>
              </div>



              )
          }




    render() { if (!this.props.trues){

        return (
            <div className="cen_screen">

        <div className="cen_row">

        {this.creatWins()}
          </div>
        <div className="cen_row">
            {this.wind2}

         </div>

    </div>



        )
    }else {

        return (
            <div className="cen_screen">
            <div className="cen_row">
        daf 2
      { this.CreatBooks()}
            </div>


    </div>



        )


    }
    }


}








class Sidebar extends React.Component {
    constructor(props) {
        super(props);

    };

    Pay (){
        return<button className='pay' onClick={()=> this.props.pay()}>Pay</button>
    }



    handleChane(event) {
console.log(event);

       this.B=event.target.value
       console.log(this.B);
      }

    Bild() {
        const list = this.props.names.map((elm, index) => {

            return <button className="button" key={index} onClick={() => this.props.clik(index)}> {elm} </button>
        })
        return list

    }

    CreatBooks1(){
return <button className="button"  onClick={() => this.props.new_bookss()}>New book </button>
    }






    render() {

        return (
            <div className="bar">

                {this.Bild()}

                < div className="amount">amount {this.props.amount} ש"ח
                {this.Pay()}


                </div>


                {this.CreatBooks1()}


            {/* <input type="text" value={this.a}  onChange={this.handleChane}/> */}






            </div>
        )
    }

}

export default Books_Store;



//scc




.center{display: flex}
.bar {
    flex:1;
    display:block;
    height: 750px;
    border: 1px red solid
}
.cen_screen{

    flex: 9;
    margin: 20px;
}
.screen{
    flex:2;
    height:100px;
    border: 1px red solid;
    margin: 20px;
}



.cen_row{
    display: flex;
    flex: 9;
    margin: 20px;
}

.button{
  margin: 10px;
    width: 150px;
    height: 70px;
}
.button_sm{
    width: 75px;
    height: 30px;
    margin: 45px;
    border: 1px red solid
}

.amount{
    margin: 10px;
    width: 150px;
    height: 70px;
    border: 1px blue solid
}

.pay {
    width: 75px;
    height: 35px;
}

.page2{
    display:block
}