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

const detailDialog = (bookId: string | undefined) => {
  return {
    title: '添加书架',
    size: 'md',
    body: {
      debug: commonInfo.debug,
      type: 'form',
      api: `${commonInfo.baseUrl}/chapter/save`,
      initApi: `${commonInfo.baseUrl}/chapter/detail/\${id}`,
      initFetchOn: '${id}',
      ...horizontalFormOptions(),
      canAccessSuperData: false,
      body: [
        {
          type: 'hidden',
          name: 'bookId',
          value: bookId,
        },
        {
          type: 'input-number',
          name: 'sequence',
          label: '序号',
          required: true,
        },
        {
          type: 'input-text',
          name: 'name',
          label: '名称',
          required: true,
          clearable: true,
        },
        {
          type: 'textarea',
          name: 'description',
          label: '描述',
          clearable: true,
        },
      ],
    },
  }
}

function Book() {
  const navigate = useNavigate()
  const {id} = useParams()
  return (
    <div className="book">
      {amisRender(
        {
          type: 'page',
          title: '书籍详情',
          initApi: `${commonInfo.baseUrl}/book/detail/${id}`,
          body: [
            {
              type: 'property',
              title: '${name}',
              items: [
                {label: '作者', content: '${author}'},
                {label: '来源', content: '${source}'},
                {label: '标签', content: '${tags}'},
                {label: '描述', content: '${description}', span: 3},
              ],
            },
            {
              type: 'crud',
              api: {
                method: 'post',
                url: `${commonInfo.baseUrl}/chapter/list`,
                convertKeyToPath: false,
                data: {
                  query: {
                    equal: {
                      'book.id': id,
                    },
                  },
                  page: {
                    index: '${page}',
                    size: '${perPage}',
                  },
                  sort: [
                    {
                      column: 'sequence',
                      direction: 'DESC',
                    },
                    {
                      column: 'modifiedTime',
                      direction: 'ASC',
                    },
                  ],
                },
              },
              ...crudCommonOptions(),
              ...paginationTemplate(
                undefined,
                undefined,
                [
                  {
                    type: 'action',
                    label: '',
                    icon: 'fa fa-rotate-right',
                    actionType: 'ajax',
                    tooltip: '序号重排',
                    tooltipPlacement: 'top',
                    api: `get:${commonInfo.baseUrl}/chapter/generate_sequence`,
                    confirmText: '确认重排序号？',
                    confirmTitle: '序号重拍',
                  },
                  {
                    type: 'action',
                    label: '',
                    icon: 'fa fa-upload',
                    actionType: 'dialog',
                    dialog: {
                      title: '导入章节',
                      size: 'md',
                      body: {
                        debug: commonInfo.debug,
                        type: 'form',
                        api: `post:${commonInfo.baseUrl}/chapter/save_with_content`,
                        ...horizontalFormOptions(),
                        canAccessSuperData: false,
                        body: [
                          {
                            type: 'hidden',
                            name: 'bookId',
                            value: id,
                          },
                          {
                            type: 'select',
                            name: 'mode',
                            label: '导入方式',
                            selectFirst: true,
                            options: [
                              {
                                label: '新增',
                                value: 'CREATE',
                              },
                              {
                                label: '覆盖',
                                value: 'OVERRIDE',
                              },
                            ],
                          },
                          {
                            type: 'input-text',
                            name: 'name',
                            label: '章节名称',
                            required: true,
                            clearable: true,
                          },
                          {
                            type: 'input-text',
                            name: 'description',
                            label: '章节描述',
                            clearable: true,
                          },
                          {
                            type: 'editor',
                            name: 'content',
                            label: '章节内容',
                            required: true,
                            clearable: true,
                            options: {
                              wordWrap: 'on',
                            },
                          },
                        ],
                      },
                    },
                  },
                  /*{
                    type: 'action',
                    label: '',
                    icon: 'fa fa-plus',
                    actionType: 'dialog',
                    dialog: detailDialog(),
                  },*/
                ],
              ),
              columns: [
                {
                  name: 'sequence',
                  label: '序号',
                  width: 80,
                  align: 'center',
                },
                {
                  name: 'name',
                  label: '章节名称',
                  width: 150,
                },
                {
                  name: 'description',
                  label: '描述',
                  width: 250,
                },
                {
                  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/chapter/${context.props.data['id']}`)
                              },
                            },
                          ],
                        },
                      },
                    },
                    {
                      type: 'action',
                      label: '修改',
                      level: 'link',
                      size: 'sm',
                      actionType: 'dialog',
                      dialog: detailDialog(id),
                    },
                    {
                      className: 'text-danger btn-deleted',
                      type: 'action',
                      label: '删除',
                      level: 'link',
                      actionType: 'ajax',
                      api: `get:${commonInfo.baseUrl}/chapter/remove/\${id}`,
                      confirmText: '确认删除章节<span class="text-lg font-bold mx-2">${name}</span>？',
                      confirmTitle: '删除',
                    },
                  ],
                },
              ],
            },
          ],
        },
      )}
    </div>
  )
}

export default React.memo(Book)