import * as React from 'react';
import Hook from '../../hook';
import { dataMessagesEN as en } from '../(translation)/en';
import { dataMessagesES as es } from '../(translation)/es';
import { Button, Typography } from '@mui/material';
import { DataColumn } from '../types/column.type';
import { DataColumnExtra } from '../types/table.type';
import { DataFilterType, DataOption } from '../types/filter.type';
import { NumberEditor } from './body.number';
import { DateEditor } from './body.date';
import { SetEditor } from './body.auto';
import { BooleanEditor } from './body.boolean';
import { TextEditor } from './body.text';
import { Dialog } from '../../dialogs/dialog';

export interface DataFromDialogInput {
    caption: string,
    columns: DataColumn[],
    changes?: any,
    options?: (column: DataColumn, inputValue: string, currentValue: any) => Promise<DataOption[]>,
}

export interface DataFromDialogOutput {
    changes?: any,
}

export const DataFromDialog = Hook.Dialog<DataFromDialogInput, DataFromDialogOutput>(({ data, open, onClose }) => {
    const [located] = Hook.useLocalization({ en, es });
    const [columns, setColumns] = React.useState<DataColumnExtra[]>([]);
    const [changes, setChanges] = React.useState<{ [key: string]: any }>({});

    React.useEffect(() => {
        const newColumns: DataColumnExtra[] = [];
        const newChanges: { [key: string]: any } = {};

        if (data && data.columns) {
            data.columns.forEach((column: any) => {
                if (!column.const) {
                    newColumns.push(column);
                }
            })
            newColumns.forEach(column => {
                newChanges[column.name] = null;
            })
            setColumns(newColumns);
            setChanges(newChanges);
        }
    }, [data]);

    const handleLoadOptions = (column: DataColumn) =>
        async ([inputValue, currentValue]: [any, any]) => {
            return data && data.options
                ? await data.options(column, inputValue, currentValue)
                : []
        }
    const handleTextChanged = (column: DataColumn) =>
        (value: string) => {
            setChanges({ ...changes, [column.name]: !value ? null : value });
        }
    const handleNumberChanged = (column: DataColumn) =>
        (value: number) => {
            setChanges({ ...changes, [column.name]: value });
        }
    const handleDateChanged = (column: DataColumn) =>
        (value: Date) => {
            setChanges({ ...changes, [column.name]: value });
        }
    const handleSetChanged = (column: DataColumn) =>
        (value: DataFilterType) => {
            setChanges({ ...changes, [column.name]: value });
        }
    const handleBoolChanged = (column: DataColumn) =>
        (value: boolean) => {
            setChanges({ ...changes, [column.name]: value });
        }
    const handleClose = (accept: boolean) => {
        const newChanges: any = {};

        Object.keys(changes).forEach(key => {
            if (changes[key] !== null && changes[key] !== undefined) {
                newChanges[key] = changes[key];
            }
        })
        if (onClose) {
            onClose({ data: { changes: newChanges }, rejected: !accept });
        }
    }
    const editors = columns.filter(x => x.type !== 'none').map(column => {
        if (column.type === 'number') {
            return (
                <tr key={column.name} style={{ minHeight: '50px', height: '50px' }}>
                    <td>
                        <Typography style={{ marginRight: '10px' }}>
                            {column.label ? column.label : column.name}
                        </Typography>
                    </td>
                    <td>
                        <NumberEditor
                            value={changes[column.name] ? changes[column.name] : 0}
                            onEditting={() => { }}
                            onChange={handleNumberChanged(column)}
                        />
                    </td>
                </tr>
            )
        }
        if (column.type === 'date') {
            return (
                <tr key={column.name} style={{ minHeight: '50px', height: '50px' }}>
                    <td>
                        <Typography style={{ marginRight: '10px' }}>
                            {column.label ? column.label : column.name}
                        </Typography>
                    </td>
                    <td>
                        <DateEditor
                            value={changes[column.name] ? changes[column.name] : null}
                            onEditting={() => { }}
                            onChange={handleDateChanged(column)}
                        />
                    </td>
                </tr>
            )
        }
        if (column.type === 'set') {
            return (
                <tr key={column.name} style={{ minHeight: '50px', height: '50px' }}>
                    <td>
                        <Typography style={{ marginRight: '10px' }}>
                            {column.label ? column.label : column.name}
                        </Typography>
                    </td>
                    <td>
                        <SetEditor
                            value={changes[column.name] ? changes[column.name] : null}
                            onEditting={() => { }}
                            options={handleLoadOptions(column)}
                            onChange={handleSetChanged(column)}
                        />
                    </td>
                </tr>
            )
        }
        if (column.type === 'boolean') {
            return (
                <tr key={column.name} style={{ minHeight: '50px', height: '50px' }}>
                    <td>
                        <Typography style={{ marginRight: '10px' }}>
                            {column.label ? column.label : column.name}
                        </Typography>
                    </td>
                    <td>
                        <BooleanEditor
                            messages={located.filters}
                            value={changes[column.name] ? changes[column.name] : null}
                            onEditting={() => { }}
                            onChange={handleBoolChanged(column)}
                        />
                    </td>
                </tr>
            )
        }
        return (
            <tr key={column.name} style={{ minHeight: '50px', height: '50px' }}>
                <td>
                    <Typography style={{ marginRight: '10px' }}>
                        {column.label ? column.label : column.name}
                    </Typography>
                </td>
                <td>
                    <TextEditor
                        value={changes[column.name] ? changes[column.name] : null}
                        onEditting={() => { }}
                        onChange={handleTextChanged(column)}
                    />
                </td>
            </tr>
        )
    });
    return (
        <Dialog
            open={!!open}
            width={{ min: "s" }}
            caption={data && data.caption ? data.caption : located.dialog.caption}
            onClose={() => handleClose(false)}
            actions={
                <Button onClick={() => handleClose(true)}>
                    {located.dialog.add}
                </Button>
            }>
            <table style={{ width: '100%' }}>
                <tbody>
                    {editors}
                </tbody>
            </table>
        </Dialog>
    );
})