import React from "react";
import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/react';

export const Filter = ({ column }) => {
	return (
		<div style={{ marginTop: 5 }}>
			{column.canFilter && column.render("Filter")}
		</div>
	);
};

export function dateBetweenFilterFn(rows, id, filterValues) {

	const sd = filterValues[0] ? new Date(filterValues[0]) : undefined;
	const ed = filterValues[1] ? new Date(filterValues[1]) : undefined;
	if (ed || sd) {
		return rows.filter((r) => {
			const cellDate = new Date(r.values[id])
			if (ed && sd) {
				return cellDate >= sd && cellDate <= ed;
			} else if (sd) {
				return cellDate >= sd;
			} else {
				return cellDate <= ed;
			}
		});
	} else {
		return rows;
	}
}

export function DateRangeColumnFilter({
	column: { filterValue = [], preFilteredRows, setFilter, id }
}) {
	const [min, max] = React.useMemo(() => {
		let min = preFilteredRows.length
			? new Date(preFilteredRows[0].values[id])
			: new Date(0);
		let max = preFilteredRows.length
			? new Date(preFilteredRows[0].values[id])
			: new Date(0);

		preFilteredRows.forEach((row) => {
			const rowDate = new Date(row.values[id]);
			min = rowDate <= min ? rowDate : min;
			max = rowDate >= max ? rowDate : max;
		});
		return [min, max];
	}, [id, preFilteredRows]);

	return (
		<div className="Date">
			<IonDatetimeButton datetime="dateone"></IonDatetimeButton>
			<IonModal keepContentsMounted={true}>
				<IonDatetime id="dateone"
					color="success"
					showDefaultButtons={true}
					show-clear-button={true}
					displayFormat="D MMM HH:mm"
					show-backdrop="false"
					value={filterValue[0] || ""}
					type="date"
					onIonChange={(e) => {
						const val = e.target.value;
						setFilter((old = []) => [val ? val : undefined, old[1]]);
					}}></IonDatetime>
			</IonModal>
			{" to:"}
			<IonDatetimeButton datetime="datetwo"></IonDatetimeButton>
			<IonModal keepContentsMounted={true}>
				<IonDatetime id="datetwo"
					showDefaultButtons={true}
					show-clear-button={true}
					color="success"
					displayFormat="D MMM HH:mm"
					show-backdrop="false"
					value={filterValue[1] || ""}
					type="date"
					onIonChange={(e) => {
						const val = e.target.value;
						setFilter((old = []) => [old[0], val ? val : undefined]);
					}}></IonDatetime>
			</IonModal>
		</div >
	);
}