<script lang="ts" setup>
import { BccButton, BccFormMessage, BccModal } from '@bcc-code/design-library-vue';
import { localize } from '@cometchat/uikit-resources';
import { computed, onMounted, ref } from 'vue';

const props = defineProps({
    isReschedule: { type: Boolean, default: false }
})

const title = props.isReschedule ? localize("RESCHEDULE") : localize("SCHEDULE_MESSAGE")

const emit = defineEmits(['close', 'schedule', 'reschedule']);

const dateInput = ref<string>();
const timeInput = ref<string>();
const messageSent = ref<boolean>(false);

const localDateTime = computed<string>(() => {
    return new Date(dateInput.value + "T" + timeInput.value).toISOString()
})

const isDateInFuture = computed<boolean>(() => {
    if (dateInput.value === '' || timeInput.value === '') return false
    return new Date(localDateTime.value) > new Date();
})

onMounted(() => {
    const now = new Date();

    dateInput.value = now.toISOString().split('T')[0];
    now.setHours(now.getHours() + 1); // Add 1 hour
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    timeInput.value = `${hours}:${minutes}`;
})

function close() {
    emit('close');
}

function scheduleMessage() {
    if (isDateInFuture && !messageSent.value) {
        emit(props.isReschedule ? 'reschedule' : 'schedule', localDateTime.value)
        messageSent.value = true;
    }
}
</script>

<template>
    <BccModal class="modal" :title="title" :open="true" @close="close()" :closeButton="true">
        <div class="flex flex-col w-full">
            <div class="flex flex-row w-full justify-between">
                <input class="input" type="date" v-model="dateInput" required>
                <p class="at">at</p>
                <input class="input" type="time" v-model="timeInput" required>
            </div>
            <BccFormMessage class="text-center mt-2 mb-0 text-red-500" v-if="!isDateInFuture" state="error">{{
                localize("ERROR_DATE_IN_FUTURE") }}</BccFormMessage>
        </div>

        <template #primaryAction>
            <BccButton class="button" :disabled="messageSent" @click="scheduleMessage()"> {{
                localize("SCHEDULE_MESSAGE") }}</BccButton>
        </template>
    </BccModal>
</template>

<style lang="scss">
:root {
    --cc__primary: #cfeac8;
    --cc__primary150: #004e48;
    --cc__background: #f3faf7;
    --cc__secondary: white;
    --cc__accent: #004e48;
    --cc__accent50: rgba(62, 142, 117, 0.04);
    --cc__accent100: #ffffff;
    --cc__accent200: rgba(62, 142, 117, 0.15);
    --cc__accent300: rgba(62, 142, 117, 0.24);
    --cc__accent400: rgba(62, 142, 117, 0.33);
    --cc__accent500: rgba(62, 142, 117, 0.46);
    --cc__accent600: #004e48;
    --cc__accent700: #254a40;
    --cc__accent800: rgba(62, 142, 117, 0.82);
    --cc__accent900: #f3faf7;
    --cc__text-color: #000;
    --cc__link-color: #57639e;
}

:root.dark {
    --cc__primary: #57639e;
    --cc__primary150: #57639e;
    --cc__background: hsl(230, 25%, 15%);
    --cc__secondary: #111827;
    --cc__accent: #6274ae;
    --cc__accent50: rgba(98, 116, 174, 0.24);
    --cc__accent100: linear-gradient(45deg, #05070b 0%, #0c111c 100%);
    --cc__accent200: rgba(98, 116, 174, 0.35);
    --cc__accent300: rgba(98, 116, 174, 0.44);
    --cc__accent400: rgba(98, 116, 174, 0.53);
    --cc__accent500: rgba(98, 116, 174, 0.66);
    --cc__accent600: #758abc;
    --cc__accent700: #6274ae;
    --cc__accent800: rgba(98, 116, 174, 0.92);
    --cc__accent900: #f3faf7;
    --cc__text-color: #fff;
    --cc__link-color: #cfeac8;
}

.modal {
    width: 90%;
    margin-left: 5%;
    margin-top: auto;
    margin-bottom: auto;
    background-color: var(--cc__background);
    color: var(--cc__text-color);
}

.input {
    background-color: var(--cc__primary);
    border-radius: 5px;
    color: var(--cc__text-color);
    height: 40px;
    padding: 5px;
    width: 45%;
    min-width: 37%;
}

.at {
    width: 10%;
    text-align: center;
    margin-top: 7px;
}

.bcc-modal-footer {
    background-color: var(--cc__background);
}

.bcc-modal-actions {
    background-color: var(--cc__background);
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.bcc-modal-actions .bcc-modal-secondary-action,
.bcc-modal-primary-action {
    width: 100%;
    background-color: var(--cc__background);
}

.bcc-modal-secondary-action button,
.bcc-modal-primary-action button {
    background-color: var(--cc__accent800);
    width: 100%;
    border-radius: 5px;
    margin-top: -10px;
}

.bcc-modal-secondary-action button:hover,
.bcc-modal-primary-action button:hover {
    background-color: var(--cc__accent700);
}
</style>