import React from 'react'
import router from 'next/router'

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

export default function NewItem() {
  const stringLengthAtLeastOne = str => str.length > 0
  const slugRestrictions = str => {
    if(str.length < 3) return false;
    if(str.length > 20) return false;
    if(!str.match(/^[-a-z0-9_]*$/i)) return false;
    return true;
  }

  const afterCreate = (item) => {
    router.push(`/admin/items/${item.urlslug}`)
  }

  return (
    <>
      <ActionBar title="Create New Item"/>
      <FormController url="/api/items" afterSubmit={afterCreate}>
        <h3>General Fields</h3>
        <Input name="name" validate={stringLengthAtLeastOne} />
        <TextArea name="description" validate={stringLengthAtLeastOne} />
        <Input label="URL Slug" name="urlslug" validate={slugRestrictions} />
        <DecimalInput label="Price" name="price_cents" prefix="$" numDecimals={2} transform={float => Math.floor(float * 100)} />
        <Checkbox label="Published" name="published" hint="Publish this item" />
        
        <h3>Customs Info</h3>
        <Input name="hs_tariff_number" label="Tariff Number" validate={stringLengthAtLeastOne} hint="Please see https://hts.usitc.gov/current.  Sock is 611595"/>
        <Input name="customs_description" label="Customs Description" validate={stringLengthAtLeastOne} hint={"Short description like \"t-shirt\""}/>
        <Input name="origin_country" label="Country of Origin" validate={s => s.length === 2} hint="2 letter ISO country code"/>
        <DecimalInput label="Weight (ounces)" name="weight" hint="Please enter (in ounces) the weight of this item" prefix="" numDecimals={2} validate={val => val > 0} />

        <p><strong>Note:</strong> You can add images to an item after creating it</p>
        <Button type="submit">Create</Button>
      </FormController>
    </>
  )
}