/*
 * Copyright (C) 2021 Red Hat, Inc.
 * SPDX-License-Identifier: LGPL-2.1-or-later
 */

import cockpit from 'cockpit';
import React, { useState } from 'react';
import { Alert } from "@patternfly/react-core/dist/esm/components/Alert/index.js";
import { Button } from "@patternfly/react-core/dist/esm/components/Button/index.js";
import { DatePicker } from "@patternfly/react-core/dist/esm/components/DatePicker/index.js";
import { Flex, FlexItem } from "@patternfly/react-core/dist/esm/layouts/Flex/index.js";
import { Form, FormGroup, FormAlert } from "@patternfly/react-core/dist/esm/components/Form/index.js";
import { FormSelect, FormSelectOption } from "@patternfly/react-core/dist/esm/components/FormSelect/index.js";
import { InputGroup } from "@patternfly/react-core/dist/esm/components/InputGroup/index.js";
import {
    Modal, ModalBody, ModalFooter, ModalHeader
} from '@patternfly/react-core/dist/esm/components/Modal/index.js';
import { Radio } from "@patternfly/react-core/dist/esm/components/Radio/index.js";
import { TextInput } from "@patternfly/react-core/dist/esm/components/TextInput/index.js";
import { TimePicker } from "@patternfly/react-core/dist/esm/components/TimePicker/index.js";
import { MinusIcon, PlusIcon } from '@patternfly/react-icons';

import { FormHelper } from "cockpit-components-form-helper";
import { ModalError } from 'cockpit-components-inline-notification.jsx';
import { useDialogs } from "dialogs.jsx";

import { updateTime } from './services.jsx';
import { create_timer } from './timer-dialog-helpers.js';
import * as timeformat from "timeformat";

import "./timers.scss";

const _ = cockpit.gettext;

export const CreateTimerDialogButton = ({ owner, isLoading }) => {
    const Dialogs = useDialogs();
    return (
        <Button key='create-timer-action'
                variant="secondary"
                id="create-timer"
                isDisabled={isLoading}
                onClick={() => {
                    updateTime();
                    Dialogs.show(<TimerDialog owner={owner} />);
                }}>
            {_("Create timer")}
        </Button>
    );
};

