import React from "react"
import { IconButton, SvgIcon, TextField } from "@mui/material"
import { DataFilterType, FiltersMessage } from "../types/filter.type"
import { FilterInputContainer } from "./style"

export interface DataTableFilterNumberProps {
    style?: React.CSSProperties,
    between?: boolean,
    messages: FiltersMessage,
    range: [DataFilterType, DataFilterType],
    value: DataFilterType | [DataFilterType, DataFilterType]
    onChange: (value: string | number | null | (string | number | null)[]) => void,
}

export const DataTableFilterNumber: React.FC<DataTableFilterNumberProps> = ({ style, between, range, value, onChange }) => {
    const toString = (num: number | null) => {
        const result = num !== 0 && !num
            ? ''
            : `${num}`
        return result;
    }
    const validate = (newValue: any, currentValue: any = null) => {
        const result = typeof newValue === 'string'
            ? !isNaN(Number(`${newValue}0`))
                ? newValue
                : currentValue
            : typeof newValue === 'boolean'
                ? newValue ? 1 : 0
                : newValue === 0 || (!!newValue && !isNaN(Number(newValue)))
                    ? Number(newValue)
                    : currentValue
        return range && range.length > 0
            ? range.length > 1
                ? Math.max(Number(range[0]), Math.min(result, Number(range[1])))
                : Math.max(Number(range[0]), result)
            : result;
    }
    const getValue = () => {
        const result = between
            ? Array.isArray(value)
                ? value.length > 0
                    ? value.length > 1
                        ? [validate(value[0]), validate(value[1])]
                        : [validate(value[0]), null]
                    : [null, null]
                : [validate(value), null]
            : Array.isArray(value)
                ? value.length > 0
                    ? validate(value[0])
                    : null
                : validate(value)
        return result;
    }
    const handleChange1 = (event: any) => {
        const val = validate(event.target.value, getValue());

        if (between) {
            const value = getValue();

            if (val && value[1] && Number(`${value[1]}0`) < Number(`${val}0`)) {
                value[0] = value[1];
                value[1] = val;
            }
            else value[0] = val;

            onChange(value);
        }
        else {
            onChange(val)
        }
    }
    const handleChange2 = (event: any) => {
        const val = validate(event.target.value, getValue());

        if (between) {
            const value = getValue();

            if (val && value[0] && Number(`${value[0]}0`) > Number(`${val}0`)) {
                value[1] = value[0];
                value[0] = val;
            }
            else value[1] = val;

            onChange(value);
        }
        else {
            onChange(val)
        }
    }
    const handleClear = () => {
        if (between) {
            onChange([null, null]);
        }
        else {
            onChange(null)
        }
    }

    return (
        <FilterInputContainer style={style}>
            <TextField
                style={{ width: between ? 'calc(50% - 16px)' : 'calc(100% - 32px)' }}
                variant="standard"
                value={toString(between ? getValue()[0] : getValue())}
                onChange={handleChange1}
            />
            {
                between &&
                <TextField
                    style={{ width: 'calc(50% - 16px)' }}
                    variant="standard"
                    value={toString(getValue()[1])}
                    onChange={handleChange2}
                />
            }
            <IconButton className="filter-clear-button" onClick={handleClear} >
                <CloseIcon />
            </IconButton>
        </FilterInputContainer>
    )
}

const CloseIcon = () => (
    <SvgIcon fontSize="small" width="24" height="24" overflow="hidden" viewBox="0 0 24 24">
        <g>
            <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
        </g>
    </SvgIcon>
)