import React, { Component } from "react";
import { withRouter} from "react-router-dom";
import {
  Row,
  Col,
  Card,
} from "reactstrap";
import CurrencyFormatter from "../../../utility/currency-formatter";
import app from "firebase/app";
import MDSpinner from "react-md-spinner";
import AuthContext from "../../../context/auth-contex";
import styled from 'styled-components'
import CheckoutModal from './CheckoutStatusModal'
import ReactPlayer from 'react-player'
import {ButtonPrimary, Input} from '../../containers/StyledComponent/Index'
import {Link} from 'react-router-dom'
import moment from 'moment'

const ContainerFlex = styled.div`
    display: grid
    grid-template-columns: 0.3fr 1fr
    width: 100%
    justify-content: space-between
    @media (max-width: 700px) {
        grid-template-columns: 1fr
        grid-gap: 20px
      }
`

const Wrapper = styled.div`
    display: grid
    grid-template-columns: 1fr 1fr
    grid-gap: 20px
    width: 100%
    justify-content: space-between
    @media (max-width: 700px) {
        grid-template-columns: 1fr
      }
`

const ContainerDiv = styled.div`
    width: 40%
    @media (max-width: 700px) {
        width: 100%
      }
`


class CheckoutContainer extends Component {
  static contextType = AuthContext
  state = {
    course: {},
    invoice: {},
    isLoading: true,
    isLoadingCheckout: false,
    isPaid: false,
    isCheckout: false,
    paymentStatus: '',
    value: '',
    totalAkhir: 0,
    voucher: 0,
    tipeVoucher: 0,
    kodeVoucher: '',
    redeem: false,
    modal: false,
    haveTransaction: false,
    isExpired: false,
    status_input: true,
    precentage: false
  };

  componentDidMount() {
    const course_id = this.props.match.params.id;
    let db = app.firestore();
    db.collection("courses")
      .doc(course_id)
      .get()
      .then(doc => {
        this.setState({
          course: { id: doc.id, ...doc.data() },
          totalAkhir: doc.data().price,
        });
        this.getCheckoutData();
      });
  }

  getCheckoutData = () => {
    const course_id = this.props.match.params.id;
    const user_id = this.context.user.uid;
    const db = app.firestore();
    db.collection("invoices")
      .where("user_id", "==", user_id)
      .where("course_id", "==", course_id)
      .onSnapshot(doc => {

        var source = doc.metadata.hasPendingWrites ? "Local" : "Server";
        if (doc.size === 0) {
          this.setState({
            invoices: {},
            isLoading: false
          });
        } else {
          doc.forEach(document => {

            if (document.data().status == "NEED_PAYMENT") {
              this.setState({
                invoice: { id: document.id, ...document.data() },
                isLoading: false,
                isCheckout: true,
                redeem: document.data().redeem,
                totalAkhir: document.data().price,
                kodeVoucher: document.data().voucher_code
              });
            }
          });
        }
      });
      db.collection("transaction")
        .where("user_id", "==", user_id)
        .where("course_id", "==", course_id)
        .onSnapshot(doc => {

          if(doc.size === 0) {

            this.setState({
              haveTransaction: false,
            });
          } else {
            doc.forEach(val => {
              if(val.data().status_code === "201") {
                const currentDate = moment().unix()
                const invoice_date = val.data().date
                const res = currentDate - invoice_date
                if(res/3600 > 23) {

                  db.collection("invoices").doc(val.data().invoice_id).delete().then(docss => {

                    db.collection("transaction").doc(val.id).delete().then(doc => {

                      window.location.reload(true)
                    }).catch(error => {
                      alert('error, laporkan bug')
                    })
                  }).catch(err => {
                    alert('error, laporkan bug')
                  })

                } else {

                  this.setState(prevState => ({
                    haveTransaction: true,
                    modal: true,
                  }));
                }
              } else {

                this.props.history.push(`/account/transaction/${this.context.user.uid}`)
              }
            })
          }
        });
  };

  createCheckout = () => {
    this.setState({
      isLoading: false
    })
    let course_id = this.props.match.params.id;
    const db = app.firestore();
    db.collection("invoices")
      .add({
        user_id: this.context.user.uid,
        course_id: course_id,
        status: "INVOICE_CREATED",
        bank: "BCA",
        redeem: this.state.redeem,
        price: this.state.totalAkhir,
        date: moment().unix(),
        voucher_code: this.state.kodeVoucher
      })
      .then(docRef => {
        this.setState({
          isLoadingCheckout: true
        })
        const course_id = this.props.match.params.id;
        const user_id = this.context.user.uid;
        const db = app.firestore();
        db.collection("invoices")
          .where("user_id", "==", user_id)
          .where("course_id", "==", course_id)
          .onSnapshot(doc => {
            var source = doc.metadata.hasPendingWrites ? "Local" : "Server";
            if (doc.size === 0) {
              this.setState({
                invoices: {},
                isLoading: false
              });
            } else {
              doc.forEach(document => {

                if (document.data().status === "NEED_PAYMENT") {
                  this.setState({
                    invoice: { id: document.id, ...document.data() },
                    isLoading: false,
                    isCheckout: true
                  });
                  this.pay()
                }
              });
            }
          });
      })
      .catch(error => {

      });
  };

