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'

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 = (category) => {
  router.push(`/admin/categories/${category.urlslug}`)
}

export default function Newcategory() {
  return (
    <>
      <ActionBar title="Create New category"/>
      <FormController url="/api/categories" afterSubmit={afterCreate}>
        <Input name="name" validate={stringLengthAtLeastOne} />
        <TextArea name="description" validate={stringLengthAtLeastOne} />
        <Input label="URL Slug" name="urlslug" validate={slugRestrictions} />
        <p><strong>Note:</strong> You can add items to a category after creating it</p>
        <Button type="submit">Create</Button>
      </FormController>
    </>
  )
}