import React from "react"
import { DataFilterType, FiltersMessage } from "../types/filter.type"
import { IconButton, SvgIcon } from "@mui/material";
import { DatePicker } from '@mui/x-date-pickers';
import { FilterInputContainer, FilterTextField } from "./style";
import { DateRangePicker } from "../../date-range";

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

export const DataTableFilterDate: React.FC<DataTableFilterDateProps> = ({ style, between, range, value, onChange }) => {
    const getValue = () => {
        const date = (v: any): Date | null => {
            return v && typeof v.getUTCFullYear === 'function'
                ? v
                : null
        }
        return between
            ? Array.isArray(value)
                ? value.length > 0
                    ? value.length > 1
                        ? [date(value[0]), date(value[1])]
                        : [date(value[0]), null]
                    : [null, null]
                : [date(value), null]
            : Array.isArray(value)
                ? value.length > 0
                    ? date(value[0])
                    : null
                : date(value);
    }
    const handleChange = (event: Date | null) => {
        const val = event
            ? new Date(event.getUTCFullYear(), event.getUTCMonth(), event.getUTCDate())
            : null;

        onChange(val)
    }
    const handleRangeChange = (event: [Date | null, Date | null]) => {
        const val = event
            ? [
                event[0]
                    ? new Date(event[0].getUTCFullYear(), event[0].getUTCMonth(), event[0].getUTCDate())
                    : null,
                event[1]
                    ? new Date(event[1].getUTCFullYear(), event[1].getUTCMonth(), event[1].getUTCDate())
                    : null,
            ]
            : null;
        const result = val.filter(x => x)

        onChange(result.length > 0 ? result : null)
    }
    const handleClear = () => {
        if (between) {
            onChange([null, null]);
        }
        else {
            onChange(null)
        }
    }

    return (
        <FilterInputContainer style={style}>
            {
                between
                    ? <DateRangePicker
                        value={getValue() as any}
                        minDate={range && range.length > 0 ? range[0] as any : undefined}
                        maxDate={range && range.length > 1 ? range[1] as any : undefined}
                        onChange={handleRangeChange}
                        TextFieldProps={{
                            variant: "standard",
                            style: { width: 'calc(100% - 32px)' }
                        }}
                    />
                    : <DatePicker
                        value={getValue()}
                        onChange={handleChange}
                        renderInput={
                            (params) => (
                                <FilterTextField
                                    {...params}
                                    variant="standard"
                                    style={{ width: 'calc(100% - 32px)' }}
                                />
                            )
                        }
                    />
            }
            <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>
)