import { Table, Button, Input, } from 'antd';
import moment from 'moment';
import React, { useRef, useState } from 'react';
import Highlighter from 'react-highlight-words';
import { SearchOutlined, FilePdfOutlined, DownloadOutlined } from '@ant-design/icons';
export interface GeneralVendorPayReportViewProps {
    data:any[];
    loading?: boolean;
}

const formatIndianNumber = (num: number | string): string => {
    const number = Number(num);
    if (isNaN(number)) return '₹0.00';
    const [integer, decimal = '00'] = number.toFixed(2).split('.');
    const lastThree = integer.slice(-3);
    const otherDigits = integer.slice(0, -3);
    const formattedInteger = otherDigits
      ? otherDigits.replace(/\B(?=(\d{2})+(?!\d))/g, ',') + ',' + lastThree
      : lastThree;
    return `${formattedInteger}.${decimal}`;
  };

export default function GeneralVendorReportView(props: GeneralVendorPayReportViewProps) {
    const [page, setPage] = useState(1);
    const [pageSize, setPageSize] = useState<number>(10);

            const [searchText, setSearchText] = useState('');
            const [searchedColumn, setSearchedColumn] = useState('');
            const searchInput = useRef(null);
    
            function handleSearch(selectedKeys, confirm, dataIndex) {
              confirm();
              setSearchText(selectedKeys[0]);
              setSearchedColumn(dataIndex);
          };
          function handleReset(clearFilters) {
              clearFilters();
              setSearchText('');
          };
          const getColumnSearchProps = (dataIndex: string) => ({
              filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                  <div style={{ padding: 8 }}>
                      <Input
                          ref={searchInput}
                          placeholder={`Search ${dataIndex}`}
                          value={selectedKeys[0]}
                          onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                          onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
                          style={{ width: 188, marginBottom: 8, display: 'block' }}
                      />
                      <Button
                          type="primary"
                          onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
                          icon={<SearchOutlined />}
                          size="small"
                          style={{ width: 90, marginRight: 8 }}
                      >
                          Search
                      </Button>
                      <Button onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
                          Reset
                      </Button>
                  </div>
              ),
              filterIcon: filtered => (
                  <SearchOutlined type="search" style={{ color: filtered ? '#1890ff' : undefined }} />
              ),
              onFilter: (value, record) =>
                  record[dataIndex]
                      ? record[dataIndex]
                          .toString()
                          .toLowerCase()
                          .includes(value.toLowerCase())
                      : false,
              onFilterDropdownVisibleChange: visible => {
                  if (visible) { setTimeout(() => searchInput.current.select()); }
              },
              render: text =>
                  text ? (
                      searchedColumn === dataIndex ? (
                          <Highlighter
                              highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
                              searchWords={[searchText]}
                              autoEscape
                              textToHighlight={text.toString()}
                          />
                      ) : text
                  ) : null
          });

    const columns :any =[
        {
            title :'S No',
            render: (text, record, index) => {
                return (page - 1) * pageSize + index + 1;
              },        },
        {
            title: 'Vendor Name',
            dataIndex: 'vendorName',
            key: 'vendorName',
            ...getColumnSearchProps('vendorName')
        },
        {
            title:'Invoice No',
            dataIndex: 'invoiceNo',
            key: 'invoiceNo',
            ...getColumnSearchProps('invoiceNo')
        },
        {
            title: 'Invoice Date',
            dataIndex: 'invoiceDate',
            key: 'invoiceDate',
            render: (text, record) => {
                return text ? moment(text).format('YYYY-MM-DD') : '--';
            }
        },
        {
            title: 'Total Amount',
            dataIndex: 'totalPayables',
            key: 'totalPayables',
            ...getColumnSearchProps('totalPayables')
        },
        {
            title: 'Taxable Amount',
            dataIndex: 'taxableAmount',
            key: 'taxableAmount',
            ...getColumnSearchProps('taxableAmount')
        },
        {
            title: 'Paid Amount',
            dataIndex: 'paidAmount',
            key: 'paidAmount',
            ...getColumnSearchProps('paidAmount')
        },
        {
            title: 'Due Amount',
            dataIndex: 'overdue',
            key: 'overdue',
            render: (text, record) => {
                return text;
            },
            ...getColumnSearchProps('overdue')
        },
        {
            title: 'Aging',
            dataIndex: 'aging',
            key: 'aging',
        },
    ]

    const rangeTotals = props?.data?.reduce(
        (acc, record) => acc + ((Number(record.totalPayables) - Number(record.paidAmount)) || 0),
        0
      );

    return (
        <>
         <Table 
            columns={columns}
            dataSource={props.data}
            pagination={{
                onChange(current,pageSize) {
                    setPage(current);
                    setPageSize(pageSize);
                }
            }}
            // footer={() => (
            //     <div style={{ fontWeight: 'bold', display: 'flex', justifyContent: 'space-between', padding: '4px 8px' }}>
            //       <span style={{ width: columns[0].width }}>Total</span>
            //       <span style={{ width: columns[1].width, textAlign: 'right' }}>
            //         {formatIndianNumber(rangeTotals)}
            //       </span>
            //     </div>
            //   )}
            />

        </>
    )
}