import { Component } from 'react';
import { Link, withRouter } from 'react-router-dom';
import { compose } from 'redux';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import Button from '../shared/buttons/button';
import { createPayment } from '../../redux/actions/payment';
import OrderItemsTable from './order-items-table';
import Code from './code';
import Segment from '../shared/segment';
import NavLink from '../shared/buttons/nav-link';
import { payOrderFromCredit } from '../../redux/actions/order';
import { DEFAULT_DECKS_ROUTE } from '../utils/index';

class Order extends Component {
  handleConfirm = async () => {
    const { order } = this.props;
    const {
      payload: { url }
    } = await this.props.createPayment(order.id);
    window.location.assign(url);
  };

  handlePayFromCredit = () => {
    const { order } = this.props;
    this.props.payOrderFromCredit(order.id);
  };

  render() {
    const { order } = this.props;

    if (order.status) {
      return (
        <Segment textAlign='center'>
          <p>
            <span>بسته‌های انتخاب شده </span>
            <span className='font-medium'>خریداری شده است</span>
            <span>، با رفتن به صفحه </span>
            <a>
              <Link to={DEFAULT_DECKS_ROUTE}>
                <span className='font-medium text-blue-900'>بسته‌ها</span>
              </Link>
            </a>
            <span> می توانید از آن‌ها استفاه نمایید.</span>
          </p>
          <NavLink
            to={DEFAULT_DECKS_ROUTE}
            color='blue'
            content='بسته ها'
            className='my-4 mx-auto'
          />
          <NavLink to='/store' color='green' content='بازگشت به فروشگاه' className='my-4 mx-auto' />
        </Segment>
      );
    }
    return (
      <div className='mx-6'>
        <OrderItemsTable
          orderItems={order.orderItems}
          code={order.code}
          totalPrice={order.price}
          paymentPrice={order.paymentPrice}
          discountPrice={order.discountPrice}
          creditPrice={order.creditPrice}
        />
        <Code orderId={order.id} code={order.code} />
        {order.paymentPrice === order.creditPrice ? (
          <>
            <p>
              <span>با فشردن دکمه </span>
              <span className='font-medium'>سبز رنگ</span>
              <span> زیر با پرداخت مبلغ </span>
              <span className='font-bold'>{order.creditPrice.toLocaleString()} ریال</span>
              <span> از اعتبار خود می‌توانید از بسته های انتخاب شده استفاده کنید.</span>
            </p>
            <Button
              color='green'
              colorWeight={400}
              content='پرداخت از اعتبار'
              onClick={this.handlePayFromCredit}
              className='my-2 mx-1'
            />
          </>
        ) : (
          <>
            <p>
              <span>با فشردن دکمه </span>
              <span className='font-medium'>سبز رنگ</span>
              <span> زیر به درگاه پرداخت متصل میشوید و با افزایش اعتبار حساب خود به مبلغ </span>
              <span className='font-bold'>
                {(order.paymentPrice - order.creditPrice).toLocaleString()} ریال
              </span>
              <span> ، پس از برگشت به سایت می‌توانید از بسته های انتخاب شده استفاده کنید.</span>
            </p>
            <Button
              color='green'
              colorWeight={400}
              content='اتصال به درگاه پرداخت'
              onClick={this.handleConfirm}
              className='my-2 mx-1'
            />
          </>
        )}
        <p>
          <span>و با فشردن دکمه </span>
          <span className='font-medium'>قرمز رنگ</span>
          <span>
            {' '}
            زیر می‌توانید به صفحه فروشگاه بازگشته و بسته‌های انتخابی خود را ویرایش نمایید.
          </span>
        </p>
        <Button
          color='red'
          colorWeight={400}
          content='بازگشت به فروشگاه'
          onClick={this.props.history.goBack}
          className='my-2 mx-1'
        />
      </div>
    );
  }
}

Order.propTypes = {
  order: PropTypes.object.isRequired,
  history: PropTypes.object.isRequired,
  createPayment: PropTypes.func.isRequired,
  payOrderFromCredit: PropTypes.func.isRequired
};

export default compose(withRouter, connect(null, { createPayment, payOrderFromCredit }))(Order);
