import { FGStockService } from '@gtpl/shared-services/warehouse-management';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { Button, Card } from 'antd';
import { Excel } from 'antd-table-saveas-excel';
import Table, { ColumnProps } from 'antd/lib/table';
import React, { useEffect, useRef, useState } from 'react';

export interface LocationsHistoryReportProps { }

export function LocationsHistoryReport(props: LocationsHistoryReportProps) {
    const [page, setPage] = React.useState(1);
    const [reportData, setReportData] = useState<any[]>([]);
    const service = new FGStockService();

    useEffect(() => {
        getlocationsHistoryReportData();
    }, [])

    const getlocationsHistoryReportData = () => {
        service.getlocationsHistoryReportData().then((res) => {
            if (res.data) {
                setReportData(res.data)
                AlertMessages.getSuccessMessage(res.internalMessage);
            } else {
                AlertMessages.getErrorMessage(res.internalMessage);
            }
        });
    }

       let rowIndex = 1;

      const excelColumns :any = [
        {
            title: '#Sno',
            width: 50,
        render: (text, object, index) => {
          if (index == reportData.length) {
            return null;
          } else {
            return rowIndex++;
          }
        }
   
        },
        {
            title: 'Action',
            dataIndex: 'actionItems',
            render: (text) => text ? text : "-",

        },
        {
            title: 'Sale Order',
            dataIndex: 'poNumber',
            render: (text) => text ? text : "-",
    
        },
        {
            title: 'Old Rack',
            dataIndex: 'oldRack',
            render: (text) => text ? text : "-",
        },
        {
            title: 'New Rack',
            dataIndex: 'newRack',
            render: (text) => text ? text : "-",
        },
        {
            title: 'Old SO',
            dataIndex: 'oldSo',
            render: (text) => text ? text : "-",
        },
        {
            title: 'new SO',
            dataIndex: 'upadatedSo',
            render: (text) => text ? text : "-",
        },
        {
            title: 'Cartons',
            dataIndex: 'cartons',
            render: (text) => text ? text : "-",
            
        },
    ];

    const exportExcel=()=>{
        const excel=new Excel();
        excel
          .addSheet('Locations-History-Report')
          .addColumns(excelColumns)
          .addDataSource(reportData, { str2num: true })
          .saveAs('Locations-History-Report.xlsx');
      }

    const Columns: ColumnProps<any>[] = [
        {
            title: '#Sno',
            key: 'sno',
            width: '30px',
            responsive: ['sm'],
            render: (text, object, index) => (page - 1) * 10 + (index + 1)
        },
        {
            title: 'Action',
            dataIndex: 'actionItems',
            render: (text) => text ? text : "-",

            
        },
        {
            title: 'Sale Order',
            dataIndex: 'poNumber',
            render: (text) => text ? text : "-",

            // render: (record, value) => {
            //     return (record.poNumber ? record.poNumber : '-');
            // }
        },
        {
            title: 'Old Rack',
            dataIndex: 'oldRack',
            render: (text) => text ? text : "-",

        },
        {
            title: 'New Rack',
            dataIndex: 'newRack',
            render: (text) => text ? text : "-",

        },
        {
            title: 'Old SO',
            dataIndex: 'oldSo',
            render: (text) => text ? text : "-",

        },
        {
            title: 'new SO',
            dataIndex: 'upadatedSo',
            render: (text) => text ? text : "-",

        },
        {
            title: 'Cartons',
            dataIndex: 'cartons',
            render: (text) => text ? text : "-",

            
        },
    ];

    return (
        <>
            <Card title={<span style={{ color: 'white' }}>Locations History</span>} style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#69c0ff', border: 0 }} extra={<Button onClick={() => { exportExcel(); }}>Get Excel</Button>}></Card>
            <Table
                rowKey={record => record.saleOrderId}
                columns={Columns}
                dataSource={reportData}
                scroll={{ x: true }}
                pagination={{
                    onChange(current) {
                        setPage(current);
                    }
                }}
                size='small'
                bordered />
        </>
    )
}
export default LocationsHistoryReport;