import React, { useRef, useState, useContext, useEffect, Fragment } from "react";
import { Input, Form, Select, InputNumber, InputRef, FormInstance } from "antd";
import classNames from 'classnames';
import './index.less'

const { Option } = Select;

const EditableContext = React.createContext<FormInstance<any> | null>(null);

interface EditableRowProps {
    index: number;
}

export const EditableRow: React.FC<EditableRowProps> = ({ index, ...props }) => {
    const [form] = Form.useForm();
    return (
        <Form form={form} component={false} autoComplete="off">
            <EditableContext.Provider value={form}>
                <tr {...props} />
            </EditableContext.Provider>
        </Form>
    );
};

interface EditableCellProps<T> {
    editable: boolean;
    cellKey: string,
    selectedKey: string,
    children: React.ReactNode;
    dataIndex: string;
    record: T;
    align?: "left" | "center" | "right",
    type?: 'Input' | 'Select' | 'InputNumberPrice' | 'InputNumber' | 'InputNumberPercent' | 'TextArea';
    options?: any[];
    allowClear?: boolean;
    showSelectSearch?: boolean;
    directEdit?: boolean;
    // onSelectChange?: (value: any) => void;
    handleSave?: (record: T) => void;
    pressEnter?: (record: T) => void;
    pressTab?: (record: T) => void;
    onTap?: (record: T, cellKey: string) => void;
    onRightTap?: (e, record: T, cellKey: string) => void;
}

