import useModal from '@/components/Modal'
import {
  ArrowDownOutlined,
  ArrowUpOutlined,
  DeleteOutlined,
  EditOutlined,
  FileAddOutlined,
  FolderAddOutlined,
  SelectOutlined,
  DownOutlined
} from '@ant-design/icons'
import { PageContainer } from '@ant-design/pro-layout'
import { Button, Dropdown, Table, Menu, Space } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import { useRowScript } from './hooks/useRowScript'

export enum TemplateMode {
  PAPER = 'paper',
  UPLOAD = 'upload'
}
const items = [
  {
    key: '1',
    label: '预算业务表单'
  }
]

const Inventory = () => {
  const contentHeight = document.body.clientHeight - 122
  const [modal, ModalDOM] = useModal()
  const {
    loading,
    record,
    list,
    rowClick,
    move,
    addFolder,
    addFile,
    editFolder,
    deleteFolderOrFile,
    moveWithOperation
  } = useRowScript(modal)

  const columns: ColumnsType<API.ProfileTemplateItem> = [
    {
      title: '目录文件名称',
      dataIndex: 'name',
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      width: '50%'
    },
    {
      title: '状态',
      dataIndex: 'enable',
      align: 'center',
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      render: (text, record) => {
        if (record.folder) return null
        return text ? <span className="text-green">启用</span> : <span className="text-red">停用</span>
      }
    },
    {
      title: '是否必填',
      dataIndex: 'required',
      align: 'center',
      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      render: (text, record) => {
        if (record.folder) return null
        return text ? '是' : '否'
      }
    },
    {
      title: '资料提供方式',
      dataIndex: 'mode',
      align: 'center',
      render: (mode: TemplateMode, record) => {
        if (record.folder) return null
        return (
          <div>
            {mode.includes(TemplateMode.PAPER) ? (
              <span className="border border-hex-91d5ff text-blue bg-hex-e6f7ff rounded-1 px-1 text-sm">
                纸质
              </span>
            ) : null}
            {mode.includes(TemplateMode.UPLOAD) ? (
              <span className="border border-hex-9fede5 text-hex-13c2c2 bg-hex-e6fffb rounded-1 px-1 ml-2 text-sm">
                上传
              </span>
            ) : null}
          </div>
        )
      }
    }
  ]

  return (
    <PageContainer title={false}>
      <div style={{ height: `${contentHeight}px` }} className="bg-white">
        {list?.length && (
          <Table
            rowKey="ID"
            title={() => (
              <div className="ml-2 flex flex-nowrap justify-start items-center">
                <Dropdown
                  overlay={<Menu selectable defaultSelectedKeys={['1']} items={items} />}
                  trigger={['click']}>
                  <div className="font-bold cursor-pointer">
                    <Space>
                      {items[0].label}
                      <DownOutlined />
                    </Space>
                  </div>
                </Dropdown>
                <div className="children:mx-1 px-1 py-2 ml-5">
                  <Button icon={<FolderAddOutlined />} size="small" type="primary" ghost onClick={addFolder}>
                    新建目录
                  </Button>
                  <Button icon={<FileAddOutlined />} size="small" type="primary" ghost onClick={addFile}>
                    新建文件
                  </Button>
                  <Button
                    icon={<EditOutlined />}
                    size="small"
                    type="primary"
                    ghost
                    onClick={editFolder}
                    disabled={!record}>
                    编辑
                  </Button>
                  <Button
                    icon={<DeleteOutlined />}
                    size="small"
                    type="primary"
                    ghost
                    onClick={deleteFolderOrFile}
                    disabled={!record}>
                    删除
                  </Button>
                  <Button
                    icon={<ArrowUpOutlined />}
                    size="small"
                    type="primary"
                    ghost
                    disabled={!record?.moveable || record?.position === 'top'}
                    onClick={() => moveWithOperation('up')}>
                    上移
                  </Button>
                  <Button
                    icon={<ArrowDownOutlined />}
                    size="small"
                    type="primary"
                    ghost
                    disabled={!record?.moveable || record?.position === 'bottom'}
                    onClick={() => moveWithOperation('down')}>
                    下移
                  </Button>
                  <Button
                    icon={<SelectOutlined />}
                    size="small"
                    type="primary"
                    ghost
                    disabled={!record}
                    onClick={move}>
                    移动至
                  </Button>
                </div>
              </div>
            )}
            loading={loading}
            columns={columns}
            dataSource={list}
            pagination={false}
            size="small"
            bordered
            expandable={{ defaultExpandAllRows: true }}
            onRow={record => ({
              onClick: () => {
                console.log(record)

                rowClick(record)
              }
            })}
            rowClassName={row => (row.ID === record?.ID ? 'ant-table-row-selected' : '')}
          />
        )}
      </div>
      {ModalDOM}
    </PageContainer>
  )
}
export default Inventory