import * as React from "react"
import { STYLES, CONSTANTS } from "../constants"
import { IFilterUserReports } from "../types"
import {
	startModalAlert,
	getArraySortedByProp,
	getArrayCurrenciesFiltered,
} from "../common"

export const FilterUserReports: React.FC<IFilterUserReports> = props => {
	const {
		userProps,
		dataConstants,
		reportDateRange,
		getReportOrders,
		handlerPopupWindow,
	} = props

	const { exchanges, paytypes } = dataConstants

	const start = {
		userId: userProps.userId,
		startTime: "",
		endTime: "",
		exchangeId: "",
		payTypeId: "",
		coin: "",
		fiat: "", // RUB
		subAccount: "",
		sideType: "",
		orderType: "ALL",
		isMonthStats: false,
		isYearStatsV1: false,
		isYearStatsV2: false,
		isYearStatsV3: false,
		isCostReport: false,
	}
	const [reportDetails, handlerReportDetails] = React.useState(start)

	const listOptionsExchanges = exchanges.map((item: any, index: number) => {
		// const elem = item.status ? (
		const elem = item.shortName ? (
			<option key={index} value={item.id}>
				{item.name}
			</option>
		) : null
		return elem
	})

	const listOptionsPayTypes = paytypes.map((item: any, index: number) => {
		return (
			<option key={index} value={item.id}>
				{item.payType}
			</option>
		)
	})

	const sortedSubAccounts = getArraySortedByProp(
		"subAccount",
		CONSTANTS.ARRAY_SUB_ACCOUNTS
	)
	const listOptionsSubAccounts = sortedSubAccounts.map(
		(item: any, index: number) => {
			return (
				<option key={index} value={item.subAccount}>
					{item.subAccount}
				</option>
			)
		}
	)
	const sortedArrayAssets = getArraySortedByProp(
		"currency",
		getArrayCurrenciesFiltered("All", "coin")
	)
	const listOptionsCoins = sortedArrayAssets.map(
		(item: any, index: number) => {
			return (
				<option key={index} value={item.currency}>
					{item.currency}
				</option>
			)
		}
	)
	const sortedArrayFiats = getArraySortedByProp(
		"currency",
		getArrayCurrenciesFiltered("All", "fiat")
	)
	const listOptionsFiats = sortedArrayFiats.map(
		(item: any, index: number) => {
			return (
				<option key={index} value={item.currency}>
					{item.currency}
				</option>
			)
		}
	)

	return (
		<div className="container">
			<div
				style={{ display: "flex", justifyContent: "space-between" }}
				className="row mb-3"
			>
				<div style={{ display: "flex", justifyContent: "start" }}>
					{/* DateStart */}
					<div className="input-group-sm text-left">
						<label htmlFor="startTime" className="">
							DateStart
						</label>
						<input
							className="form-control"
							type="date"
							id="startTime"
							value={
								reportDetails.startTime === null
									? ""
									: // : getReversedDate(startTime - 60000 * 60 * 24 * 20)
									  reportDetails.startTime
							}
							onChange={(ev: any) => {
								// handlerFilterDetails("", "startTime", ev.target.valueAsNumber)
								handlerReportDetails({
									...reportDetails,
									startTime: ev.target.value,
								})
							}}
						/>
					</div>
					{/* DateEnd */}
					<div className="input-group-sm text-left">
						<label htmlFor="endTime" className="">
							DateEnd
						</label>
						<input
							className="form-control"
							type="date"
							id="endTime"
							value={
								reportDetails.endTime === null
									? ""
									: // : getReversedDate(endTime + 60000 * 60 * 24 * 1)
									  reportDetails.endTime
							}
							onChange={(ev: any) => {
								// handlerFilterDetails("", "endTime", ev.target.valueAsNumber)
								handlerReportDetails({
									...reportDetails,
									endTime: ev.target.value,
								})
							}}
						/>
					</div>
				</div>

				<div>{`Date Range LastReport: ${reportDateRange.startDate} --- ${reportDateRange.endDate}`}</div>

				<div
					style={{
						position: "absolute",
						marginLeft: "1090px",
						marginTop: "25px",
					}}
				>
					{/* Checkbox isMonthStats */}
					<div className="input-group-sm text-left">
						<input
							className="form-check-input"
							type="checkbox"
							id="isMonthStats"
							onChange={() =>
								handlerReportDetails({
									...reportDetails,
									isMonthStats: !reportDetails.isMonthStats,
								})
							}
						/>
						<label className="form-check-label" htmlFor="isMonthStats">
							isMonthStats
						</label>
					</div>
					{/* Checkbox isYearStatsV1 */}
					<div className="input-group-sm text-left">
						<input
							className="form-check-input"
							type="checkbox"
							id="isYearStatsV1"
							onChange={() =>
								handlerReportDetails({
									...reportDetails,
									isYearStatsV1: !reportDetails.isYearStatsV1,
								})
							}
						/>
						<label className="form-check-label" htmlFor="isYearStatsV1">
							isYearStats_V.1
						</label>
					</div>
					{/* Checkbox isYearStatsV2 */}
					<div className="input-group-sm text-left">
						<input
							className="form-check-input"
							type="checkbox"
							id="isYearStatsV2"
							onChange={() =>
								handlerReportDetails({
									...reportDetails,
									isYearStatsV2: !reportDetails.isYearStatsV2,
								})
							}
						/>
						<label className="form-check-label" htmlFor="isYearStatsV2">
							isYearStats_V.2
						</label>
					</div>
					{/* Checkbox isYearStatsV3 */}
					<div className="input-group-sm text-left">
						<input
							className="form-check-input"
							type="checkbox"
							id="isYearStatsV3"
							onChange={() =>
								handlerReportDetails({
									...reportDetails,
									isYearStatsV3: !reportDetails.isYearStatsV3,
								})
							}
						/>
						<label className="form-check-label" htmlFor="isYearStatsV3">
							isYearStats_V.3
						</label>
					</div>
					{/* Checkbox isCostReport */}
					<div className="input-group-sm text-left">
						<input
							className="form-check-input"
							type="checkbox"
							id="isCostReport"
							onChange={() =>
								handlerReportDetails({
									...reportDetails,
									isCostReport: !reportDetails.isCostReport,
								})
							}
						/>
						<label className="form-check-label" htmlFor="isCostReport">
							isCostReport
						</label>
					</div>
				</div>

				<div className="btn-group" role="group" aria-label="Basic example">
					<div style={{ display: "flex", justifyContent: "end" }}>
						{/* UserId */}
						{userProps.userStatus === "admin" ? (
							<div className="input-group-sm text-left">
								<select
									id="reportUserId"
									name="userId"
									className="form-control form-control-sm"
									value={reportDetails.userId === null ? "" : reportDetails.userId}
									onChange={(ev: any) => {
										handlerReportDetails({
											...reportDetails,
											[ev.target.name]: ev.target.value,
										})
									}}
								>
									<option value="">All</option>
									<option value="6086427c72453019ec72dbb3">RS</option>
									<option value="60d99fdbd9d1a913a84e3011">CP</option>
								</select>
							</div>
						) : null}
						{/* OrderType */}
						<div className="input-group-sm text-left">
							<select
								id="reportOrderType"
								name="orderType"
								className="form-control form-control-sm"
								value={
									reportDetails.orderType === null ? "" : reportDetails.orderType
								}
								onChange={(ev: any) => {
									handlerReportDetails({
										...reportDetails,
										[ev.target.name]: ev.target.value,
									})
								}}
							>
								<option value="ALL">All Orders</option>
								<option value="OTC">OTC</option>
								<option value="SPOT">SPOT</option>
							</select>
						</div>
						{/* SideType */}
						<div className="input-group-sm text-left">
							<select
								id="reportSideType"
								name="sideType"
								className="form-control form-control-sm"
								value={
									reportDetails.sideType === null ? "" : reportDetails.sideType
								}
								onChange={(ev: any) => {
									handlerReportDetails({
										...reportDetails,
										[ev.target.name]: ev.target.value,
									})
								}}
							>
								<option value="">All Sides</option>
								<option value="BUY">Buy</option>
								<option value="SELL">Sell</option>
							</select>
						</div>
						{/* Exchange */}
						<div className="input-group-sm text-left">
							<select
								id="reportExchangeId"
								name="exchangeId"
								className="form-control form-control-sm"
								value={
									reportDetails.exchangeId === null ? "" : reportDetails.exchangeId
								}
								onChange={(ev: any) => {
									handlerReportDetails({
										...reportDetails,
										[ev.target.name]: ev.target.value,
									})
								}}
							>
								<option value="">All P2P</option>
								{listOptionsExchanges}
							</select>
						</div>
						{/* PayMethod */}
						<div className="input-group-sm text-left">
							<select
								id="reportPayTypeId"
								name="payTypeId"
								className="form-control form-control-sm"
								value={
									reportDetails.payTypeId === null ? "" : reportDetails.payTypeId
								}
								onChange={(ev: any) => {
									handlerReportDetails({
										...reportDetails,
										[ev.target.name]: ev.target.value,
									})
								}}
							>
								<option value="">All Payments</option>
								{listOptionsPayTypes}
							</select>
						</div>
						{/* SubAccount */}
						<div className="input-group-sm text-left">
							<select
								id="reportSubAccount"
								name="subAccount"
								className="form-control form-control-sm"
								value={
									reportDetails.subAccount === null ? "" : reportDetails.subAccount
								}
								onChange={(ev: any) => {
									handlerReportDetails({
										...reportDetails,
										[ev.target.name]: ev.target.value,
									})
								}}
							>
								<option value="">All SubAcc</option>
								<option value="xxx">Undefined</option>
								{listOptionsSubAccounts}
							</select>
						</div>
						{/* Coin */}
						<div className="input-group-sm text-left">
							<select
								id="reportCoin"
								name="coin"
								className="form-control form-control-sm"
								value={reportDetails.coin === null ? "" : reportDetails.coin}
								onChange={(ev: any) => {
									handlerReportDetails({
										...reportDetails,
										[ev.target.name]: ev.target.value,
									})
								}}
							>
								<option value="">All Coins</option>
								{listOptionsCoins}
							</select>
						</div>
						{/* Fiat */}
						<div className="input-group-sm text-left">
							<select
								id="reportFiat"
								name="fiat"
								className="form-control form-control-sm"
								value={reportDetails.fiat === null ? "" : reportDetails.fiat}
								onChange={(ev: any) => {
									handlerReportDetails({
										...reportDetails,
										[ev.target.name]: ev.target.value,
									})
								}}
							>
								<option value="">All Fiats</option>
								{listOptionsFiats}
							</select>
						</div>
					</div>
					<button
						className="btn btn-sm btn-info"
						type="button"
						id="button-getReport"
						onClick={() => {
							if (
								reportDetails.startTime === null ||
								reportDetails.endTime === null
							) {
								handlerPopupWindow(STYLES.WARNING, CONSTANTS.DATE_CONDITIONS_1)
								startModalAlert()
							} else if (reportDetails.startTime >= reportDetails.endTime) {
								handlerPopupWindow(STYLES.WARNING, CONSTANTS.DATE_CONDITIONS_2)
								startModalAlert()
							} else {
								const objParamReport = {
									userId: reportDetails.userId,
									startTime: reportDetails.startTime,
									endTime: reportDetails.endTime,
									exchangeId: reportDetails.exchangeId,
									payTypeId: reportDetails.payTypeId,
									coin: reportDetails.coin,
									fiat: reportDetails.fiat,
									subAccount: reportDetails.subAccount,
									sideType: reportDetails.sideType,
									orderType: reportDetails.orderType, // ALL || SPOT || OTC
									isMonthStats: reportDetails.isMonthStats,
									isYearStatsV1: reportDetails.isYearStatsV1,
									isYearStatsV2: reportDetails.isYearStatsV2,
									isYearStatsV3: reportDetails.isYearStatsV3,
									isCostReport: reportDetails.isCostReport,
								}
								// console.log(objParamReport)
								getReportOrders(objParamReport)
							}
						}}
					>
						Report
					</button>
				</div>
			</div>
		</div>
	)
}