export const EditableCell = <T,>({
    editable,
    cellKey,
    selectedKey,
    children,
    dataIndex,
    record,
    align,
    type,
    options,
    allowClear,
    showSelectSearch,
    directEdit,
    // onSelectChange,
    handleSave,
    pressEnter,
    pressTab,
    onTap,
    onRightTap,
    ...restProps
}: EditableCellProps<T>) => {
    const [editing, setEditing] = useState(false);
    const inputRef = useRef<InputRef>(null);
    const selectRef = useRef<any>();
    const form = useContext(EditableContext)!;
    const divRef = useRef<HTMLDivElement>();

    useEffect(() => {
        if (!!cellKey && cellKey === selectedKey) {
            divRef.current?.focus();
        }
    }, [selectedKey])

    useEffect(() => {
        if (editing) {
            inputRef.current?.focus({ cursor: 'end', });
            selectRef.current?.focus();
        }
    }, [editing]);

    const onKeydown = (e) => {
        let keyCode = e.key;
        if (editing) return;
        if (keyCode.length === 1 && keyCode.match(/[a-zA-Z0-9\w\W]/i)) {
            if (!!cellKey && cellKey === selectedKey) {
                toggleEdit()
                // divRef.current?.removeEventListener('keydown', onKeydown)
            }
        }
        if (e.key === 'Enter' && !!pressEnter) {
            pressEnter(record);
            // divRef.current?.removeEventListener('keydown', onKeydown)
        }
        if (e.key === 'Tab' && !!pressTab) {
            e.preventDefault();
            setTimeout(() => {
                pressTab(record);
            }, 0)
            
            // divRef.current?.removeEventListener('keydown', onKeydown)
        }
    }

    const onKeyPress = (e) => {
        // if (type === 'TextArea' && e.ctrlKey && e.keyCode === 13) {
        //     onPressEnter();
        // } else if (type === 'TextArea' && e.keyCode === 13) {
        //     // inputRef.current?.blur();
            
            
        // }
        if (e.key === 'Escape') {
            // esc
            toggleEdit();
            setTimeout(() => {
                divRef.current?.focus();
            }, 1)
        }
        if (e.key === 'Tab') {
            e.preventDefault();
            setTimeout(() => {
                if (!!pressTab) {
                    pressTab(record);
                }
                save();
            }, 0)
        }
        if (e.key === 'Enter') {
            e.preventDefault();
            setTimeout(() => {
                onPressEnter();
            }, 0)
        }
    }



    const toggleEdit = () => {
        setEditing(!editing);
        form.setFieldsValue({ [dataIndex]: record[dataIndex] });
    };

    const onPressEnter = async () => {

        try {
            const values = await form.validateFields();

            toggleEdit();
            if (!!handleSave) {
                handleSave({ ...record, ...values });
            }
            if (!!pressEnter) {
                pressEnter({ ...record, ...values });
            }

        } catch (errInfo) {
            console.log('Save failed:', errInfo);
            toggleEdit();
        }

    }
    const save = async () => {
        try {
            const values = await form.validateFields();

            toggleEdit();
            if (!!handleSave) {
                handleSave({ ...record, ...values });
            }

        } catch (errInfo) {
            console.log('Save failed:', errInfo);

        }
    };

    const selectSave = async _ => {
        try {
            const values = await form.validateFields();
            toggleEdit();
            handleSave({ ...record, ...values });
            // if (onSelectChange) {
            //     onSelectChange(e);
            // }
        } catch (errInfo) {
            console.log('Save failed:', errInfo);
        }
    }

    const singleClick = () => {
        if (!directEdit) {
            return;
        }
        toggleEdit();
    }

    let childNode = children;

    const cellEditChildren = () => {
        if (type === 'Select') {
            return (
                <Select
                    ref={selectRef}
                    onBlur={toggleEdit}
                    onKeyDown={onKeyPress}
                    onChange={selectSave}
                    showSearch={showSelectSearch || false}
                    optionFilterProp="label"
                    size="small"
                    allowClear={allowClear}
                    bordered={false}
                    className="editable-select"
                    filterOption={(input, option) =>
                        (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                    }>
                    {options.map((item, idx) => (
                        <Option value={item.value} key={idx} label={item.label}>{item.label}</Option>
                    ))}
                </Select>
            )
        } else if (type === 'InputNumberPrice') {
            return (
                <InputNumber
                    onPressEnter={onPressEnter}
                    onBlur={save}
                    onKeyDown={onKeyPress}
                    bordered={false}
                    formatter={value => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
                    parser={value => value.replace(/\￥\s?|(,*)/g, '')} />
            )
        } else if (type === 'InputNumber') {
            return (
                <InputNumber
                    min={1}
                    max={99999}
                    onPressEnter={onPressEnter}
                    onBlur={save}
                    onKeyDown={onKeyPress}
                    bordered={false}
                />
            )
        } else if (type === 'InputNumberPercent') {
            return (
                <InputNumber
                    min={0}
                    max={100}
                    onPressEnter={onPressEnter}
                    onBlur={save}
                    onKeyDown={onKeyPress}
                    formatter={value => `${value}%`}
                    bordered={false}
                // parser={value => value.replace('%', '')} 
                />
            )
        } else if (type === 'TextArea') {
            return (
                <Input.TextArea
                    ref={inputRef}
                    onBlur={save}
                    bordered={false}
                    onKeyDown={onKeyPress} 
                    autoSize={{ minRows: 1 }} />
            )
        }
        else {
            return (
                <Input ref={inputRef} size="small" onBlur={save} onKeyDown={onKeyPress} bordered={false} autoComplete="off"/>
            )
        }
    }

    if (editable) {
        childNode = editing ? (
            <div className={classNames({
                "editable-cell-value-input": true,
                // "active": cellKey === selectedKey,
                "align-right": align === 'right',
            })}>
                <Form.Item
                    style={{ margin: 0 }}
                    name={dataIndex}
                >
                    {cellEditChildren()}
                    {/* <Input ref={inputRef} size="small" onPressEnter={save} onBlur={save} bordered={false} autoComplete="off" /> */}
                </Form.Item>
            </div>

        ) : (
            <div
                className={classNames({
                    "editable-cell-value-wrap": true,
                    // "active": cellKey === selectedKey,
                    "align-right": align === 'right',
                })}
                style={{ 
                    minHeight: '24px',
                    outline: 'none',
                }}
                onClick={singleClick}
                onDoubleClick={toggleEdit}
                contentEditable="false"
                suppressContentEditableWarning
                tabIndex={-1}
                ref={divRef}
                onKeyDown={e => {
                    onKeydown(e)
                }}
            >
                {children}
            </div>
        );
    }

    return (
        <td
            {...restProps}
            onContextMenu={(e) => { if (onRightTap) onRightTap(e, record, cellKey) }}
            onClick={() => { if (onTap) onTap(record, cellKey) }}>
            {childNode}
            {!!cellKey && cellKey === selectedKey && (
                <Fragment>
                    <div className="active-border-top" style={{ backgroundColor: !editable ? '#999' : null }}></div>
                    <div className="active-border-bottom" style={{ backgroundColor: !editable ? '#999' : null }}></div>
                    <div className="active-border-left" style={{ backgroundColor: !editable ? '#999' : null }}></div>
                    <div className="active-border-right" style={{ backgroundColor: !editable ? '#999' : null }}></div>
                </Fragment>
            )}
        </td>);
};