import { Button, Input, InputRef, Space, Table, TableProps } from 'antd';
import { ColumnsType, ColumnType, FilterConfirmProps } from 'antd/lib/table/interface';
import { useRef, useState } from 'react';
import { Divider, Popconfirm, Switch, Tooltip } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import Highlighter from 'react-highlight-words';
import { useIntl } from 'react-intl';
import { EyeOutlined, EditFilled, CheckOutlined, CloseCircleOutlined } from '@ant-design/icons';
import { AlertMessages } from '../notifications';
interface Iprops {
    mainColumns: ColumnsType<any>;
    data: any[],
    filterColumnsData: { dataIndex: string, placeHolder: string }[],
    otherTableProps?: TableProps<any>,
    activateOrDeactivate: (tableDto: any) => void;
    view: (tableDto: any, isUpdate: boolean) => void;
}

export const FilterableGrid = (props: Iprops) => {
    const { formatMessage: fm } = useIntl();
    const { mainColumns, data, filterColumnsData, otherTableProps, activateOrDeactivate, view } = props;
    const [searchText, setSearchText] = useState('');
    const [searchedColumn, setSearchedColumn] = useState('');
    const searchInput = useRef<InputRef>(null);
    type DataIndex = string;

    const handleSearch = (
        selectedKeys: string[],
        confirm: (param?: FilterConfirmProps) => void,
        dataIndex: any,
    ) => {
        confirm();
        setSearchText(selectedKeys[0]);
        setSearchedColumn(dataIndex);
    };

    const handleReset = (clearFilters: () => void) => {
        clearFilters();
        setSearchText('');
    };

    const getColumnSearchProps = (dataIndex: DataIndex, placeHolder: any): ColumnType<typeof mainColumns> => ({
        filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
            <div style={{ padding: 8 }}>
                <Input
                    ref={searchInput}
                    placeholder={`Search ${placeHolder}`}
                    value={selectedKeys[0]}
                    onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                    onPressEnter={() => handleSearch(selectedKeys as string[], confirm, dataIndex)}
                    style={{ marginBottom: 8, display: 'block' }}
                />
                <Space>
                    <Button
                        type="primary"
                        onClick={() => handleSearch(selectedKeys as string[], confirm, dataIndex)}
                        icon={<SearchOutlined />}
                        size="small"
                        style={{ width: 90 }}
                    >
                        Search
                    </Button>
                    {/* <Button
                        onClick={() => clearFilters && handleReset(clearFilters)}
                        size="small"
                        style={{ width: 90 }}
                    >
                        Reset
                    </Button> */}
                    <Button
                        type="link"
                        size="small"
                        onClick={() => {
                            handleReset(clearFilters)
                            setSearchedColumn(dataIndex);
                            confirm({ closeDropdown: false });
                            // setSearchText((selectedKeys as string[])[0]);
                            
                           
                        }}
                    >
                        Reset
                    </Button>
                </Space>
            </div>
        ),
        filterIcon: (filtered: boolean) => (
            <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />
        ),
        onFilter: (value, record) =>
            record[dataIndex]
                .toString()
                .toLowerCase()
                .includes((value as string).toLowerCase()),
        onFilterDropdownVisibleChange: visible => {
            if (visible) {
                setTimeout(() => searchInput.current?.select(), 100);
            }
        },
        render: text =>
            searchedColumn === dataIndex ? (
                <Highlighter
                    highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
                    searchWords={[searchText]}
                    autoEscape
                    textToHighlight={text ? text.toString() : ''}
                />
            ) : (
                text
            ),
    });
    const filterColumnDataIndex = filterColumnsData.map(obj => obj.dataIndex);
    const columns: ColumnsType<any> = mainColumns.map(column => {
        const columnsObj = filterColumnDataIndex.includes(column['dataIndex']) ? {
            ...column,
            ...getColumnSearchProps(column['dataIndex'], column['title'])
        } : { ...column }
        return columnsObj;
    });

    columns.push(
        {
            title: fm({ id: "common.action", defaultMessage: 'Action' }),
            dataIndex: 'action',
            width: '20%',
            align: 'center',
            render: (text, RowData: any) => (
                <span>
                    <Tooltip placement="top" title={fm({ id: "common.view" })}>
                        <EyeOutlined style={{ color: "#1890ff", fontSize: '24px' }} onClick={e => {
                            view(RowData, false);
                        }} />
                    </Tooltip>
                    <Divider type="vertical" />
                    <Tooltip placement="top" title={fm({ id: "common.edit" })}>
                        <EditFilled onClick={e => {
                            if (RowData.isActive) {
                                view(RowData, true);
                            } else {
                                AlertMessages.getErrorMessage(fm({ id: `common.cannotEditDeactivated` }))
                            }
                        }} style={{ fontSize: '24px' }} className={RowData.isActive ? 'Editable-Icon' : 'disabled-Edit-Icon'} />
                    </Tooltip>
                    <Divider type="vertical" />
                    <Popconfirm
                        onConfirm={e => {
                            activateOrDeactivate(RowData);
                        }}
                        title={RowData.isActive ? fm({ id: "common.deActivateConfirmMsg", defaultMessage: 'Are you sure to Deactivate Record ?' }) : fm({ id: "common.activateConfirmMsg", defaultMessage: 'Are you sure to activate Record ?' })}>
                        <Tooltip placement="top" title={RowData.isActive ? fm({ id: "common.deActivate", defaultMessage: 'Deactivate' }) : fm({ id: "common.activate", defaultMessage: 'Activate' })}>
                            <Switch size='default'
                                className={RowData.isActive ? 'toggle-activated' : 'toggle-deactivated'}
                                checkedChildren={<CheckOutlined />}
                                unCheckedChildren={<CloseCircleOutlined />}
                                checked={RowData.isActive} />
                        </Tooltip>
                    </Popconfirm>
                </span>)
        }
    )


    return <Table columns={columns} dataSource={data} {...otherTableProps} />;

}

export default FilterableGrid;