import router from 'next/router'

import Link from 'next/link'
import {Button} from '@rmwc/button'
import AdminToolbar from '~/components/admin/actionBar'
import Table from '~/components/table'

ShipmentDetails.getInitialProps = async ({ctx: {axios, query: {uuid}}}) => {
  const {data: shipment} = await axios.get(`/api/shipments/${uuid}`)
  return {shipment}
}

export default function ShipmentDetails({shipment}){
  return (
    <>
      <AdminToolbar title="Shipment Details"/>
      <Link href={`/admin/shipments`}><a><Button icon="arrow_left">Back to shipments</Button></a></Link>
      <p> </p>
      <Table
        columns={[
          {name: 'Item', extractor: ({item}) => item.name},
          {name: 'Count', extractor: (row) => row.change}
        ]}
        rows={shipment.stockchanges.map(row => ({...row, id: row.item.uuid}))}
      />
    </>
  )
}