import React from 'react'
import Router from 'next/router'
import ActionBar from '~/components/admin/actionBar'
import Table from '~/components/table'
import {DateTime} from 'luxon'
import {Button} from '@rmwc/button'
import OrderSummary from '~/components/orderSummary'

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

export default function Order({order}){
  const lastTransaction = getLastTransaction(order)

  return (
    <>
      <ActionBar title="Order Details" actions={!order.delivery && [
        {label: 'Ship via EasyPost', url: `/admin/orders/${order.uuid}/ship/easypost`},
        {label: 'Enter Tracking', url: `/admin/orders/${order.uuid}/ship/tracking`},
        {label: 'Mark Delivered', url: `/admin/orders/${order.uuid}/ship/delivery`}
      ]}/>

      <h2>Order #{order.number} for {capitalizeName(order.address.name)}</h2>
      <h3>Purchased {DateTime.fromISO(lastTransaction.completion_time).toFormat('LLLL dd, h:mm a')}</h3>

      <OrderSummary order={order} isAdmin={true} />
    </>
  )
}

function capitalizeName(string){
  return string
    .split(' ')
    .map(word => word[0].toUpperCase() + word.slice(1).toLowerCase())
    .join(' ')
}

function getLastTransaction(order){
  return order.transactions.sort(sortTransactions)[0]
}

function sortTransactions({completion_time: a}, {completion_time: b}){
  const timeA = DateTime.fromISO(a)
  const timeB = DateTime.fromISO(b)

  return timeB.diff(timeA).as('seconds')
}

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

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