import React from "react";
import {
     Widget } from "erpcore";
import {
     Table } from 'antd';
import "./index.less";
import {
     Resizable } from 'react-resizable';
import 'react-resizable/css/styles.css';


const WidgetOfBase = Widget.WidgetOfBase;
const ResizeableTitle = (props) => {
    
    const {
     onResize, width, ...restProps } = props;
    if (!width) {
    
        return <th {
    ...restProps} />
    }
    return (
        <Resizable
            width={
    width} height={
    0} onResize={
    onResize}>
            <th {
    ...restProps} />
        </ Resizable >
    )
};

class ReactTable extends WidgetOfBase {
    
    constructor(props) {
    
        super(props);
        this.state.columns = props.rcColumns;
    };

    components = {
    
        header: {
    
            cell: ResizeableTitle,
        },
    };

    handleResize = index => (e, {
     size }) => {
    
        const {
     tableKey } = this.props;
        this.setState(({
     columns }) => {
    
            const nextColumns = [...columns];
            nextColumns[index] = {
    
                ...nextColumns[index],
                // width: (size.width < 50) ? 50 : size.width,
                width: size.width,
            };
            console.log(nextColumns)
            if (tableKey) {
    
                localStorage.setItem(tableKey, JSON.stringify(nextColumns))
            }

            return {
     columns: nextColumns };
        });
    };

    renderOnMobile = () => {
    
        const {
     dataSource, pagination, selectedRowKeys, onSelectChange } = this.props;
        const columns = this.state.columns.map((col, index) => ({
    
            ...col,
            onHeaderCell: (column) => ({
    
                width: column.width,
                onResize: this.handleResize(index),
            }),
        }));
        const rowSelection = {
    
            selectedRowKeys,
            onChange: onSelectChange,
        };
        return (
            <div className="rc_table">
                <Table
                    columns={
    columns}
                    components={
    this.components}
                    dataSource={
    dataSource}
                    pagination={
    pagination}
                    size="middle"
                    rowSelection={
    rowSelection}
                    scroll={
    {
     x: true }}
                />
            </div>
        )
    }
}

export default ReactTable;