import React = require("react");
import { Number, Text, DateTime } from "../../fields/fields";
import { GridColumnFilterComponentProps, GridColumnFilter, ItemRowData } from "../simpleGrid/tiposFiltros";
import { Link } from "../../botones";
import { handleFormChange } from "../../form";
import { CellData } from "../simpleGrid/baseTypes";
import { compare } from "../simpleGrid/filtrarOrdenar";
import { cellToText } from "../simpleGrid/text";
import { MultiSelect } from "../../selector";

export interface FiltroPorValorUnico {
    valores?: string[];
}

function filter(item: CellData, data: FiltroPorValorUnico, string: string) {
    if(data.valores == null) return true;
    if(data.valores.length == 0) return true;
    return data.valores.indexOf(string) != -1;
}

function FiltroValorUnicoComponent<TItem>(props: GridColumnFilterComponentProps<TItem, FiltroPorValorUnico>) {
    const x = props.value || { valores: [] };
    const items = getItems(props.items, props.column);
    const titulo = props.titulo;
    const label = <span><Link iconClass="fa fa-times" onClick={props.onQuitar} /> <label>{titulo}</label></span>;
    return (
        <div>
            <MultiSelect value={x.valores || []} onChange={x => props.onChange({valores: x as string[]}) } items={items} label={label} />
        </div>
    )
}

/**Obtiene los valroes unicos de una columna */
function valoresUnicos<TItem>(datos: ItemRowData<TItem>[], column: string | number): string[] {
    const valores = datos.map(fila => fila.cell[column].string);
    const set = new Set(valores);
    return Array.from(set).sort((a, b) => compare(a, b));
}

function getItems<TItem>(datos: ItemRowData<TItem>[], column: string | number) {
    return valoresUnicos(  datos, column).map(x => ({ value: x, label: x }));
}

export const filtro: GridColumnFilter<FiltroPorValorUnico> = {
    component: FiltroValorUnicoComponent,
    filter: (item, data, string) =>  filter(item, data, string)
};