import React, {FC} from "react";
import SectionTitle from "@/components/ui/SectionTitle";
import {syncUserDishRecurrences} from "@/utils/api/usersApi";
import Spinner from "@/components/Spinner";
import {UserDishType} from "@/types/ScheduledUserDishType";
import {RecurrenceType} from "@/types/ScheduleType";
import Button from "@/components/ui/Button";
import Input from "@/components/ui/Input";

interface Props {
    userDish: UserDishType
    onSubmit: () => void
}

const EditDishUserCardEditForm: FC<Props> = ({ userDish, onSubmit}) => {
    const weeklyRecurrence = userDish.recurrences.find((recurrence) => recurrence.type === 'App\\Models\\WeeklyRecurrence')
    const minimumRecurrence = userDish.recurrences.find((recurrence) => recurrence.type === 'App\\Models\\MinimumRecurrence')

    const wv = weeklyRecurrence ? weeklyRecurrence.value : undefined
    const mv = minimumRecurrence ? minimumRecurrence.value : undefined

    const [isWeeklyOn, setIsWeeklyOn] = React.useState(weeklyRecurrence !== undefined);
    const [isMinimumOn, setIsMinimumOn] = React.useState(minimumRecurrence !== undefined);
    const [weekday, setWeekday] = React.useState<number>(wv ?? 0);
    const [minimumValue, setMinimumValue] = React.useState<number>(mv ?? 7);
    const [loading, setLoading] = React.useState(false);

    const handleSubmit = () => {
        const recurrences = []

        if (isWeeklyOn) {
            recurrences.push({
                type: 'App\\Models\\WeeklyRecurrence',
                value: weekday,
            });
        }

        if (isMinimumOn) {
            recurrences.push({
                type: 'App\\Models\\MinimumRecurrence',
                value: minimumValue,
            });
        }

        setLoading(true)
        syncUserDishRecurrences(userDish.dish.id, userDish.user.id, recurrences as RecurrenceType[])
            .then((data) => console.log('request data', data))
            .finally(() => {
                setLoading(false)
                onSubmit()
            })
    }

    if (loading) {
        return <Spinner />;
    }

    return (
        <form action={handleSubmit}>
            <SectionTitle>Recurrences</SectionTitle>

            <div className="flex">
                <div className="flex-none">
                    <input type="checkbox"
                           id="weekly"
                           name="weekly"
                           value="weekly"
                           checked={isWeeklyOn}
                           onChange={() => setIsWeeklyOn(!isWeeklyOn)}
                           className="w-4 h-4 border border-gray-300 rounded-sm bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800"
                    />
                    <label htmlFor="weekly" className="ml-2">Weekly</label>
                </div>
                {
                    isWeeklyOn && (
                        <div className="flex-grow ml-2">
                            <label htmlFor="weekday" className="mr-2">on</label>
                            <select value={weekday} onChange={(e) => setWeekday(parseInt(e.currentTarget.value))} className="bg-secondary border-secondary border-2">
                                <option value="0">Sunday</option>
                                <option value="1">Monday</option>
                                <option value="2">Tuesday</option>
                                <option value="3">Wednesday</option>
                                <option value="4">Thursday</option>
                                <option value="5">Friday</option>
                                <option value="6">Saturday</option>
                            </select>
                        </div>
                    )
                }
            </div>

            <div className="flex mt-2">
                <div className="flex-none">
                    <input type="checkbox"
                           id="minimum"
                           name="minimum"
                           value="minimum"
                           checked={isMinimumOn}
                           onChange={() => setIsMinimumOn(!isMinimumOn)}
                           className="w-4 h-4 border border-gray-300 rounded-sm bg-gray-500 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800"
                    />
                    <label htmlFor="minimum" className="ml-2">Minimum</label>
                </div>

                {
                    isMinimumOn && (
                        <div className="flex-grow ml-2">
                            <Input type="number" value={minimumValue} onChange={(e) => setMinimumValue(parseInt(e.currentTarget.value))} min="0" max="365" className="w-12 px-2" fullWidth={false} />
                            <label htmlFor="minimum">Days</label>
                        </div>
                    )
                }
            </div>

            <Button type="submit" appearance="solid" variant="primary">Save</Button>
        </form>
    );
}

export default EditDishUserCardEditForm;