import React from 'react'
import {
  amisRender,
  commonInfo,
  crudCommonOptions,
  horizontalFormOptions,
  paginationTemplate,
  time,
} from '../../util/amis.tsx'
import {useNavigate} from 'react-router'

const detailDialog = () => {
  return {
    title: '添加书架',
    size: 'md',
    body: {
      debug: commonInfo.debug,
      type: 'form',
      api: `${commonInfo.baseUrl}/book/save`,
      initApi: `${commonInfo.baseUrl}/book/detail/\${id}`,
      initFetchOn: '${id}',
      ...horizontalFormOptions(),
      canAccessSuperData: false,
      body: [
        {
          type: 'input-text',
          name: 'name',
          label: '书名',
          required: true,
          clearable: true,
        },
        {
          type: 'input-text',
          name: 'author',
          label: '作者',
          clearable: true,
        },
        {
          type: 'textarea',
          name: 'description',
          label: '描述',
          clearable: true,
        },
        {
          type: 'input-text',
          name: 'source',
          label: '来源',
          clearable: true,
          validations: {
            isUrl: true,
          },
        },
        {
          type: 'input-tag',
          name: 'tags',
          label: '标签',
          placeholder: '',
          clearable: true,
          source: `${commonInfo.baseUrl}/book/tags`,
          max: 5,
          joinValues: false,
          extractValue: true,
        },
      ],
    },
  }
}

function Bookshelf() {
  const navigate = useNavigate()
  return (
    <div className="bookshelf">
      {amisRender(
        {
          type: 'page',
          title: '书架',
          body: [
            {
              type: 'crud',
              api: `${commonInfo.baseUrl}/book/list`,
              ...crudCommonOptions(),
              ...paginationTemplate(
                undefined,
                undefined,
                [
                  {
                    type: 'action',
                    label: '',
                    icon: 'fa fa-plus',
                    actionType: 'dialog',
                    dialog: detailDialog(),
                  },
                ],
              ),
              columns: [
                {
                  name: 'name',
                  label: '书名',
                  width: 120,
                  fixed: 'left',
                },
                {
                  name: 'author',
                  label: '作者',
                  width: 80,
                },
                {
                  name: 'description',
                  label: '描述',
                  width: 250,
                },
                {
                  name: 'source',
                  label: '来源',
                  width: 200,
                },
                {
                  name: 'tags',
                  label: '标签',
                  width: 150,
                },
                {
                  label: '创建时间',
                  ...time('createdTime'),
                },
                {
                  label: '更新时间',
                  ...time('modifiedTime'),
                },
                {
                  type: 'operation',
                  label: '操作',
                  width: 150,
                  fixed: 'right',
                  buttons: [
                    {
                      type: 'action',
                      label: '详情',
                      level: 'link',
                      onEvent: {
                        click: {
                          actions: [
                            {
                              actionType: 'custom',
                              // @ts-ignore
                              script: (context, action, event) => {
                                navigate(`/bookshelf/book/${context.props.data['id']}`)
                              },
                            },
                          ],
                        },
                      },
                    },
                    {
                      type: 'action',
                      label: '修改',
                      level: 'link',
                      size: 'sm',
                      actionType: 'dialog',
                      dialog: detailDialog(),
                    },
                    {
                      className: 'text-danger btn-deleted',
                      type: 'action',
                      label: '删除',
                      level: 'link',
                      actionType: 'ajax',
                      api: `get:${commonInfo.baseUrl}/book/remove/\${id}`,
                      confirmText: '确认删除书籍<span class="text-lg font-bold mx-2">${name}</span>？',
                      confirmTitle: '删除',
                    },
                  ],
                },
              ],
            },
          ],
        },
      )}
    </div>
  )
}

export default React.memo(Bookshelf)