export const TimerDialog = ({ owner, timer }) => {
    const Dialogs = useDialogs();
    const [command, setCommand] = useState(timer?.command || '');
    const [delay, setDelay] = useState(timer?.delay || 'specific-time');
    const [delayNumber, setDelayNumber] = useState(timer?.delayNumber || 0);
    const [delayUnit, setDelayUnit] = useState(timer?.delayUnit || 'sec');
    const [description, setDescription] = useState(timer?.description || '');
    const [dialogError, setDialogError] = useState(undefined);
    const [inProgress, setInProgress] = useState(false);
    const [name, setName] = useState(timer?.name || '');
    const [repeat, setRepeat] = useState(timer?.repeat || 'no');
    const [repeatPatterns, setRepeatPatterns] = useState(timer?.repeatPatterns || []);
    const [specificTime, setSpecificTime] = useState(timer?.specificTime || "00:00");
    const [isSpecificTimeOpen, setSpecificTimeOpen] = useState(false);
    const [submitted, setSubmitted] = useState(false);
    const validationFailed = {};

    if (!name.trim().length || !/^[a-zA-Z0-9:_.@-]+$/.test(name))
        validationFailed.name = true;
    if (!description.trim().length)
        validationFailed.description = true;
    if (!command.trim().length)
        validationFailed.command = true;
    if (!/^[0-9]+$/.test(delayNumber))
        validationFailed.delayNumber = true;

    const timePicker = (idx) => (
        <TimePicker className="create-timer-time-picker"
                    time={repeatPatterns[idx].time || "00:00"}
                    is24Hour
                    isOpen={repeatPatterns[idx].isOpen || false}
                    setIsOpen={isOpen => setRepeatPatterns(old => {
                        const arr = [...old];
                        arr[idx].isOpen = isOpen;
                        return arr;
                    })}
                    menuAppendTo={() => document.body}
                    onChange={(_, time) => setRepeatPatterns(old => {
                        const arr = [...old];
                        arr[idx].time = time;
                        return arr;
                    })}
        />
    );

    function onSubmit(event) {
        setSubmitted(true);

        if (event)
            event.preventDefault();

        if (Object.keys(validationFailed).length)
            return false;

        create_timer({ name, description, command, delay, delayUnit, delayNumber, repeat, specificTime, repeatPatterns, owner })
                .then(Dialogs.close, exc => {
                    setDialogError(exc.message);
                    setInProgress(false);
                });

        return false;
    }

    return (
        <Modal id="timer-dialog"
            className="timer-dialog" position="top"
            variant="medium" isOpen onClose={Dialogs.close}
        >
            <ModalHeader title={!timer ? _("Create timer") : _("Edit timer")} />
            <ModalBody>
                {dialogError && <ModalError dialogError={_("Timer creation failed")} dialogErrorDetail={dialogError} />}
                <Form isHorizontal onSubmit={onSubmit}>
                    {timer && !timer.delay && <FormAlert>
                        <Alert variant="danger" title={_("Failed to get the starting conditions for the timer")} isInline />
                    </FormAlert>}
                    {timer && !timer.command && <FormAlert>
                        <Alert variant="danger" title={_("Failed to get the timer command")} isInline />
                    </FormAlert>}
                    <FormGroup label={_("Name")}
                               fieldId="servicename">
                        <TextInput id='servicename'
                                   value={name}
                                   validated={submitted && validationFailed.name ? "error" : "default"}
                                   onChange={(_event, value) => setName(value)}
                                   readOnlyVariant={!!timer} />
                        <FormHelper fieldId="servicename"
                                    helperTextInvalid={submitted && validationFailed.name && (!name.trim().length ? _("This field cannot be empty") : _("Only alphabets, numbers, : , _ , . , @ , - are allowed"))} />
                    </FormGroup>
                    <FormGroup label={_("Description")}
                               fieldId="description">
                        <TextInput id='description'
                                   value={description}
                                   validated={submitted && validationFailed.description ? "error" : "default"}
                                   onChange={(_event, value) => setDescription(value)} />
                        <FormHelper fieldId="description" helperTextInvalid={submitted && validationFailed.description && _("This field cannot be empty")} />
                    </FormGroup>
                    <FormGroup label={_("Shell command")}
                               fieldId="command">
                        <TextInput id='command'
                                   value={command}
                                   validated={submitted && validationFailed.command ? "error" : "default"}
                                   onChange={(_event, str) => { setCommand(str) }} />
                        <FormHelper fieldId="command"
                                    helperText={_("This command will be executed by /bin/sh.")}
                                    helperTextInvalid={submitted && validationFailed.command && _("This field cannot be empty")} />
                    </FormGroup>
                    <FormGroup label={_("Trigger")} hasNoPaddingTop>
                        <Flex>
                            <Radio value="specific-time"
                                   id="specific-time"
                                   name="boot-or-specific-time"
                                   onChange={() => setDelay("specific-time")}
                                   isChecked={delay == "specific-time"}
                                   label={_("At specific time")} />
                            <Radio value="system-boot"
                                   id="system-boot"
                                   name="boot-or-specific-time"
                                   onChange={() => setDelay("system-boot")}
                                   isChecked={delay == "system-boot"}
                                   label={_("After system boot")} />
                        </Flex>
                        { delay == "system-boot" &&
                        <FormGroup className="delay-group"
                                   label={_("Delay")}>
                            <Flex>
                                <TextInput className="delay-number"
                                           value={delayNumber}
                                           validated={submitted && validationFailed.delayNumber ? "error" : "default"}
                                           onChange={(_event, value) => setDelayNumber(value)} />
                                <FormSelect className="delay-unit"
                                            value={delayUnit}
                                            onChange={(_, val) => setDelayUnit(val)}
                                            aria-label={_("Delay")}>
                                    <FormSelectOption value="sec" label={_("Seconds")} />
                                    <FormSelectOption value="min" label={_("Minutes")} />
                                    <FormSelectOption value="hr" label={_("Hours")} />
                                    <FormSelectOption value="weeks" label={_("Weeks")} />
                                </FormSelect>
                            </Flex>
                            <FormHelper helperTextInvalid={submitted && validationFailed.delayNumber && _("Delay must be a number")} />
                        </FormGroup> }
                        { delay == "specific-time" &&
                        <>
                            <FormGroup label={_("Repeat")}>
                                <FormSelect value={repeat}
                                            id="drop-repeat"
                                            onChange={(_, value) => {
                                                if (value == repeat)
                                                    return;

                                                setRepeat(value);
                                                if (value == "minutely")
                                                    setRepeatPatterns([{ key: 0, second: "0" }]);
                                                else if (value == "hourly")
                                                    setRepeatPatterns([{ key: 0, minute: "0" }]);
                                                else if (value == "daily")
                                                    setRepeatPatterns([{ key: 0, time: "00:00" }]);
                                                else if (value == "weekly")
                                                    setRepeatPatterns([{ key: 0, day: "mon", time: "00:00" }]);
                                                else if (value == "monthly")
                                                    setRepeatPatterns([{ key: 0, day: 1, time: "00:00" }]);
                                                else if (value == "yearly")
                                                    setRepeatPatterns([{ key: 0, date: undefined, time: "00:00" }]);
                                            }}
                                            aria-label={_("Repeat")}>
                                    <FormSelectOption value="no" label={_("Don't repeat")} />
                                    <FormSelectOption value="minutely" label={_("Minutely")} />
                                    <FormSelectOption value="hourly" label={_("Hourly")} />
                                    <FormSelectOption value="daily" label={_("Daily")} />
                                    <FormSelectOption value="weekly" label={_("Weekly")} />
                                    <FormSelectOption value="monthly" label={_("Monthly")} />
                                    <FormSelectOption value="yearly" label={_("Yearly")} />
                                </FormSelect>
                            </FormGroup>
                            {repeat == "no" &&
                            <FormGroup label={_("Run at")}>
                                <TimePicker className="create-timer-time-picker specific-no-repeat"
                                            isOpen={isSpecificTimeOpen} setIsOpen={setSpecificTimeOpen}
                                            menuAppendTo={() => document.body} time={specificTime} is24Hour onChange={(_, val) => setSpecificTime(val)} />
                            </FormGroup>}
                            {repeatPatterns.map((item, idx) => {
                                let label;
                                if (repeat == "minutely")
                                    label = _("At second");
                                else if (repeat == "hourly")
                                    label = _("At minute");
                                else if (repeat == "daily")
                                    label = _("Run at");
                                else if (repeat == "weekly" || repeat == "monthly" || repeat == "yearly")
                                    label = _("Run on");

                                let helperTextInvalid;
                                const min = repeatPatterns[idx].minute;
                                const validationFailedMinute = !(/^[0-9]+$/.test(min) && min <= 59 && min >= 0);

                                if (submitted && repeat == 'hourly' && validationFailedMinute) {
                                    helperTextInvalid = _("Minute needs to be a number between 0-59");
                                }

                                const sec = repeatPatterns[idx].second;
                                const validationFailedSecond = !(/^[0-9]+$/.test(sec) && sec <= 59 && sec >= 0);

                                if (submitted && repeat == 'minutely' && validationFailedSecond) {
                                    helperTextInvalid = _("Second needs to be a number between 0-59");
                                }

                                return (
                                    <FormGroup label={label} key={item.key}>
                                        <Flex className="specific-repeat-group" data-index={idx}>
                                            {repeat == "minutely" &&
                                                <TextInput className='delay-number'
                                                           id={repeat}
                                                           value={repeatPatterns[idx].second}
                                                           onChange={(_event, second) => setRepeatPatterns(old => {
                                                               const arr = [...old];
                                                               arr[idx].second = second;
                                                               return arr;
                                                           })}
                                                           validated={submitted && validationFailedSecond ? "error" : "default"} />
                                            }
                                            {repeat == "hourly" &&
                                                <TextInput className='delay-number'
                                                           value={repeatPatterns[idx].minute}
                                                           onChange={(_event, minute) => setRepeatPatterns(old => {
                                                               const arr = [...old];
                                                               arr[idx].minute = minute;
                                                               return arr;
                                                           })}
                                                           validated={submitted && validationFailedMinute ? "error" : "default"} />
                                            }
                                            {repeat == "daily" && timePicker(idx)}
                                            {repeat == "weekly" && <>
                                                <FormSelect value={repeatPatterns[idx].day}
                                                            className="week-days"
                                                            onChange={(_, day) => setRepeatPatterns(old => {
                                                                const arr = [...old];
                                                                arr[idx].day = day;
                                                                return arr;
                                                            })}
                                                            aria-label={_("Repeat weekly")}>
                                                    <FormSelectOption value="mon" label={_("Mondays")} />
                                                    <FormSelectOption value="tue" label={_("Tuesdays")} />
                                                    <FormSelectOption value="wed" label={_("Wednesdays")} />
                                                    <FormSelectOption value="thu" label={_("Thursdays")} />
                                                    <FormSelectOption value="fri" label={_("Fridays")} />
                                                    <FormSelectOption value="sat" label={_("Saturdays")} />
                                                    <FormSelectOption value="sun" label={_("Sundays")} />
                                                </FormSelect>
                                                {timePicker(idx)}
                                            </>}
                                            {repeat == "monthly" && <>
                                                <FormSelect value={repeatPatterns[idx].day}
                                                            className="month-days"
                                                            onChange={(_, day) => setRepeatPatterns(old => {
                                                                const arr = [...old];
                                                                arr[idx].day = day;
                                                                return arr;
                                                            })}
                                                            aria-label={_("Repeat monthly")}>
                                                    {[_("1st"), _("2nd"), _("3rd"), _("4th"), _("5th"),
                                                        _("6th"), _("7th"), _("8th"), _("9th"), _("10th"),
                                                        _("11th"), _("12th"), _("13th"), _("14th"), _("15th"),
                                                        _("16th"), _("17th"), _("18th"), _("19th"), _("20th"),
                                                        _("21th"), _("22th"), _("23th"), _("24th"), _("25th"),
                                                        _("26th"), _("27th"), _("28th"), _("29th"), _("30th"), _("31st")
                                                    ].map((day, index) => <FormSelectOption key={day} value={index + 1} label={day} />)}
                                                </FormSelect>
                                                {timePicker(idx)}
                                            </>}
                                            {repeat == "yearly" && <>
                                                <DatePicker aria-label={_("Pick date")}
                                                            buttonAriaLabel={_("Toggle date picker")}
                                                            locale={timeformat.dateFormatLang()}
                                                            weekStart={timeformat.firstDayOfWeek()}
                                                            onChange={(_, str, data) => setRepeatPatterns(old => {
                                                                const arr = [...old];
                                                                arr[idx].date = str;
                                                                return arr;
                                                            })}
                                                            appendTo={() => document.body}
                                                            value={repeatPatterns[idx].date || ""} />
                                                {timePicker(idx)}
                                            </>}
                                            {repeat !== "no" && <FlexItem align={{ default: 'alignRight' }}>
                                                <InputGroup>
                                                    <Button icon={<MinusIcon />} aria-label={_("Remove")}
                                                            variant="secondary"
                                                            isDisabled={repeatPatterns.length == 1}
                                                        onClick={() => setRepeatPatterns(old => old.filter((item, item_idx) => idx != item_idx))} />
                                                    <Button icon={<PlusIcon />} aria-label={_("Add")}
                                                            variant="secondary"
                                                            onClick={() => {
                                                                if (repeat == "minutely")
                                                                    setRepeatPatterns(old => [...old, { key: repeatPatterns.length, second: "0" }]);
                                                                else if (repeat == "hourly")
                                                                    setRepeatPatterns(old => [...old, { key: repeatPatterns.length, minute: "0" }]);
                                                                else if (repeat == "daily")
                                                                    setRepeatPatterns(old => [...old, { key: repeatPatterns.length, time: "00:00" }]);
                                                                else if (repeat == "weekly")
                                                                    setRepeatPatterns(old => [...old, { key: repeatPatterns.length, day: "mon", time: "00:00" }]);
                                                                else if (repeat == "monthly")
                                                                    setRepeatPatterns(old => [...old, { key: repeatPatterns.length, day: 1, time: "00:00" }]);
                                                                else if (repeat == "yearly")
                                                                    setRepeatPatterns(old => [...old, { key: repeatPatterns.length, date: undefined, time: "00:00" }]);
                                                            }} />
                                                </InputGroup>
                                            </FlexItem>}
                                        </Flex>
                                        <FormHelper helperTextInvalid={helperTextInvalid} />
                                    </FormGroup>
                                );
                            })}
                        </>}
                    </FormGroup>
                </Form>
            </ModalBody>
            <ModalFooter>
                <Button variant='primary'
                        id="timer-save-button"
                        isLoading={inProgress}
                        isDisabled={inProgress}
                        onClick={onSubmit}>
                    {_("Save")}
                </Button>
                <Button id="timer-dialog-close-button" variant='link' onClick={Dialogs.close}>
                    {_("Cancel")}
                </Button>
            </ModalFooter>
        </Modal>
    );
};