    pay = () => {
      let course_id = this.props.match.params.id;
      const user = this.context.user.uid
      const link = `/account/transaction/${user}`
      const getCheckoutDataAgain = () => {
        this.getCheckoutData()
      }
      const isCheckout = this.state.isCheckout
      const invoice_id = this.state.invoice.id
      const transaction_token = this.state.invoice.transaction_token
      window.snap.pay(this.state.invoice.transaction_token, {
        onSuccess: function(result) {
          let db = app.firestore();

          db.collection("transaction")
            .add({
              user_id: user,
              course_id: course_id,
              invoice_id: invoice_id,
              ...result
            })
            .then(docRef => {

            })
            .catch(error => {
              alert(error)
            });
          let addCourse = db.collection("users").doc(user);
          return addCourse.update({
                myCourse: app.firestore.FieldValue.arrayUnion(this.state.myCourse)
            })
          .then(function() {

            })
          .catch(function(error) {
                console.error("Error updating document: ", error);
          });
        },
        onPending: function(result) {
            let db = app.firestore();

            db.collection("transaction")
              .add({
                user_id: user,
                course_id: course_id,
                invoice_id: invoice_id,
                date: moment().unix(),
                transaction_token: transaction_token,
                ...result
              })
              .then(docRef => {
                window.location.replace(link)
              })
              .catch(error => {
                alert(error)
              });
            const ref = `${result.payment_code}`
        },
        onError: function(result) {
          let db = app.firestore();
          db.collection('invoices').doc(invoice_id).delete().then(val => {
              window.location.reload(true)
          })
          getCheckoutDataAgain();
        }
      });
    };

  handleVoucher = (event) => {
    this.setState({value: event.target.value});
  }

  handleClick = () => {
    const db = app.firestore();
    db.collection('voucher')
      .where("code", "==", this.state.value)
      .onSnapshot(doc => {
        if(doc.size === 0) {
          this.setState({
            redeem: false,
          })
        } else {
          doc.forEach(document => {
            if(document.data().type_diskon === 'rupiah') {
              this.setState({
                redeem: true,
                kodeVoucher: document.data().code,
                voucher: document.data().diskon,
                precentage: document.data().status,
                totalAkhir : this.state.totalAkhir - document.data().diskon
              })
            } else {
              this.setState({
                redeem: true,
                kodeVoucher: document.data().code,
                voucher: document.data().diskon,
                precentage: document.data().status,
                totalAkhir : this.state.totalAkhir - this.state.totalAkhir*document.data().diskon/100
              })
            }
          })
        }
      })
  }


