import React, {useState} from 'react'
import Router from 'next/router'

import ActionBar from '~/components/admin/actionBar'
import {FormController, DecimalInput, Button} from '~/components/form'

EasypostPackageEntry.getInitialProps = async ({ctx: {query: {id}}}) => {
  return {uuid: id}
}

export default function EasypostPackageEntry({uuid}){
  return (
    <>
      <ActionBar title="Ship with EasyPost"/>

      <FormController afterSubmit={() => Router.push(`/admin/orders/${uuid}`)} url={`/api/orders/${uuid}/ship/easypost`}>
        <p>Please enter package information in order to ship with EasyPost.</p>
        <p>All fields can accept a number with one or two decimal places.</p>
        <DecimalInput label="Length (inches)" name="length" hint="Please enter (in inches) the longest dimension of the package"      prefix="" numDecimals={2} validate={val => val > 0} />
        <DecimalInput label="Width (inches)"  name="width"  hint="Please enter (in inches) the 2nd longest dimension of the package"  prefix="" numDecimals={2} validate={val => val > 0} />
        <DecimalInput label="Height (inches)" name="height" hint="Please enter (in inches) the height or thickness of the package"    prefix="" numDecimals={2} validate={val => val > 0} />
        <DecimalInput label="Weight (ounces)" name="weight" hint="Please enter (in ounces) the weight of the package"                 prefix="" numDecimals={2} validate={val => val > 0} />
        <Button type="submit">Submit</Button>
      </FormController>

      <p className="warning" style={{maxWidth: 380, marginTop: 40}}>
        <strong>Note:</strong> orders with a total value of $2500 or more should not be shipped with EasyPost.
      </p>
    </>
  )
}