import React from "react";

import { IModal } from "@ax/types";
import { FieldsBehavior, Modal } from "@ax/components";
import { IDownloadFormState } from "..";

import * as S from "./style";

const DownloadModal = (props: IDownloadModalProps) => {
	const { isOpen, toggleModal, mainModalAction, form, setForm } = props;

	const setDateRange = (dateRange: string) => setForm((state) => ({ ...state, dateRange }));
	const setStartDate = (startDate: string) => setForm((state) => ({ ...state, startDate }));
	const setEndDate = (endDate: string) => setForm((state) => ({ ...state, endDate }));
	const setStartTime = (startTime: string) => setForm((state) => ({ ...state, startTime }));
	const setMaxEvents = (maxEvents: number) => setForm((state) => ({ ...state, maxEvents }));
	const setFormat = (format: string) => setForm((state) => ({ ...state, format }));

	const secondaryModalAction = { title: "Cancel", onClick: toggleModal };

	const rangeOptions = [
		{ name: "7days", value: "7", title: "Last 7 days" },
		{ name: "30days", value: "30", title: "Last 30 days" },
		{ name: "custom", value: "custom", title: "Custom date" },
	];

	const formatOptions = [
		{ name: "csv", value: "csv", title: ".csv" },
		{ name: "xlsx", value: "xlsx", title: ".xlsx" },
	];

	return (
		<Modal
			isOpen={isOpen}
			hide={toggleModal}
			title="Download User activity log"
			secondaryAction={secondaryModalAction}
			mainAction={mainModalAction}
			size="S"
			height={573}
		>
			<S.ModalContent>
				<FieldsBehavior
					title="Range"
					name="dateRange"
					fieldType="RadioGroup"
					options={rangeOptions}
					value={form.dateRange}
					onChange={setDateRange}
				/>
				{form.dateRange === "custom" && (
					<S.CustomDateWrapper>
						<FieldsBehavior
							title="Start date"
							name="startDate"
							fieldType="DateField"
							value={form.startDate}
							onChange={setStartDate}
							pastDate={true}
						/>
						<FieldsBehavior
							title="End date"
							name="endDate"
							fieldType="DateField"
							value={form.endDate}
							onChange={setEndDate}
							pastDate={true}
						/>
					</S.CustomDateWrapper>
				)}
				<FieldsBehavior
					title="Start time"
					name="startTime"
					fieldType="TimeField"
					value={form.startTime}
					onChange={setStartTime}
					helptext="12 hour time format"
				/>
				<FieldsBehavior
					title="Max Events number"
					name="maxEvents"
					fieldType="NumberField"
					value={form.maxEvents}
					onChange={setMaxEvents}
				/>
				<FieldsBehavior
					title="Format"
					name="format"
					fieldType="RadioGroup"
					options={formatOptions}
					value={form.format}
					onChange={setFormat}
				/>
			</S.ModalContent>
		</Modal>
	);
};

interface IDownloadModalProps extends IModal {
	form: IDownloadFormState;
	setForm: React.Dispatch<React.SetStateAction<IDownloadFormState>>;
}

export default DownloadModal;
