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

import ActionBar from '~/components/admin/actionBar'

import {Button as RMWCButton} from '@rmwc/button'
import {FormController, Input, TextArea, DecimalInput, Button, Checkbox} from '~/components/form'

Editcategory.getInitialProps = async ({ctx: {axios, query: {slug}}}) => {
  const {data: category} = await axios.get(`/api/categories/by-slug/${slug}`)
  return {category}
}

export default function Editcategory({category}) {
  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 afterUpdate = (category) => {
    router.replace(`/admin/categories/${category.urlslug}`)
  }

  return (
    <>
      <ActionBar title={`Editing "${category.name}"`}>
        <RMWCButton outlined onClick={()=>router.push(`/admin/categories/${category.urlslug}/items`)}>Edit Items ({category.items.length})</RMWCButton>
        <RMWCButton outlined onClick={()=>router.push(`/admin/categories/${category.urlslug}/children`)}>Edit Child Categories ({category.children.length})</RMWCButton>
      </ActionBar>
      <FormController url={`/api/categories/${category.uuid}`} afterSubmit={afterUpdate}>
        <Input name="name" initialValue={category.name} validate={stringLengthAtLeastOne} />
        <TextArea name="description" initialValue={category.description} validate={stringLengthAtLeastOne} />
        <Input label="URL Slug" name="urlslug" initialValue={category.urlslug} validate={slugRestrictions} />
        <Button type="submit">Save</Button>
      </FormController>
    </>
  )
}