import React, {useState} from 'react'
import Router from 'next/router'
import axios from 'axios'
import ActionBar from '~/components/admin/actionBar'
import {Button, FormController, Input} from '~/components/form'
import OrderSummary from '~/components/orderSummary'

import styles from '../../../../store/checkout/style.module.css'

ManualOrderPayment.getInitialProps = async ({ctx}) => {
  const {data: order} = await ctx.axios.get(`/api/orders/${ctx.query.uuid}`)
  return {order}
}

export default function ManualOrderPayment({order}) {
  const [recipientEmail, setRecipientEmail] = useState('')
  const [orderNote, setOrderNote] = useState('')

  const validToSubmit = recipientEmail.length > 0 && orderNote.length > 0

  const currentTransaction = order
    .transactions.find(transaction => (
      transaction.payment_state === 'started'
    ))

  const {item_total_price, shipping_price, tax_price, coupon_effective_discount} = currentTransaction
  const {free_shipping} = currentTransaction.coupon || {}
  const total_price =
      (item_total_price && shipping_price)
        ? item_total_price + (free_shipping ? 0 : shipping_price) + tax_price - (coupon_effective_discount || 0)
        : null

  const formatMoney = money => {
    if (money === undefined || money === null) return null;

    return '$' + (money / 100).toFixed(2)
  }

  async function markPaid() {
    await axios.post(`/api/orders/manual/${order.uuid}/payment`, {
      recipientEmail,
      reason: orderNote
    })

    Router.push('/admin/orders')
  }

  return (
    <>
      <ActionBar title="Set Payment" actions={[
        {label: 'Edit address', url: `/admin/orders/new/${order.uuid}/address`},
        {label: 'Cancel', url: `/admin/orders`}
      ]}/>

      <OrderSummary order={order} />

      <FormController>
        <Input label="Recipient email" name="email" validate={value=>value.length > 0} onChange={setRecipientEmail} />
        <Input label="Order explanation" name="explanation" validate={value=>value.length > 0} onChange={setOrderNote} />
      </FormController>

      <div className={styles.checkoutSection}>
        <h3>Price Total:</h3>
        <div className={styles.horizContainer}>
          <div>
            <table>
              <tbody>
                {currentTransaction.cart.items.map(({uuid, count, item}) => (
                  <tr key={uuid}>
                    <td>{item.name} {count > 1 ? `(${count})` : ''}:</td>
                    <td>{formatMoney(count * item.price_cents)}</td>
                  </tr>
                ))}
                {coupon_effective_discount > 0 && (
                  <tr>
                    <td>Coupon:</td>
                    <td>- {formatMoney(coupon_effective_discount)}</td>
                  </tr>
                )}
                <tr className={free_shipping ? 'strikethrough' : undefined}>
                  <td>Shipping:</td>
                  <td>{formatMoney(shipping_price) || '-'}</td>
                </tr>
                {tax_price && (
                  <tr>
                    <td>Sales tax:</td>
                  <td>{formatMoney(tax_price)}</td>
                  </tr>
                )}
                <tr style={{fontWeight: 'bold'}}>
                  <td>Total:</td>
                  <td style={{textDecoration: 'line-through'}}>{formatMoney(total_price) || '-'}</td>
                </tr>
                <tr>
                  <td style={{opacity: .6}}>(Paid by admin)</td>
                  <td style={{fontWeight: 'bold'}}>{formatMoney(0) || '-'}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div className={styles.paymentButtons}>
            <Button enabled={validToSubmit} onClick={markPaid}>Complete Order</Button>
          </div>
        </div>
      </div>
    </>
  )
}