const { Component } = React;


class UserSubscriptions extends Component {

  constructor(props) {
    super(props);
    this.state = {
        data:[]
    };

  }


  componentDidMount()
  {
    this.getData()
  }
  
  getData()
  {
    let email = shopDataLayerData?.customer?.email;
    fetch('https://easylight.perity.net/backend/get.php', {
        method: 'POST',
        headers: {'Accept': 'application/json','Content-Type': 'application/json'},
        body: JSON.stringify({
            what:"subscriptions",
            select:"product_img,product_name,product_id,order_id,price,currency,recurrence_price,recurrence_status,recurrence_id,payment_id,created",
            where:"email='"+email+"'",
            multiple:false,
        }),
      }).then((e)=>e.json())
      .then((result)=>{
        this.setState({
            data:result
        })
      });
  }
  /*

  handleSubmit = async (e) => {
    e.preventDefault();
    
    const data = {};

    const response = await fetch('https://easylight.perity.net/backend/create-payment-reserve.php', {
      method: 'POST',
      headers: {'Accept': 'application/json','Content-Type': 'application/json'},
      body: JSON.stringify(data),
    }).then((e)=>e.json())
    .then((result)=>{
        const paymentId = result.id;
        // We don't need to extract the ID from the argument object
        _gopay.checkout({gatewayUrl: result.gw_url, inline: true}, ()=>getStatus(paymentId, data, "reserve"));
        
    });
    console.log(response);
    if (response.ok) {
      this.context.addNotification('Rezervácia bola úspešne odoslaná!', 'success');
    } else {
      this.context.addNotification('Došlo k chybe pri odosielaní rezervácie.', 'error');
    }

  };
  */

  render() {
    const {data} = this.state,
          name = shopDataLayerData.customer.fullName??"Zákaznícke centrum";
    
    return (
    <>
    <div id="content-wrapper" className="container content-wrapper">
        <div className="content-wrapper-in">
            <aside className="sidebar sidebar-left" data-editorid="sidebar">
            <div className="sidebar-inner visible">
                <div className="box box-sm box-bg-transparent client-center-box box-client" data-testid="boxCustomerCenterMenu">
                <ul>
                    <li>
                    <a href="/klient/">
                        <strong>{name}</strong>
                    </a>
                    </li>
                    <li className="logout"></li>
                    <li><a href="/klient/nastavenie/"> Moje osobné údaje </a></li>
                    <li><a href="/klient/objednavky/"> Moje objednávky </a></li>
                    <li className="active"><a href="/klient-predplatne/"> Moje predplatné {data?.length>0?("("+data.length+")"):""}</a></li>
                    <li><a href="/klient/klient-platby/"> Moje platby </a></li>
                    <li><a href="/klient/klient-doklady/"> Moje daňové doklady </a></li>
                    <li><a href="/klient/klientske-proforma-faktury/"> Moje zálohové faktúry </a></li>
                    <li><a href="/klient/klientske-dobropisy/"> Moje dobropisy </a></li>
                    <li><a href="/klient/dodacie-listy-klienta/"> Moje dodacie listy </a></li>
                    <li><a href="/klient/danove-doklady-platba/"> Moje doklady k prijatej platbe </a></li>
                    <li><a href="/klient/klient-zlavy/"> Moje zľavy </a></li>
                    <li><a href="/klient/klient-hodnotenie/"> Moje hodnotenia tovarov </a></li>
                    <li><a href="/klient/klient-diskusia/"> Moja diskusia pri tovare </a></li>
                </ul>
                </div>
                <span className="client-logout-btn-block">
                <a className="btn btn-primary client-logout-btn" href="/logout/" data-testid="buttonSignout">Odhlásiť sa</a>
                </span>
            </div>
            </aside>
            <main id="content" className="content wide" style={{margin:"0 0 0 4rem"}}>
            <div className="content-inner">
                <h1>Moje Predplatné</h1>
                <div className="client-link bottom-1rem"></div>
                <div className="table-responsive">
                <table className="table customer-orders table-mobile-enriched" data-testid="tableCustomerOrders">
                    <thead>
                    <tr>
                        <th> Produkt </th>
                        <th> Dátum </th>
                        <th className="cell--price"> Cena jednorázovej platby </th>
                        <th className="cell--price"> Cena každý mesiac </th>
                        <th> Stav </th>
                        <th>  </th>
                    </tr>
                    </thead>
                    <tbody>
                    {
                        !(data?.length <= 0) ?
                            data?.map((e,i)=>(
                                <Product data={e} reload={()=>this.getData()} key={i}/>
                            ))
                        :
                        <>
                            <h4>Ešte ste žiadne predplatné nevytvorili....</h4>
                        </>
                    }
                    </tbody>
                </table>
                </div>
                <div className="pagination-wrapper" style={{display:"none"}}>
                <div className="pagination">
                    <strong className="current">1</strong>
                </div>
                <p className="pagination-total"> Stránka <strong>1</strong> z <strong>1</strong> , položiek celkom: <strong>1</strong>
                </p>
                </div>
            </div>
            </main>
        </div>
    </div>
    </>
    )}
}


