import React from 'react'
import router from 'next/router'
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 (
    <>
      <h2>Create New Item</h2>
      <FormController url="/api/items" afterSubmit={afterCreate}>
        <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" />
        <p><strong>Note:</strong> You can add images to an item after creating it</p>
        <Button type="submit">Create</Button>
      </FormController>
    </>
  )
}