<!-- Wrapper for Time select input -->
<script setup lang="ts">
import { ElTimePicker } from 'element-plus';
import IconTrashRed from '../icons/IconTrashRed.vue';
import IconClock from '../icons/IconClock.vue';
import { onMounted, onUnmounted, ref } from 'vue';
import { useGettext } from 'vue3-gettext';

// Translations
const { $gettext } = useGettext();

// Props
const {
    size = 'default',
    disabled = false,
    addRemove = false,
} = defineProps<{
    size?: 'default' | 'small';
    disabled?: boolean;
    addRemove?: boolean;
}>();

// Emits
const emit = defineEmits<{
    removeTimeSelect: [];
}>();

// Current value
const value = defineModel<string>();

// Show different icon on hover
const timePicker = ref(null);
const isIconHovered = ref(false);

// Change icon to trash
const handleHover = (event: any) => {
    isIconHovered.value = !!event.target.closest('.el-input__prefix');
};

// Always remove the trash icon
const handleLeave = () => {
    isIconHovered.value = false;
};

// Remove the time select on click when hovering on icon
const handleClick = () => {
    if (isIconHovered.value) {
        emit('removeTimeSelect');
    }
};

// Disable midnight
const disabledMinutes = (hour: number) => {
  if (hour === 0) {
    return [0]
  }
}

// Add listeners on mounted
onMounted(() => {
    if (timePicker.value && addRemove) {
        timePicker.value.addEventListener('mouseover', handleHover);
        timePicker.value.addEventListener('mouseleave', handleLeave);
        timePicker.value.addEventListener('click', handleClick);
    }
});

// Remove them on unmounted
onUnmounted(() => {
    if (timePicker.value && addRemove) {
        timePicker.value.removeEventListener('mouseover', handleHover);
        timePicker.value.removeEventListener('mouseleave', handleLeave);
        timePicker.value.removeEventListener('click', handleClick);
    }
});
</script>

<template>
    <div ref="timePicker">
        <ElTimePicker
            :class="[`time-picker size-${size}`, addRemove && 'has-remove']"
            :placeholder="$gettext('Select time')"
            popper-class="time-picker-popper"
            format="HH:mm"
            value-format="HH:mm"
			:disabled-minutes="disabledMinutes"
            :clearable="false"
            :editable="false"
            :disabled
            :prefix-icon="isIconHovered ? IconTrashRed : IconClock"
            v-model="value"
        />
    </div>
</template>

<!-- Can't be scoped -->
<style lang="scss">
.time-picker {
    --el-component-size: 2.5rem;
    --el-border-radius-base: 0.5rem;
    --el-date-editor-width: 100%;
    --el-input-border-color: theme('colors.neutral-500');
    --el-input-focus-border-color: theme('colors.primary-500');
    --el-input-hover-border-color: theme('colors.primary-500');

    &.size-small {
        --el-component-size: 1.5rem;

        .el-input__wrapper {
            input {
                @apply text-xs leading-xs;
            }
        }
    }

    &.is-disabled {
        @apply pointer-events-none;
        --el-disabled-bg-color: theme('colors.neutral-50');

        .el-input__wrapper {
            @apply border-neutral-500 shadow-none;

            &.is-focus,
            &:hover {
                @apply border-neutral-500;
            }

            input {
                --el-disabled-text-color: theme('colors.base-200');
            }
        }
    }

    .el-input__wrapper {
        @apply shadow-none cursor-pointer border border-neutral-500 transition-colors;

        &.is-focus,
        &:hover {
            @apply border-primary-500;
        }

        .el-input__inner {
            --el-input-inner-height: 2.5rem;

            &.is-focus {
                @apply shadow-none;
            }
        }

        svg {
            @apply text-primary-500;
        }

        input {
            @apply text-base-500 text-base leading-base flex-grow-0 basis-[40px] border-none bg-transparent p-0 focus:shadow-none;
        }
    }
}

.el-popper.time-picker-popper {
    @apply border border-neutral-500;

    --el-popover-border-radius: 0.5rem;
    --el-timepicker-inner-border-color: theme('colors.neutral-500');
    --el-border-color-light: theme('colors.neutral-500');

    .el-time-panel {
        @apply w-[165px] font-primary;

        .el-time-spinner {
            @apply px-4;

            .el-time-spinner__item {
                @apply text-base text-base-500 transition-colors font-medium m-0;

                &.is-active {
                    @apply text-primary-500 font-medium;
                }
            }
        }

        .el-time-panel__footer {
            @apply py-1 px-2.5;

            button {
                @apply text-base text-base-500 font-medium;

                &.confirm {
                    @apply text-primary-500;
                }
            }
        }
    }
}
</style>
