import { FileExcelFilled } from '@ant-design/icons';
import { StockItemCategoryServices } from '@gtpl/shared-services/masters';
import { Button, Card, Row, Table } from 'antd';
import { Excel } from 'antd-table-saveas-excel';
import { ColumnProps } from 'antd/es/table';
import React from 'react';
import { useEffect, useState } from 'react';
import { render } from 'react-dom';
import { Link } from 'react-router-dom';

export const StockItemCategoryView = () => {
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState<number>(10);
  const service = new StockItemCategoryServices();
  const [data, setData] = useState<any[]>([]);

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

  const getInfo = () => {
    service.getStockItem().then((res) => {
      if (res.status) {
        setData(res.data);
      }
    });
  };

  const columns: any[] = [
    {
      title: 'S No',
      key: 'sNo',
      responsive: ['sm'],
      render: (text, object, index) =>
        (page - 1) * pageSize + (index + 1) + pageSize * (page - 1),
    },
  
    {
      title: 'Category',
      dataIndex: 'category',
      // align:'right'
    },
    {
      title: 'Type',
      dataIndex: 'type',
    },

  ];

  let i = 1;
  const exceldata = [

    { title: 'S No', dataIndex: 'sNo', render: (text, object, index) => { 
      return index+1
   },
   width: 60, 
  
 },
    
    {
      title: 'Category',
      dataIndex: 'category',
      render: (text: any, record: any) => {
        return record.category ? record.category : '-';
      },
    },
    {
      title: 'Type',
      dataIndex: 'type',
      render: (text: any, record: any) => {
        return record.type ? record.type : '-';
      },
    },
  ];

  const exportExcel = () => {
    const excel = new Excel();
    excel
      .addSheet('Stock Item Category Excel')
      .addColumns(exceldata)
      .addDataSource(data, { str2num: true })
      .saveAs('Stock_Item_Category.xlsx');
  };
  return (
    <Card
      title="Stock Item Category"
      extra={
        <Link to="/stock-item-category-excel-upload">
          <span style={{ color: 'white' }}>
            <Button type={'primary'}>Upload Excel</Button>{' '}
          </span>
        </Link>
      }
    >
      <Row justify={'end'}>
        <Button
          type="default"
          style={{ color: 'green' }}
          onClick={exportExcel}
          icon={<FileExcelFilled />}
        >
          Download Excel
        </Button>
      </Row>
      <Table
        className="custom-table-wrapper"
        columns={columns}
        dataSource={data}
        size="small"
        pagination={{
          pageSize: 100,
          onChange(current, pageSize) {
            setPage(current);
            setPageSize(pageSize);
          },
        }}
      />
    </Card>
  );
};

export default StockItemCategoryView;