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

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

export const DataTableFilterText: React.FC<DataTableFilterTextProps> = ({ style, between, messages, value, onChange }) => {
    const getValue = () => {
        const str = (v: any): string | null => {
            return v
                ? typeof v === 'boolean'
                    ? v
                        ? messages.true
                        : messages.false
                    : `${v}`
                : ''
        }
        return between
            ? Array.isArray(value)
                ? value.length > 0
                    ? value.length > 1
                        ? [str(value[0]), str(value[1])]
                        : [str(value[0]), '']
                    : ['', '']
                : [str(value), '']
            : Array.isArray(value)
                ? value.length > 0
                    ? str(value[0])
                    : ''
                : str(value)
    }
    const handleChange1 = (event: any) => {
        const val = event.target.value;

        if (between) {
            const value = getValue() as string[];

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

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

        if (between) {
            const value = getValue() as string[];

            if (val && value[0] && value[0] > val) {
                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={between ? (getValue() as any)[0] : getValue()}
                onChange={handleChange1}
            />
            {
                between &&
                <TextField
                    style={{ width: 'calc(50% - 16px)' }}
                    variant="standard"
                    value={(getValue() as any)[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>
)