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 PayablesReportViewProps {
    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 PayablesReportView(props: PayablesReportViewProps) {
    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>
            //   )}
            />

        </>
    )
}