  render() {
    const {modal} = this.state
    if (this.state.isLoading) {
      return (
        <div className="bg-light">
          <div className="container py-4">
            <Row>
              <Col md={12} style={{ marginBottom: 48, marginTop: 24 }}>
                <center>
                  <MDSpinner size={64} />
                </center>
              </Col>
            </Row>
          </div>
        </div>
      );
    }
    return (
      <React.Fragment style={{
           width: '100%',
           padding: '20px',
           gridTemplateColumns: '1fr',
           height: '100%',
           display: 'grid',
           position: 'absolute',
           padding: '0 30px',
      }}>
        <div style={{
            width: '100%',
            minWidth: '100%',
            background: 'white',
            color: 'black',
            padding: '10px 0 0 20px',
          }}>
            <div style={{
                fontSize: '24px',
              }}>Checkout</div>
        </div>
        <div>
          <Card style={{ padding: 24, width: '100%', minHeight: '100vh', height: '100%'}}>
            <ContainerFlex>
              <div>
                <ReactPlayer
                  url={this.state.course.mainVidLink}
                  width='200px'
                  height='100px'
                  light={true}
                  muted={true}
                  />
              </div>
              <ContainerDiv>
                <h5>{this.state.course.title}</h5>
                <div className="text-muted">
                  By {this.state.course.teacher}
                </div>
                <hr />
                <div className="text-muted">Price</div>
                <strike>
                  <small className="text-muted">
                    {CurrencyFormatter.format(this.state.course.price*1.2)}
                  </small>
                </strike>
                <h5 className="card-text">
                  {CurrencyFormatter.format(this.state.course.price)}
                </h5>
                {
                  this.state.haveTransaction ? (
                    <div>
                      Anda telah melakukan transaksi
                    </div>
                  ) : (
                    <div>
                      <div>Kode Voucher</div>
                      <div>
                        {
                          this.state.isCheckout ? (
                            <div style={{
                                width: '100%',
                                gridGap: '20px',
                                display: 'grid',
                                gridTemplateColumns: '1fr 0.3fr'
                              }}>
                              <Input type="text" value={this.state.value} placeholder={this.state.kodeVoucher} onChange={this.handleVoucher}/>
                              <ButtonPrimary
                                style={{
                                  maxWidth: '120px',
                                  width: '100%'
                                }}
                                onClick={this.handleClick}>Redeem</ButtonPrimary>
                            </div>
                          ) : (
                            <div>
                              {
                                this.state.redeem ? (
                                  <div style={{
                                      width: '100%',
                                      gridGap: '20px',
                                      display: 'grid',
                                      gridTemplateColumns: '1fr 0.3fr'
                                    }}>
                                    <Input type="text" value={this.state.value} placeholder="masukan kode voucher" onChange={this.handleVoucher} disabled/>
                                    <ButtonPrimary
                                      style={{
                                        maxWidth: '120px',
                                        width: '100%'
                                      }}
                                      onClick={this.handleClick} disabled>Redeem</ButtonPrimary>
                                     {
                                        this.state.precentage ? (
                                          <div style={{
                                            display: 'grid',
                                            gridTemplateColumns: '1fr 1fr',
                                            width: '100%',
                                          }}>
                                            <div className="text-muted">
                                             Potongan Harga
                                            </div>
                                            <div>{CurrencyFormatter.format(this.state.voucher)}</div>
                                          </div>
                                        ) : (
                                          <div style={{
                                            display: 'grid',
                                            gridTemplateColumns: '1fr 1fr',
                                            width: '100%',
                                          }}>
                                            <div>
                                              Potongan harga {this.state.voucher}% (Hemat {CurrencyFormatter.format(this.state.totalAkhir*this.state.voucher/100)})
                                            </div>
                                            </div>
                                        )
                                      }
                                  </div>
                                ) : (
                                  <div style={{
                                      width: '100%',
                                      gridGap: '20px',
                                      display: 'grid',
                                      gridTemplateColumns: '1fr 0.3fr'
                                    }}>
                                    <Input type="text" value={this.state.value} placeholder="masukan kode voucher" onChange={this.handleVoucher}/>
                                    <ButtonPrimary
                                      style={{
                                        maxWidth: '120px',
                                        width: '100%'
                                      }}
                                      onClick={this.handleClick}>Redeem</ButtonPrimary>
                                    {
                                      this.state.status_input ? (
                                        <div></div>
                                      ) : (
                                        <div style={{
                                            color: 'red',
                                            fontSize: '12px'
                                          }}>
                                          kode yang anda masukan salah
                                        </div>
                                      )
                                    }
                                  </div>
                                )
                              }
                            </div>
                          )
                        }
                      </div>
                    </div>
                  )
                }
                <div className="text-muted" style={{
                    marginTop: '20px',
                    fontWeight: 'bold'
                  }}>Total Bayar</div>
                <h4 className="card-text" style={{
                    fontWeight: 'bold'
                  }}>
                  {CurrencyFormatter.format(this.state.totalAkhir)}
                </h4>
                  {
                    (this.state.isCheckout) ? (
                      <div>
                          {
                            this.state.haveTransaction ? (
                              <Link to={`/account/transaction/${this.context.user.uid}`}>
                                <ButtonPrimary primary color="success">
                                  Lihat Transaksi
                                </ButtonPrimary>
                              </Link>
                            ) : (
                              <ButtonPrimary primary onClick={this.pay} color="success">
                                Lakukan pembayaran
                              </ButtonPrimary>
                            )
                          }
                      </div>
                    ) : (
                      <div>
                        {
                           this.state.isLoadingCheckout ? (
                             <ButtonPrimary primary color="success" >
                               <MDSpinner size={24} />
                               Mohon Tunggu Sebentar
                             </ButtonPrimary>
                           ) : (
                             <ButtonPrimary primary onClick={this.createCheckout} color="success">
                               Checkout
                             </ButtonPrimary>
                           )
                        }
                      </div>
                    )
                  }
              </ContainerDiv>
            </ContainerFlex>
          </Card>
        </div>
        <ContainerFlex style={{
            padding: '10px 20px 20px 20px'
          }}>
          <CheckoutModal isOpen={this.state.modal} user={this.context.user.uid}/>
        </ContainerFlex>
      </React.Fragment>
    );
  }
}

const WrappedClass = withRouter(CheckoutContainer);
WrappedClass.WrappedComponent.contextType = AuthContext;
export default WrappedClass;