class Product extends Component{

    getStatus(e)
    {   
        let state = "Neznámy"
        if(e === "PAID")
        {
            state="Zaplatené"
        }
        else if(e === "CANCELED")
        {
            state = "Zrušené"
        }
        else if(e === "CREATED" || e ===null )
        {
            state = "Nezaplatené"
        }
        else if(e === "FINISHED")
        {
            state = "Ukončené"
        }
        return state;
    }
    formatDate(e)
    {
        let d = new Date(e);
        return d.getDate()  + "." + (d.getMonth()+1) + "." + d.getFullYear() + " " + d.getHours() + ":" + d.getMinutes();
    }
   stopRecurrence(e)
    {
        if(!confirm("Naozaj chcete zrušiť predplatné?"))
        {
            return;
        }
        const {data:d,reload} = this.props,
        {payment_id,recurrence_id,order_id} = d,
        data = {
            key:order_id+""+payment_id+""+recurrence_id,
            id:recurrence_id,
            order:order_id
        }
        fetch('https://easylight.perity.net/backend/void_user.php', {
            method: 'POST',
            headers: {'Accept': 'application/json','Content-Type': 'application/json'},
            body: JSON.stringify(data),
          }).then((e)=>e.json())
          .then((result)=>{
            if(result?.error)
            {
                throw result?.error;
            }
           showMessage("Vaše predplatné bolo zrušené.","info","info",false,true)
           reload();
          }).catch((e)=>{
            showMessage("Došlo k chybe pri zrušení predplatného.","error","error",false,true)
            reload();
          });
    }
    retryPayment()
    {
        const {data:d} = this.props,
              {recurrence_price,order_id} = d,
              formData = {
                  recurrence:true,
                  price:recurrence_price,
                  orderId: order_id,
                  url: window.location.origin + window.location.pathname
              }
        paymentGate(formData);
    }

    render()
    {
        const {data} = this.props
    return(
    <tr className="client-table-font">
        <td>
        <span className="client-table-heading">Produkt</span>
        <div className="product-td">
            <img className="image" src={data?.product_img} alt="" />
            <div className="product-info">
                <p><b>{data?.product_name}</b></p>
                <span><b>Kód:</b> {data?.product_id}</span>
                <span>{data?.order_id}</span>
            </div>
        </div>

        </td>
        <td>
        <span className="client-table-heading">Dátum</span>
        <span data-testid="dateTime">{this.formatDate(data?.created)}</span>
        </td>
        <td className="cell--price">
        <span className="client-table-heading">Cena jednorázovej platby</span>
        {data?.price+(data?.currency==="EUR"?" €":" "+data?.currency)}
        </td>
        <td className="cell--price">
        <span className="client-table-heading">Cena každý mesiac</span>
        <strong>{data?.recurrence_price+(data?.currency==="EUR"?" €":" "+data?.currency)}</strong>
        </td>
        <td>
            <span className="client-table-heading">Stav</span>
            {this.getStatus(data?.recurrence_status)}
        </td>
        <td>
        {
            (data?.recurrence_status === "CANCELED" || data?.recurrence_status === null)?
            <>
                <span className="client-table-heading"></span>
                <button type="submit" className="btn btn-secondary btn-text" onClick={()=>this.retryPayment()}>Opakovať platbu</button>
            </>
            :(data?.recurrence_status === "FINISHED")?<></>
            :(data?.recurrence_status === "CREATED")?
            <>
                <span className="client-table-heading"></span>
                <button type="submit" className="btn btn-secondary btn-text" onClick={()=>this.retryPayment()}>Opakovať platbu</button>
            </>
            :
            <>
                <span className="client-table-heading"></span>
                <button type="submit" className="btn btn-secondary btn-text" onClick={()=>this.stopRecurrence()}>Zrušiť predplatné</button>
            </>
        }
        </td>
    </tr>
    )}
}


const subscriptionReactRoot = ReactDOM.createRoot(document.getElementById('subscriptionReactRoot'));

subscriptionReactRoot.render(
    <UserSubscriptions />
);