import React from 'react';
import { NoData } from 'sync-ql';
import { CellFactoryFunction, DataCellType, DataRow } from '../types/cell.type';
import { DataOption } from '../types/filter.type';
import { DataColumnExtra, TableMessages } from '../types/table.type';
import { SetEditor } from './body.auto';
import { BooleanEditor } from './body.boolean';
import { Value } from './body.content';
import { DateEditor } from './body.date';
import { NumberEditor } from './body.number';
import { TextEditor } from './body.text';
import { History } from './body.history';
import { TableBodyCell, TableBodyCellContent } from './style';

export interface DataTableBodyCellProps {
    tableRef: any,
    messages: TableMessages,
    style: React.CSSProperties,
    align?: "left" | "center" | "right" | "justify" | "inherit",
    value: DataCellType | CellFactoryFunction,
    row: DataRow,
    column: DataColumnExtra,
    index: number,
    editting: boolean,
    modified: boolean,
    options: (value: [string, string]) => Promise<DataOption[]>,
    onChange: (value: any) => void,
    onEditting: (editting: boolean) => void,
}

export const DataTableBodyCell: React.FC<DataTableBodyCellProps> = ({ tableRef, messages, style, align, value, row, column, index, editting, modified, options, onChange, onEditting }) => {
    const cellRef = React.useRef<any>();
    const [visible, setVisible] = React.useState<boolean>(NoData);

    React.useLayoutEffect(() => {
        const handleScroll = () => {
            if (cellRef.current) {
                const cellRect = cellRef.current.getBoundingClientRect();
                const tableRect = tableRef.current.getBoundingClientRect();

                const hidden = cellRect.right <= tableRect.left
                    || cellRect.left >= tableRect.right
                    || cellRect.bottom <= tableRect.top
                    || cellRect.top >= tableRect.bottom;

                if (!hidden !== visible) {
                    setVisible(!hidden)
                }
            }
        }
        if (visible === NoData) {
            handleScroll();
        }
        if (tableRef && tableRef.current) {
            tableRef.current.addEventListener('scroll', handleScroll);
        }
        else {
            window.addEventListener('scroll', handleScroll);
        }
        return () => {
            if (tableRef && tableRef.current) {
                tableRef.current.removeEventListener('scroll', handleScroll);
            }
            else {
                window.removeEventListener('scroll', handleScroll);
            }
        }
    }, [visible])

    const handleChange = (value: any) => {
        onChange(value);
    }
    const handleEditting = (value: boolean) => {
        onEditting(value);
    }
    const outputRow = { ...row };
    {
        delete outputRow['<key>'];
    }
    const isCellFactory = typeof value === 'function';
    const currentValue = isCellFactory
        ? value({
            value: row[column.name],
            row: outputRow,
            column,
            index,
            editting,
            modified,
            onChange: handleChange,
            onEditting: handleEditting
        })
        : value
    const getEditor = () => {
        switch (column.type) {
            case 'boolean':
                return (
                    <BooleanEditor
                        value={!!value}
                        messages={messages.filters}
                        onChange={handleChange}
                        onEditting={handleEditting} />
                )
            case 'number':
                return (
                    <NumberEditor
                        value={value as any}
                        onChange={handleChange}
                        onEditting={handleEditting} />
                )
            case 'date':
                return (
                    <DateEditor
                        value={value as any}
                        onChange={handleChange}
                        onEditting={handleEditting} />
                )
            case 'set':
                if (options) {
                    return (
                        <SetEditor
                            value={value as any}
                            options={options}
                            onChange={handleChange}
                            onEditting={handleEditting} />
                    )
                }
                break;
        }
        return (
            <TextEditor
                value={value as any}
                onChange={handleChange}
                onEditting={handleEditting} />
        )
    }
    const handleFocus = () => {
        if (!column.readonly) {
            onEditting(true);
        }
    }

    return (
        <TableBodyCell align={align} style={style} ref={cellRef}>
            {
                !!visible && (
                    !!column.history && (column.readonly || (column.disabled && column.disabled(row)) || !editting) &&
                    <div style={{ position: 'relative', width: '100%', height: '100%' }}>
                        <History
                            messages={messages}
                            row={row}
                            column={column}
                            history={column.history} />
                    </div>
                )
            }
            <TableBodyCellContent style={{ minWidth: column.minWidth, maxWidth: column.maxWidth, backgroundImage: 'inherit' }} onClick={handleFocus}>
                {
                    !!visible && (
                        !column.readonly && (!column.disabled || !column.disabled(row)) && editting && !isCellFactory
                            ? getEditor()
                            : <Value
                                modified={modified}
                                disabled={column.disabled && column.disabled(row)}
                                column={column}
                                value={
                                    typeof currentValue === 'boolean'
                                        ? currentValue
                                            ? messages.filters.true
                                            : messages.filters.false
                                        : currentValue
                                } />
                    )
                }
            </TableBodyCellContent>
        </TableBodyCell>
    )
}