import { Button, Card, Input, Table } from 'antd';
import React, { useEffect, useRef, useState } from 'react'
import {FormOutlined, SearchOutlined ,IssuesCloseOutlined} from '@ant-design/icons';
import Highlighter from 'react-highlight-words';
import { RmLevelService, RmZonesService } from '@gtpl/shared-services/masters';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';





const RmZones = () => {

 const [rackZone,setrackZone] = useState<any[]>([]);
const searchInput = useRef(null);
const [searchText, setSearchText] = useState("");
const [searchedColumn, setSearchedColumn] = useState("");
const rackZoneService = new RmZonesService();
const [page, setPage] = React.useState(1);

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

    const getrmZoneDetails =()=>{
        rackZoneService.getrmZoneDetails().then(res=>{
         if(res.status){
            setrackZone(res.data);
         }   else{
            if (res.intlCode){
                setrackZone([]);
                AlertMessages.getErrorMessage(res.internalMessage);
            

            }else{
                AlertMessages.getErrorMessage(res.internalMessage);
            }

         }
        }).catch(err => {
            setrackZone([]);
            AlertMessages.getErrorMessage(err.message);
          })
    }

    const handleSearch = (selectedKeys, confirm, dataIndex) => {
        confirm();
        setSearchText(selectedKeys[0]);
        setSearchedColumn(dataIndex);
      };
      const 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
              size="small"
              style={{ width: 90 }}
              onClick={() => {
                handleReset(clearFilters);
                setSearchedColumn(dataIndex);
                confirm({ closeDropdown: true });
              }}
            >
              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',
            key: 'id',
            width: '70px',
            responsive: ['md'],
            align: 'left',
            render: (text, object, index) => (page-1) * 10 +(index+1)


        },

        {
            title :'Rm Zone',
            width: 200,
            dataIndex:'rmZoneCode',
            render: (text: any, record: any) => { return record.rmZoneCode ? record.rmZoneCode : '-' } ,
            sorter: (a, b) => a.rmZoneCode.localeCompare(b.rmZoneCode),
            ...getColumnSearchProps('rmZoneCode')
        },
        {
           title : 'Rm Zone Name',
           width: 200,
           dataIndex:'rmZoneName',
           render: (text: any, record: any) => { return record.rmZoneName ? record.rmZoneName : '-' } ,
           sorter: (a, b) => a.rmZoneName.localeCompare(b.rmZoneName),
           ...getColumnSearchProps('rmZoneName')

        },
        {
            title : 'Unit Name',
            width: 200,
            dataIndex:'unitName',
            render: (text: any, record: any) => { return record.unitName ? record.unitName : '-' } ,
            sorter: (a, b) => a.unitName.localeCompare(b.unitName),
            ...getColumnSearchProps('unitName')

        }
        
    ]
  return (
    <div>
      <Card title={<span style={{color:'white'}}>RmZones</span>}
    style={{textAlign:'center'}} headStyle={{backgroundColor: '#69c0ff', border: 0 }}></Card>
    <Table
        //   rowKey={record => record.rackId}
          columns={columns}
          dataSource={rackZone}
          pagination={{
            onChange(current) {
              setPage(current);
            }
          }}
        //   pagination={{
        //     onChange(current) {
             
        //     }
        //   }}
          scroll={{x:true}}
        //   onChange={onChange}
          bordered />
    </div>
  )
}

export default RmZones