import React, { useEffect, useState } from 'react';
import { Select, Space } from 'antd';
import { useDispatch, useSelector } from "react-redux";
import { getSyncSchedule, insertSyncSchedule } from "../httpServices/httpServiceSyncSchedule";
import { isEmpty } from "../actions/settingActions";
import { destroyAlerts, savedAlert, savingAlert } from "../actions/alertActions";
import { saveLog } from "../httpServices/httpServiceLog";

const { Option } = Select;

function SyncSchedule(props) {
    const { syncSchedule, loading, error } = useSelector(state => state.syncSchedule)
    const [scheduleSync, setSyncSchedule] = useState(null);
    const [isLoading, setLoading] = useState(false)
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(getSyncSchedule())
    }, [dispatch])

    useEffect(() => {
        if (!isEmpty(syncSchedule)) {
            setSyncSchedule(syncSchedule.data.sync_schedule)
            setLoading(false)
        }
    }, [syncSchedule, setLoading])

    useEffect(() => {
        if (isLoading) {
            if (!loading) {
                destroyAlerts()
                savedAlert({
                    title: "Success",
                    description: "Schedule saved successfully.",
                })
                dispatch(saveLog({
                    title: "Save sync schedule",
                    content: "Saved sync schedule for sync orders automatically",
                    activity: "Saved sync schedule",
                }))
            }
        }
    }, [isLoading, loading, dispatch]);

    const submitHandler = () => {
        savingAlert({
            title: (<span className="ml-[10px] inline">Saving ...</span>),
            description: "Be patient, schedule saving",
        })
        dispatch(insertSyncSchedule({ "sync_schedule": scheduleSync }));
        setLoading(true)
    }

    const handleChange = (value) => {
        setSyncSchedule(value)
    }

    return (
        <div className="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark mb-[20px]">
            <div className="border-b border-stroke px-6.5 py-4 dark:border-strokedark">
                <h3 className="font-medium text-black dark:text-white">
                    Sync Schedule
                </h3>
            </div>
            <form onSubmit={submitHandler} action="javaScript:void(0)">
                <div className="p-6.5">
                    <div className="mb-4.5">
                        <label className="mb-3 block text-sm font-medium text-black dark:text-white">Decide on a daily schedule for sync and archiving.</label>
                        <Space wrap className="mb-2">
                            <Select defaultValue="default" className="w-full" value={scheduleSync} onChange={handleChange}>
                                <Option value="default" disabled>Select an option</Option>
                                <Option value="manual">Manual</Option>
                                <Option value="every_two_hours">Every 2 hours</Option>
                                <Option value="every_four_hours">Every 4 hours</Option>
                                <Option value="every_eight_hours">Every 8 hours</Option>
                                <Option value="every_twelve_hours">Every 12 hours</Option>
                                <Option value="daily">Daily</Option>
                                <Option value="weekly">Weekly</Option>
                                <Option value="fortnightly">Fortnightly</Option>
                                <Option value="monthly">Monthly</Option>
                            </Select>
                        </Space>
                        <button type="submit" className="flex w-full justify-center rounded bg-primary p-2 font-medium text-gray hover:bg-opacity-90">Save schedule</button>
                    </div>
                </div>
            </form>
        </div>
    );
}

export default SyncSchedule;