import { PureComponent } from 'react'
import { List } from 'antd'
import styles from './index.less'

const { Item: ListItem } = List

class StandardList extends PureComponent {
    state = {
    }

    constructor(props) {
        super(props)
        const { selectedRows, data = {} } = props
    }

    /*static getDerivedStateFromProps(nextProps) {
        // clean state
        if (nextProps.selectedRows.length === 0) {
            return {
                selectedRowKeys: [],
            }
        }
        return null
    }*/

    handleListChange = (pagination) => {
        const { onChange } = this.props
        /*this.setState({
            indeterminate: false,
            checkAll: false,
        })*/

        onChange && onChange(pagination)
    }

    onCheckAllChange = e => {
        const { data = {}, onSelectRow } = this.props

        this.setState({
            selectedRows: e.target.checked ? data.list : [],
            indeterminate: false,
            checkAll: e.target.checked
        })

        onSelectRow && onSelectRow(e.target.checked ? data.list : [])
    }

    onChange = checkedValues => {
        const { data = {}, onSelectRow } = this.props

        this.setState({
            selectedRows: checkedValues,
            indeterminate: !!checkedValues.length && checkedValues.length < data.list.length,
            checkAll: checkedValues.length === data.list.length
        })

        onSelectRow && onSelectRow(checkedValues)
    }

    render() {
        const { data = {}, rowKey, loading, actions, details, className } = this.props
        const { list = [], pagination } = data
        const paginationProps = {
            showSizeChanger: true,
            showQuickJumper: true,
            ...pagination,
            pageSizeOptions: [8, 16, 40, 80],
            onChange: page => {
                pagination.current = page
                this.handleListChange(pagination)
            }
        }

        return (
            <div className={className ?? styles.cardList}>
                {list &&
                    <List
                        rowKey={rowKey || 'key'}
                        grid={{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 4 }}
                        loading={loading}
                        pagination={paginationProps}
                        dataSource={list}
                        renderItem={item => (
                            <ListItem>
                                {details(item)}
                            </ListItem>
                        )}
                    />
                }
            </div>
        )
    }
}

export default StandardList
