import { GrnService } from "@gtpl/shared-services/procurement"
import { Button, Card, Col, DatePicker, Form, Input, Row, Select, Table } from "antd"
import React, { useEffect, useRef, useState } from "react"
import Highlighter from 'react-highlight-words';
import { SearchOutlined, FilePdfOutlined, DownloadOutlined } from '@ant-design/icons';
import { ColumnProps } from "antd/lib/table";
import moment from "moment";
import { RmRatesReportReq } from "@gtpl/shared-models/procurement-management";
import { Excel } from "antd-table-saveas-excel";

export const RmRatesUploadedDatesReport =() =>{
    const [data,setData] = useState([])
    const [countRanges,setCountRanges] = useState([])

    const service = new GrnService()
  const searchInput = useRef(null);
  const [searchText, setSearchText] = useState('');
    const [searchedColumn, setSearchedColumn] = useState('');
    const [pageSize, setPageSize] = useState(100);
    const [page, setPage] = React.useState(1);
    const [form] = Form.useForm();
    const { Option } = Select;
    const { RangePicker } = DatePicker;

    useEffect(()=>{
        getData()
        },[])
    const getData =() =>{
        const req = new RmRatesReportReq()
        if(form.getFieldValue('countRangeId') != undefined){
            req.countRangeId = form.getFieldValue('countRangeId')
        }
        if(form.getFieldValue('status') != undefined){
            req.status = form.getFieldValue('status')
        }
       
        if(form.getFieldValue('date') != undefined){
            req.fromDate = moment(form.getFieldValue('date')[0]).format('YYYY-MM-DD')
        }
        if(form.getFieldValue('date')!= undefined){
            req.toDate = moment(form.getFieldValue('date')[1]).format('YYYY-MM-DD')
        }
        if(form.getFieldValue('rateDate') != undefined){
          req.rateDate = moment(form.getFieldValue('rateDate')).format('YYYY-MM-DD')
      }
        // moment(form.getFieldValue('date')).format('YYYY-MM-DD')
        service.getRmRateReportCountRanges().then((res)=>{
            if(res.status){
                setCountRanges(res.data)
            }else{
                setCountRanges([])
            }
        })

        service.getRmRateReportData(req).then((res)=>{
            if(res.status){
                setData(res.data)
            }else{
                setData([])
            }
        })
    }
  const handleSearch = (selectedKeys, confirm, dataIndex) => {
    // console.log(selectedKeys);
    // console.log(confirm);
    // console.log(dataIndex);
    confirm();
    setSearchText(selectedKeys[0]);
    setSearchedColumn(dataIndex);
  }
  const handleReset = (clearFilters) => {
    clearFilters();
    setSearchText('');
  } 
  const onReset = () => {
    form.resetFields();
    getData()
  };
  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' }}
        />
        {console.log(selectedKeys)}
        <Button
          type="primary"
          onClick={() => {
            handleSearch(selectedKeys, confirm, dataIndex)
          }}
          icon={<SearchOutlined />}
          size="small"
          style={{ width: 90, marginRight: 8 }}
        >
          Get Report
        </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) => {
      return 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 ? text.toString() : ''}
          />
        ) : (
          text
        )
      ) : null,
  });
    const columnsSkelton: ColumnProps<any>[] = [
        {
          title: 'S No',
          key: 'sno',
          width: '70px',
          fixed: 'left',
          render: (text, object, index) => (page - 1) * 10 + (index + 1)
        },
        {
          title: 'Count',
          dataIndex: 'count',
          width: '100px',
          fixed: 'left',
          sorter: (a, b) => String(a.count).localeCompare(String(b.count)),
          sortDirections: ['descend', 'ascend'],
        },
        {
          title: 'Price',
          dataIndex: 'price',
          width: '120px',
          sorter: (a, b) => String(a.price).localeCompare(String(b.price)),
          sortDirections: ['descend', 'ascend'],
          
        },
        {
          title: 'Type',
          dataIndex: 'type',
          width: '140px',
          sorter: (a, b) => String(a.type).localeCompare(String(b.type)),
          sortDirections: ['descend', 'ascend'],
          ...getColumnSearchProps('type')
        },
       
        {
          title: 'Company',
          dataIndex: 'company',
          width: '150px',
          sorter: (a, b) => String(a.company).localeCompare(String(b.company)),
          sortDirections: ['descend', 'ascend'],
          ...getColumnSearchProps('company'),
          render: (value, record) => {
            return (record.company ? record.company : '-')
          },
        },
        // {
        //   title: 'Count Range',
        //   dataIndex: 'countRange',
        //   width: '120px',
        // //   sorter: (a, b) => a.countRange?.localeCompare(b.countRange),
        // //   sortDirections: ['descend', 'ascend'],
        // //   ...getColumnSearchProps('countRange')
        // },
        {
            title: 'Effected',
            dataIndex: 'effected',
            width: '150px',
            sorter: (a, b) => a.effected?.localeCompare(b.effected),
            sortDirections: ['descend', 'ascend'],
            ...getColumnSearchProps('effected'),
            render: (value, record) => {
              return (record.effected ? moment(record.effected).format('DD-MM-YYYY') : '-')
            },
          },
          {
            title: 'Status',
            dataIndex: 'status',
            width: '150px',
            sorter: (a, b) => a.status?.localeCompare(b.status),
            sortDirections: ['descend', 'ascend'],
            ...getColumnSearchProps('status'),
            render: (value, record) => {
              return (record.status ? record.status: '-')
            },
          },
      ];
      const excelColumns:any= [
        {
          title: 'S No',
          key: 'sno',
          width: '70px',
          fixed: 'left',
          render: (text, object, index) => (page - 1) * 10 + (index + 1)
        },
        {
          title: 'Count',
          dataIndex: 'count',
          width: '100px',
         },
        {
          title: 'Price',
          dataIndex: 'price',
          width: '120px',
         
        },
        {
          title: 'Type',
          dataIndex: 'type',
          },
       
        {
          title: 'Company',
          dataIndex: 'company',
         render: (value, record) => {
            return (record.company ? record.company : '-')
          },
        },
        // {
        //   title: 'Count Range',
        //   dataIndex: 'countRange',
        // //   sorter: (a, b) => a.countRange?.localeCompare(b.countRange),
        // //   sortDirections: ['descend', 'ascend'],
        // //   ...getColumnSearchProps('countRange')
        // },
        {
            title: 'Effected',
            dataIndex: 'effected',
           render: (value, record) => {
              return (record.effected ? moment(record.effected).format('DD-MM-YYYY') : '-')
            },
          },
          {
            title: 'Status',
            dataIndex: 'status',
            render: (value, record) => {
              return (record.status ? record.status: '-')
            },
          },
      ];
      const exportExcel = () => {
        const excel = new Excel();
        excel
          .addSheet('rm-rates-report')
          .addColumns(excelColumns)
          .addDataSource(data, { str2num: true })
          .saveAs('Rm-Rates-Report.xlsx');
      }

    
