import React, { useEffect, useState } from 'react'
import Helmet from 'react-helmet'
import Container, { ContainerBody } from 'components/Container'
import Box from 'components/Box'
import { Col, Icon, Row, Table, Tooltip } from 'antd'
import { PaginationConfig } from 'antd/lib/table'
import { compose } from 'redux'

function DataDictionary() {
  const [screenWidth, setScreenWidth] = useState(
    document.documentElement.clientWidth
  )

  const handleSetScreenWidth = () => {
    setScreenWidth(document.documentElement.clientWidth)
  }
  const basePagination: PaginationConfig = {
    defaultPageSize: 20,
    showSizeChanger: true
  }
  const tablePagination: PaginationConfig = {
    ...basePagination,
    simple: screenWidth <= 768
  }
  useEffect(() => {
    window.addEventListener('resize', handleSetScreenWidth, false)
    return () =>
      window.removeEventListener('resize', handleSetScreenWidth, false)
  }, [])
  return (
    <Container>
      <Helmet title="数据字典" />

      <ContainerBody>
        <Box>
          <Box.Header>
            <Box.Title>
              <Icon type="bars" />
              数据字典列表
            </Box.Title>
            <Box.Tools>
              <Tooltip placement="bottom" title="新增">
                {/* <AdminButton */}
                {/*  type="primary" */}
                {/*  icon="plus" */}
                {/*  onClick={this.addView} */}
                {/* /> */}
              </Tooltip>
            </Box.Tools>
          </Box.Header>
          <Box.Body>
            <Row>
              <Col span={24}>
                <Table
                  bordered
                  rowKey="id"
                  // loading={loading.view}
                  // dataSource={filterViews}
                  // columns={tableColumns}
                  pagination={tablePagination}
                  // onChange={this.tableChange}
                />
              </Col>
            </Row>
          </Box.Body>
        </Box>
      </ContainerBody>
    </Container>
  )
}

// const mapDispatchToProps = (dispatch: Dispatch<ViewActionType>) => ({
//   onLoadViews: (projectId) => dispatch(ViewActions.loadViews(projectId)),
//   onDeleteView: (viewId, resolve) => dispatch(ViewActions.deleteView(viewId, resolve)),
//   onCopyView: (view, resolve) => dispatch(ViewActions.copyView(view, resolve)),
//   onCheckName: (data, resolve, reject) => dispatch(checkNameUniqueAction('view', data, resolve, reject))
// })
//
// const mapStateToProps = createStructuredSelector({
//   views: makeSelectViews(),
//   currentProject: makeSelectCurrentProject(),
//   loading: makeSelectLoading()
// })
// const withConnect = connect<IViewListStateProps, IViewListDispatchProps, RouteComponentWithParams>(mapStateToProps, mapDispatchToProps)
// const withReducer = injectReducer({ key: 'view', reducer })
// const withSaga = injectSaga({ key: 'view', saga: sagas })

export default compose()(DataDictionary)
// withReducer,
// withSaga,
// withConnect