/**
 * LoggedIn form component.
 *
 * @returns {JSX.Element}
 */
// State action for update/set rule config.
import {useDispatch, useSelector} from 'react-redux';
import {useEffect, useState} from "react";
import {__} from "@wordpress/i18n";

// State action for update/set rule config.
import {setRuleConfig} from "@app/modules/PersonaForm/store/PersonaFormStore";
// Components.
import Label from "@app/components/Label";
import { VARIANTS } from "@app/components/Input";

import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { LocalizationProvider } from '@mui/x-date-pickers';
import dayjs from "dayjs";

const DATETIME_FORMAT = 'YYYY/MM/DD HH:mm';

const formatDate = (date) => date.format(DATETIME_FORMAT);

const ruleID = 'DateTime';

export default function DateTime({id = ruleID}) {
	const dispatch = useDispatch();
	const rule = useSelector((state) =>
		state.ruleSets.find((rule) => rule.id === id),
	);

	const [dateTimeStart, setDateTimeStart] = useState(
		dayjs(rule.config?.args?.['start_date_time'] || ''),
	);

	const [dateTimeEnd, setDateTimeEnd] = useState(
		dayjs(rule.config?.args?.['end_date_time'] || ''),
	);

	useEffect(() => {
		dispatch(setRuleConfig(
			{
				id: id,
				config: {
					ruleType: 'time_date',
					args: {
						'start_date_time': formatDate(dateTimeStart),
						'end_date_time': formatDate(dateTimeEnd),
						'type': 'specific_date_time',
					}
				}
			}
		));
	}, [dateTimeStart, dateTimeEnd]);

	return (
		<LocalizationProvider dateAdapter={AdapterDayjs}>
			<div>
				<div
					className="dxp-mb-4">
					<Label
						for="datetimepicker-start"
						title={__('Start displaying content from:', 'dxp')}/>

					<DateTimePicker
						ampm={false}
						value={dateTimeStart}
						format={DATETIME_FORMAT}
						onChange={(value) => setDateTimeStart(value)}
						slotProps={{
							textField: {
								className: 'dxp-w-full',
								inputProps: {
									className: VARIANTS['small'],
									id: 'datetimepicker-start',
									sx: {
										boxSizing: 'border-box',
										height: 'auto',
									},
								},
								sx: {
									'& .MuiInputBase-root:after': {
										content: 'none',
									},
									'& .MuiInputBase-root:before': {
										content: 'none',
									},
								},
								variant: 'standard',
							}
						}}
					/>
				</div>
				<div>
					<Label
						title={__('Stop displaying content from:', 'dxp')}/>

					<DateTimePicker
						ampm={false}
						value={dateTimeEnd}
						format={DATETIME_FORMAT}
						onChange={(value) => setDateTimeEnd(value)}
						slotProps={{
							textField: {
								className: 'dxp-w-full',
								inputProps: {
									className: VARIANTS['small'],
									id: 'datetimepicker-start',
									sx: {
										boxSizing: 'border-box',
										height: 'auto',
									},
								},
								sx: {
									'& .MuiInputBase-root:after': {
										content: 'none',
									},
									'& .MuiInputBase-root:before': {
										content: 'none',
									},
								},
								variant: 'standard',
							}
						}}
					/>
				</div>
			</div>
		</LocalizationProvider>
	);
}