import { EnquiryReportFilterDto } from '@gtpl/shared-models/sale-management';
import { SaleOrderService } from '@gtpl/shared-services/sale-management';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { Button, Card, Col, Form, Input, Row, Select, Table } from 'antd'
import { useForm } from 'antd/lib/form/Form';
import React, { useEffect, useRef, useState } from 'react'
import { SearchOutlined } from '@ant-design/icons';
import Highlighter from 'react-highlight-words';
import { ColumnProps } from 'antd/lib/table';
import { Excel } from 'antd-table-saveas-excel';


const EnquiryManagementReport = () => {

    const saleOrderService=new SaleOrderService();
    const [enquiryReport,setEnquiryReport]=useState([]);
    const {Option}=Select;
    const [form] = Form.useForm();
    const [enquiryNumbers, setEnquiryNumbers] = useState<any[]>([]);
    const [searchText, setSearchText] = useState('');
    const [searchedColumn, setSearchedColumn] = useState('');
    const searchInput = useRef(null);

    useEffect(()=>{
        getData();
        getAllEnquiryNumbers();
    },[])

    const getData = () => {
        const req = new EnquiryReportFilterDto()
        if (form.getFieldValue('enquiryNumber') !== undefined) {
          req.enquiryNumber = form.getFieldValue('enquiryNumber')
        }
        saleOrderService.getEnquiryManagementReport(req).then(res => {
            if (res.status) {
                setEnquiryReport(res.data);
            } else {
              setEnquiryReport([])
                AlertMessages.getErrorMessage(res.internalMessage);
            }
        })
    };

    const getAllEnquiryNumbers = () => {
        saleOrderService.getAllEnquiryNumbers().then(res => {
            if (res.status) {
                setEnquiryNumbers(res.data);
            } else {
              setEnquiryNumbers([])
                AlertMessages.getErrorMessage(res.internalMessage);
            }
        })
    };

    const onReset = () => {
        form.resetFields();
        getData();
      };

      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: ColumnProps<any>[]=[
        {
            title:"Enquiry Number",
            dataIndex:"enquiryNumber",
            sorter: (a, b) => a.enquiryNumber?.localeCompare(b.enquiryNumber),
            sortDirections: ['descend', 'ascend'],
            ...getColumnSearchProps('enquiryNumber')
        },
        {
            title:"Category",
            dataIndex:"",
        },
        {
            title:"Product",
            dataIndex:"shortCode",
            sorter: (a, b) => a.shortCode?.localeCompare(b.shortCode),
            sortDirections: ['descend', 'ascend'],
            ...getColumnSearchProps('shortCode')
        },
        {
            title:"Pack Style",
            dataIndex:"packingMethodName",
            sorter: (a, b) => a.packingMethodName?.localeCompare(b.packingMethodName),
            sortDirections: ['descend', 'ascend'],
            ...getColumnSearchProps('packingMethodName')
        },
        {
            title:"style Weighment",
            dataIndex:"",
        },
        {
            title:"Unit Price",
            dataIndex:"unitPrice",
            sorter: (a, b) => a.unitPrice?.localeCompare(b.unitPrice),
            sortDirections: ['descend', 'ascend'],
            ...getColumnSearchProps('unitPrice')
        },
        {
            title:"Net Shrimp Weight",
            dataIndex:"shrimpWeight",
            sorter: (a, b) => a.shrimpWeight?.localeCompare(b.shrimpWeight),
            sortDirections: ['descend', 'ascend'],
            ...getColumnSearchProps('shrimpWeight')
        },
        {
            title:"No. Of Cases",
            dataIndex:"cases",
            sorter: (a, b) => a.cases?.localeCompare(b.cases),
            sortDirections: ['descend', 'ascend'],
            ...getColumnSearchProps('cases')
        },
        {
            title:"Net Case Weight",
            dataIndex:"caseWeight",
            sorter: (a, b) => a.caseWeight?.localeCompare(b.caseWeight),
            sortDirections: ['descend', 'ascend'],
            ...getColumnSearchProps('caseWeight')
        },
        {
            title:"Net Weight",
            dataIndex:"netWeight",
            sorter: (a, b) => a.netWeight?.localeCompare(b.netWeight),
            sortDirections: ['descend', 'ascend'],
            ...getColumnSearchProps('netWeight')
        },
        {
            title:"Net Amount",
            dataIndex:"netAmount",
            sorter: (a, b) => a.netAmount?.localeCompare(b.netAmount),
            sortDirections: ['descend', 'ascend'],
            ...getColumnSearchProps('netAmount')
        },
        {
            title:"Gross Weight",
            dataIndex:"grossWeight",
            sorter: (a, b) => a.grossWeight?.localeCompare(b.grossWeight),
            sortDirections: ['descend', 'ascend'],
            ...getColumnSearchProps('grossWeight')
        },
        {
            title:"Frozen Weight",
            dataIndex:"",
        },
       
    ]

    let rowIndex = 1
    const excelColumn:any = [
        {
            title: 'SNo',
            width: 50,
        render: (text, object, index) => {
          if (index == enquiryReport.length) {
            return null;
          } else {
            return rowIndex++;
          }
        }
   
        },
        {
            title:"Enquiry Number",
            dataIndex:"enquiryNumber",
            render: (text) => text ? text : "-",

          
        },
        {
            title:"Category",
            dataIndex:"",
            render: (text) => text ? text : "-",

        },
        {
            title:"Product",
            dataIndex:"shortCode",
            render: (text) => text ? text : "-",

         
        },
        {
            title:"Pack Style",
            dataIndex:"packingMethodName",
            render: (text) => text ? text : "-",

         
        },
        {
            title:"style Weighment",
            dataIndex:"",
            render: (text) => text ? text : "-",

        },
        {
            title:"Unit Price",
            dataIndex:"unitPrice",
            render: (text) => text ? text : "-",

        
        },
        {
            title:"Net Shrimp Weight",
            dataIndex:"shrimpWeight",
            render: (text) => text ? text : "-",

        
        },
        {
            title:"No. Of Cases",
            dataIndex:"cases",
            render: (text) => text ? text : "-",

       
        },
        {
            title:"Net Case Weight",
            dataIndex:"caseWeight",
            render: (text) => text ? text : "-",

         
        },
        {
            title:"Net Weight",
            dataIndex:"netWeight",
            render: (text) => text ? text : "-",

         
        },
        {
            title:"Net Amount",
            dataIndex:"netAmount",
            render: (text) => text ? text : "-",

        
        },
        {
            title:"Gross Weight",
            dataIndex:"grossWeight",
            render: (text) => text ? text : "-",

   
        },
        {
            title:"Frozen Weight",
            dataIndex:"",
            render: (text) => text ? text : "-",

        },
       
    ]

    const exportExcel=()=>{
        const excel=new Excel();
        excel
          .addSheet('Enquiry Management Report')
          .addColumns(excelColumn)
          .addDataSource(enquiryReport, { str2num: true })
          .saveAs('Enquiry-Management-Report.xlsx');
      }

  return (
    <div>
       <Card title={<span style={{ color: 'white' }}>Unapproved Enquiries Report</span>}
        style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#69c0ff', border: 0 }}
        extra={<Button onClick={() => { exportExcel(); }}>Get Excel</Button>}>
            <Form form={form} onFinish={getData} layout='vertical'>
                    <Row gutter={18}>
                    <Col xs={{ span: 12 }} sm={{ span: 12 }} md={{ span: 4}} lg={{ span: 8}} xl={{ span: 5}}>
                    <Form.Item label="Enquiry Number" name="enquiryNumber">
                    <Select
                showSearch
                optionFilterProp="children"
                filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                placeholder="Select  Enquiry Number"
                allowClear
                >
                {enquiryNumbers.map(dropData => {
                  return <Option value={dropData.enquiryId}>{dropData.enquiryNumber}</Option>
                })}
              </Select>
              </Form.Item>
                    </Col>
                    <Col style={{ paddingLeft: '10px', marginTop: '30px' }}>
            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
               
              >
                Get Report
              </Button>
            </Form.Item>
          </Col>
          <Col style={{ paddingLeft: '10px', marginTop: '30px' }}>
            <Form.Item>
              <Button
               type="primary"
                onClick={onReset}
                
              >
                Reset
              </Button>
            </Form.Item>
          </Col>  
                    </Row>
                    </Form>
        <Table columns={Columns} dataSource={enquiryReport}/>
       </Card>
    </div>
  )
}

export default EnquiryManagementReport