return(
    <Card  title={<span style={{color:'white'}}>RM RATES REPORT</span>} style={{textAlign:'center'}} headStyle={{ backgroundColor: '#69c0ff', border: 0 }}
    extra={
      <div>
        <Button icon={<DownloadOutlined />} onClick={() => { exportExcel(); }} style={{marginRight:30}}>
          GET EXCEL
        </Button>
        {/* <Button icon={<FilePdfOutlined  />} onClick={() => { handleExportPDF(); }}>
          Download PDF
        </Button> */}
      </div>
    }>
        <Form form={form} onFinish={getData} size='small' layout="vertical">
            <Row gutter={24}>
           <Col xs={{span:24}} sm={{span:24}} md={{span:8}} lg={{span:6}} xl={{span:2}}  >
              <Form.Item name="countRangeId" label="Count ">
                    <Select
                  placeholder="Select Count"
                  allowClear
                  showSearch
                >
                  <Option value={undefined}>Please select Count</Option>
                  {countRanges.map(stockType => {
                    return <Option value={stockType.count} >{stockType.count}</Option>
                  })}
                </Select>
              </Form.Item>
            </Col>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>

            <Form.Item name="status"
                label="Status"
                >
            <Select
                  placeholder="Select status"
                  allowClear
                  showSearch
                >
                  <Option value={'PREVIOUS'}>PREVIOUS</Option>
                  <Option value={'CURRENT'}>CURRENT</Option>

                </Select>
                </Form.Item>
              </Col>
            <Col></Col>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 8 }}>

            <Form.Item name="date"
                label="Effected Date"
                >
                <RangePicker />
              </Form.Item>
              </Col>
              <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>

<Form.Item name="rateDate"
    label="Date"
    >
    <DatePicker />
  </Form.Item>
  </Col>
  <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 2 }}>
                    <Form.Item>
                        <Button htmlType="submit" type="primary" style={{marginTop:'28px'}}>Submit</Button>
                    </Form.Item>
                    </Col>
                    <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 2 }} style={{paddingLeft:"45px"}}>
                    <Form.Item >
                        <Button htmlType="button" type="primary" onClick={() => onReset()}  style={{marginTop:'28px'}}>Reset</Button>
                    </Form.Item>
                    </Col>
            {/* <Col>
            <Button type="primary" htmlType="submit" >
              Submit
            </Button>
            </Col>
            <Col>
            <Button
              htmlType="button"
              style={{ margin: '0 14px' }}
              onClick={onReset}
            >
              Reset
            </Button>
          </Col> */}
          </Row>
            </Form> 
            <Table columns={columnsSkelton} dataSource={data}/>
    </Card>
)
}
export default RmRatesUploadedDatesReport