/**
 * WordPress dependencies
 */
import { __ } from "@wordpress/i18n";
import {
    SelectControl,
    ToggleControl,
    TextControl,
    BaseControl,
    DateTimePicker,
    __experimentalToggleGroupControl as ToggleGroupControl,
    __experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from "@wordpress/components";
import { applyFilters } from "@wordpress/hooks";

/**
 * Internal dependencies
 */

import SingleBoxControl from "./singleBoxControl";

import {
    TypographyDropdown,
    ResponsiveDimensionsControl,
    ResponsiveRangeController,
    ColorControl,
    BorderShadowControl,
    BackgroundControl,
    InspectorPanel
} from "@essential-blocks/controls";

import objAttributes from "./attributes";

import { typoPrefix_digits, typoPrefix_labels, typoPrefix_separator } from "./constants/typographyPrefixConstants";

import { wrapperWidth, boxsSpaceConst, separatorPosTop, separatorPosRight } from "./constants/rangeNames";

import {
    cdBoxsPaddingConst,
    cdWrapMarginConst,
    cdWrapPaddingConst,
    cdDigitsPaddingConst,
    cdLabelsPaddingConst,
} from "./constants/dimensionsConstants";

import {
    cdBoxsBgConst,
    cdDayBoxBgConst,
    cdHourBoxBgConst,
    cdMinuteBoxBgConst,
    cdSecondBoxBgConst,
    WrpBgConst,
} from "./constants/backgroundsConstants";

import { cdBoxsBdShadowConst, WrpBdShadowConst } from "./constants/borderShadowConstants";

import {
    ALIGN_ITEMS,
    SEPARATOR_TYPES,
    LAYOUT_TYPES,
    JUSTIFY_CONTENTS,
    FLEX_DIRECTIONS,
} from "./constants";
import { useEffect } from "react";

function Inspector({ attributes, setAttributes }) {
    const {
        resOption,

        //  deadline Date timestamp
        endTimeStamp,

        //
        showDays,
        showHours,
        showMinutes,
        showSeconds,

        //
        daysLabel,
        hoursLabel,
        minutesLabel,
        secondsLabel,

        //
        preset,

        //
        flexDirection,

        //
        showSeparator,
        separatorType,
        // sepPositionRight,
        // sepPositionTop,
        separatorColor,

        //
        contentsAlign,

        //
        contentsDirection,

        //
        contentsJustify,

        //
        digitsColor,

        //
        labelsColor,

        // evergreen timer
        isEvergreenTimer,
        evergreenTimerHours,
        evergreenTimerMinutes,
        recurringCountdown,
        restartTime,
        recurringCountdownEnd,
        dayDgColor
    } = attributes;

    const resRequiredProps = {
        setAttributes,
        resOption,
        attributes,
        objAttributes,
    };

    useEffect(() => {
        if (recurringCountdownEnd) {
            return;
        }
        let recurringDefaultDate = new Date();
        recurringDefaultDate.setDate(recurringDefaultDate.getDate() + 7);

        setAttributes({
            recurringCountdownEnd: recurringDefaultDate.getTime(),
        });
    }, []);

    const handleDateChange = (newDate) => {
        const endTimeStamp = new Date(newDate).getTime();
        setAttributes({ endTimeStamp });
    };

    const handleRecurringEndDateChange = (newDate) => {
        const recurringCountdownEnd = new Date(newDate).getTime();
        setAttributes({ recurringCountdownEnd });
    };

    return (
        <InspectorPanel advancedControlProps={{
            marginPrefix: cdWrapMarginConst,
            paddingPrefix: cdWrapPaddingConst,
            backgroundPrefix: WrpBgConst,
            borderPrefix: WrpBdShadowConst,
            hasMargin: true
        }}>
            <InspectorPanel.General>
                <>
                    <InspectorPanel.PanelBody
                        title={__("Countdown Settings", "essential-blocks")}
                        initialOpen={true}
                    >
                        <ToggleControl
                            label={__("Evergreen Timer?", "essential-blocks")}
                            checked={isEvergreenTimer}
                            onChange={() =>
                                setAttributes({
                                    isEvergreenTimer: !isEvergreenTimer,
                                })
                            }
                            __nextHasNoMarginBottom
                        />
                        {!isEvergreenTimer && (
                            <>
                                <style>{`.customDatePickerStyle .components-datetime__timezone{display:none;}`}</style>
                                <BaseControl
                                    label={__("Countdown Due Date", "essential-blocks")}
                                    className="customDatePickerStyle"
                                    __nextHasNoMarginBottom
                                >
                                    <DateTimePicker
                                        currentDate={endTimeStamp ? new Date(endTimeStamp) : new Date()}
                                        onChange={(newDate) => handleDateChange(newDate)}
                                        is12Hour={true}
                                    />
                                </BaseControl>
                            </>
                        )}
                        {isEvergreenTimer && (
                            <>
                                <TextControl
                                    label={__("Hours", "essential-blocks")}
                                    value={evergreenTimerHours}
                                    type="number"
                                    onChange={(evergreenTimerHours) =>
                                        setAttributes({
                                            evergreenTimerHours,
                                        })
                                    }
                                    __next40pxDefaultSize
                                    __nextHasNoMarginBottom
                                />
                                <TextControl
                                    label={__("Minutes", "essential-blocks")}
                                    value={evergreenTimerMinutes}
                                    type="text"
                                    onChange={(evergreenTimerMinutes) =>
                                        setAttributes({
                                            evergreenTimerMinutes,
                                        })
                                    }
                                    __next40pxDefaultSize
                                    __nextHasNoMarginBottom
                                />
                                <ToggleControl
                                    label={__("Recurring Countdown", "essential-blocks")}
                                    checked={recurringCountdown}
                                    onChange={() =>
                                        setAttributes({
                                            recurringCountdown: !recurringCountdown,
                                        })
                                    }
                                    help={__(
                                        "Specify how much time it will take to restart the countdown. If you set 0, the countdown will restart immediately.",
                                        "essential-blocks"
                                    )}
                                    __nextHasNoMarginBottom
                                />
                                {recurringCountdown && (
                                    <>
                                        <TextControl
                                            label={__("Restart After(In Hours)", "essential-blocks")}
                                            value={restartTime}
                                            type="text"
                                            onChange={(restartTime) =>
                                                setAttributes({
                                                    restartTime,
                                                })
                                            }
                                            __next40pxDefaultSize
                                            __nextHasNoMarginBottom
                                        />
                                        <style>{`.customDatePickerStyle .components-datetime__timezone{display:none;}`}</style>
                                        <BaseControl
                                            label={__(
                                                "Recurring Countdown End Date",
                                                "essential-blocks"
                                            )}
                                            className="customDatePickerStyle"
                                            __nextHasNoMarginBottom
                                        >
                                            <DateTimePicker
                                                currentDate={
                                                    recurringCountdownEnd
                                                        ? new Date(recurringCountdownEnd)
                                                        : recurringDefaultDate
                                                }
                                                onChange={(newDate) =>
                                                    handleRecurringEndDateChange(newDate)
                                                }
                                                is12Hour={true}
                                            />
                                        </BaseControl>
                                    </>
                                )}
                            </>
                        )}
                    </InspectorPanel.PanelBody>

                    <InspectorPanel.PanelBody title={__("Content Settings", "essential-blocks")} initialOpen={false}>
                        <ToggleControl
                            label={__("Display Days", "essential-blocks")}
                            checked={showDays}
                            onChange={() =>
                                setAttributes({
                                    showDays: !showDays,
                                })
                            }
                            __nextHasNoMarginBottom
                        />

                        {showDays && (
                            <>
                                <TextControl
                                    label={__("Custom Label For Days", "essential-blocks")}
                                    value={daysLabel}
                                    type="text"
                                    onChange={(daysLabel) =>
                                        setAttributes({
                                            daysLabel,
                                        })
                                    }
                                    __next40pxDefaultSize
                                    __nextHasNoMarginBottom
                                />

                                <p
                                    style={{
                                        marginTop: "-5px",
                                    }}
                                >
                                    <i>Leave blank to hide</i>
                                </p>
                            </>
                        )}

                        <ToggleControl
                            label={__("Display Hours", "essential-blocks")}
                            checked={showHours}
                            onChange={() =>
                                setAttributes({
                                    showHours: !showHours,
                                })
                            }
                            __nextHasNoMarginBottom
                        />

                        {showHours && (
                            <>
                                <TextControl
                                    label={__("Custom Label For Hours", "essential-blocks")}
                                    value={hoursLabel}
                                    type="text"
                                    onChange={(hoursLabel) =>
                                        setAttributes({
                                            hoursLabel,
                                        })
                                    }
                                    __next40pxDefaultSize
                                    __nextHasNoMarginBottom
                                />

                                <p
                                    style={{
                                        marginTop: "-5px",
                                    }}
                                >
                                    <i>Leave blank to hide</i>
                                </p>
                            </>
                        )}

                        <ToggleControl
                            label={__("Display Minutes", "essential-blocks")}
                            checked={showMinutes}
                            onChange={() =>
                                setAttributes({
                                    showMinutes: !showMinutes,
                                })
                            }
                            __nextHasNoMarginBottom
                        />

                        {showMinutes && (
                            <>
                                <TextControl
                                    label={__("Custom Label For Minutes", "essential-blocks")}
                                    value={minutesLabel}
                                    type="text"
                                    onChange={(minutesLabel) =>
                                        setAttributes({
                                            minutesLabel,
                                        })
                                    }
                                    __next40pxDefaultSize
                                    __nextHasNoMarginBottom
                                />

                                <p
                                    style={{
                                        marginTop: "-5px",
                                    }}
                                >
                                    <i>Leave blank to hide</i>
                                </p>
                            </>
                        )}

                        <ToggleControl
                            label={__("Display Seconds", "essential-blocks")}
                            checked={showSeconds}
                            onChange={() =>
                                setAttributes({
                                    showSeconds: !showSeconds,
                                })
                            }
                            __nextHasNoMarginBottom
                        />

                        {showSeconds && (
                            <>
                                <TextControl
                                    label={__("Custom Label For Seconds", "essential-blocks")}
                                    value={secondsLabel}
                                    type="text"
                                    onChange={(secondsLabel) =>
                                        setAttributes({
                                            secondsLabel,
                                        })
                                    }
                                    __next40pxDefaultSize
                                    __nextHasNoMarginBottom
                                />

                                <p
                                    style={{
                                        marginTop: "-5px",
                                    }}
                                >
                                    <i>Leave blank to hide</i>
                                </p>
                            </>
                        )}
                    </InspectorPanel.PanelBody>
                </>
            </InspectorPanel.General>
            <InspectorPanel.Style>
                <>
                    <InspectorPanel.PanelBody title={__("Boxes Styles", "essential-blocks")} initialOpen={true}>
                        <ToggleGroupControl
                            label={__("Layout", "essential-blocks")}

                            value={flexDirection}
                            onChange={(value) =>
                                setAttributes({
                                    flexDirection: value,
                                })
                            }
                            isBlock
                            __next40pxDefaultSize
                            __nextHasNoMarginBottom
                        >
                            {LAYOUT_TYPES.map(({ value, label }, index) => (
                                <ToggleGroupControlOption
                                    key={index}
                                    value={value}
                                    label={label}
                                />
                            ))}
                        </ToggleGroupControl>

                        <ResponsiveRangeController
                            noUnits
                            baseLabel={__("Container Max Width", "essential-blocks")}
                            controlName={wrapperWidth}
                            min={100}
                            max={2000}
                            step={1}
                        />

                        <ResponsiveRangeController
                            noUnits
                            baseLabel={__("Space Between Boxs", "essential-blocks")}
                            controlName={boxsSpaceConst}
                            min={0}
                            max={200}
                            step={1}
                        />

                        <BaseControl label={__("Contents Direction", "essential-blocks")} __nextHasNoMarginBottom>
                            <SelectControl
                                value={contentsDirection}
                                options={FLEX_DIRECTIONS}
                                onChange={(contentsDirection) =>
                                    setAttributes({
                                        contentsDirection,
                                    })
                                }
                                __next40pxDefaultSize
                                __nextHasNoMarginBottom
                            />
                        </BaseControl>

                        {contentsDirection.includes("row") && (
                            <>
                                <BaseControl
                                    label={__("Contents Justify Position", "essential-blocks")}
                                    __nextHasNoMarginBottom
                                >
                                    <SelectControl
                                        value={contentsJustify}
                                        options={JUSTIFY_CONTENTS}
                                        onChange={(contentsJustify) =>
                                            setAttributes({
                                                contentsJustify,
                                            })
                                        }
                                        __next40pxDefaultSize
                                        __nextHasNoMarginBottom
                                    />
                                </BaseControl>
                            </>
                        )}

                        <ToggleGroupControl
                            label={__("Contents Alignment", "essential-blocks")}

                            value={contentsAlign}
                            onChange={(value) =>
                                setAttributes({
                                    contentsAlign: value,
                                })
                            }
                            isBlock
                            __next40pxDefaultSize
                            __nextHasNoMarginBottom
                        >
                            {ALIGN_ITEMS.map(({ value, label }, index) => (
                                <ToggleGroupControlOption
                                    key={index}
                                    value={value}
                                    label={label}
                                />
                            ))}
                        </ToggleGroupControl>

                        <InspectorPanel.PanelBody title={__("Background", "essential-blocks")} initialOpen={false}>
                            <BackgroundControl
                                controlName={cdBoxsBgConst}
                                noOverlay
                                noMainBgi
                            // noOverlayBgi // if U pass 'noOverlay' prop U don't need to pass 'noOverlayBgi'
                            />
                        </InspectorPanel.PanelBody>

                        <InspectorPanel.PanelBody title={__("Padding", "essential-blocks")} initialOpen={false}>
                            <ResponsiveDimensionsControl
                                controlName={cdBoxsPaddingConst}
                                baseLabel="Padding"
                            />
                        </InspectorPanel.PanelBody>
                        <InspectorPanel.PanelBody title={__("Border & Shadow")} initialOpen={false}>
                            <BorderShadowControl
                                controlName={cdBoxsBdShadowConst}
                            // noShadow
                            // noBorder
                            />
                        </InspectorPanel.PanelBody>
                    </InspectorPanel.PanelBody>

                    <InspectorPanel.PanelBody title={__("Digits", "essential-blocks")} initialOpen={false}>
                        <ColorControl
                            label={__("Color", "essential-blocks")}
                            color={digitsColor}
                            attributeName={'digitsColor'}
                        />

                        <TypographyDropdown
                            baseLabel="Typography"
                            typographyPrefixConstant={typoPrefix_digits}
                        />

                        <ResponsiveDimensionsControl
                            controlName={cdDigitsPaddingConst}
                            baseLabel="Padding"
                        />
                    </InspectorPanel.PanelBody>

                    <InspectorPanel.PanelBody title={__("Labels", "essential-blocks")} initialOpen={false}>
                        <ColorControl
                            label={__("Color", "essential-blocks")}
                            color={labelsColor}
                            attributeName={'labelsColor'}
                        />

                        {applyFilters(
                            "eb_countdown_label_bg",
                            '',
                            attributes,
                            setAttributes
                        )}

                        <TypographyDropdown
                            baseLabel="Typography"
                            typographyPrefixConstant={typoPrefix_labels}
                        />
                        <ResponsiveDimensionsControl
                            controlName={cdLabelsPaddingConst}
                            baseLabel="Padding"
                        />
                    </InspectorPanel.PanelBody>

                    {flexDirection === "row" && (
                        <InspectorPanel.PanelBody title={__("Separator", "essential-blocks")} initialOpen={false}>
                            <ToggleControl
                                label={__("Show Separator", "essential-blocks")}
                                checked={showSeparator}
                                onChange={() =>
                                    setAttributes({
                                        showSeparator: !showSeparator,
                                    })
                                }
                                __nextHasNoMarginBottom
                            />

                            {showSeparator && (
                                <>
                                    <SelectControl
                                        label={__("Separator Type", "essential-blocks")}
                                        value={separatorType}
                                        options={SEPARATOR_TYPES}
                                        onChange={(separatorType) =>
                                            setAttributes({
                                                separatorType,
                                            })
                                        }
                                        __next40pxDefaultSize
                                        __nextHasNoMarginBottom
                                    />

                                    <ResponsiveRangeController
                                        baseLabel={__("Position Top", "essential-blocks")}
                                        controlName={separatorPosTop}
                                        min={0}
                                        max={900}
                                        step={1}
                                    />

                                    <ResponsiveRangeController
                                        baseLabel={__("Position Right", "essential-blocks")}
                                        controlName={separatorPosRight}
                                        min={0}
                                        max={900}
                                        step={1}
                                    />

                                    <ColorControl
                                        label={__("Color", "essential-blocks")}
                                        color={separatorColor}
                                        attributeName={'separatorColor'}
                                    />

                                    <TypographyDropdown
                                        baseLabel="Typography"
                                        typographyPrefixConstant={typoPrefix_separator}
                                    />
                                </>
                            )}
                        </InspectorPanel.PanelBody>
                    )}

                    <InspectorPanel.PanelBody
                        title={__("Individual Box Styling", "essential-blocks")}
                        initialOpen={false}
                    >
                        {showDays && (
                            <SingleBoxControl
                                resRequiredProps={resRequiredProps}
                                heading="Days"
                                bgControlName={cdDayBoxBgConst}
                                dayDgColor="dayDgColor"
                                dayLbColor="dayLbColor"
                                dayBdrColor="dayBdrColor"
                            />
                        )}
                        {showHours && (
                            <SingleBoxControl
                                resRequiredProps={resRequiredProps}
                                heading="Hours"
                                bgControlName={cdHourBoxBgConst}
                                dgColorAttrString="hourDgColor"
                                lbColorAttrString="hourLbColor"
                                bdColorAttrString="hourBdrColor"
                            />
                        )}
                        {showMinutes && (
                            <SingleBoxControl
                                resRequiredProps={resRequiredProps}
                                heading="Minutes"
                                bgControlName={cdMinuteBoxBgConst}
                                dgColorAttrString="minuteDgColor"
                                lbColorAttrString="minuteLbColor"
                                bdColorAttrString="minuteBdrColor"
                            />
                        )}
                        {showSeconds && (
                            <SingleBoxControl
                                resRequiredProps={resRequiredProps}
                                heading="Seconds"
                                bgControlName={cdSecondBoxBgConst}
                                dgColorAttrString="secondDgColor"
                                lbColorAttrString="secondLbColor"
                                bdColorAttrString="secondBdrColor"
                            />
                        )}
                    </InspectorPanel.PanelBody>
                </>
            </InspectorPanel.Style>
        </InspectorPanel>
    );
}
export default Inspector;
