import React, {useState} from 'react'
import Link from 'next/link'
import axios from 'axios'

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

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

export default function CategoryItems({category: _category, allItems}) {
  const [category, updateCategory] = useState(_category)

  const itemUUIDs = category.items.map(item => item.uuid)
  const possibleItems = allItems.filter(item => !itemUUIDs.includes(item.uuid))

  const removeItem = uuid => async ev => {
    if(ev) ev.preventDefault()

    const {data: updated} = await axios.delete(`/api/categories/${category.uuid}/items/${uuid}`)
    updateCategory(updated)
  }

  const addItem = uuid => async ev => {
    if(ev) ev.preventDefault()

    const {data: updated} = await axios.put(`/api/categories/${category.uuid}/items/${uuid}`)
    updateCategory(updated)
  }

  return (
    <>
      <ActionBar title={`Editing children of "${category.name}"`}/>
      <h3>Items in this category</h3>
      <Table
        columns={[
          {name: 'Name', extractor: category => category.name},
          {name: 'URL Slug', extractor: category => <Link href={`/store/category/${category.urlslug}`}><a>{category.urlslug}</a></Link> },
          {name: 'Actions', extractor: category => (
            <span>
              <button onClick={removeItem(category.uuid)} className="buttonLink">Remove</button>
            </span>
          )}
        ]}
        // Map in an id property so the table can use array.map
        rows={category.items}
      />

      <h3>Add item</h3>
      <Table
        columns={[
          {name: 'Name', extractor: category => category.name},
          {name: 'URL Slug', extractor: category => <Link href={`/store/category/${category.urlslug}`}><a>{category.urlslug}</a></Link> },
          {name: 'Actions', extractor: category => (
            <span>
              <button onClick={addItem(category.uuid)} className="buttonLink">Add</button>
            </span>
          )}
        ]}
        // Map in an id property so the table can use array.map
        rows={possibleItems}
      />
    </>
  )
}