<script setup>
import { computed } from "vue";
import MdrToggle from "@/components/Mudur-Ui-Kit/MdrToggle.vue";
import MdrFormField from "@/components/Mudur-Ui-Kit/MdrFormField.vue";
import DaySelect from "@/components/Settings/NotificationSettings/Daily/DaySelect.vue";

const props = defineProps({
  modelValue: { type: Object, required: true },
});
const emit = defineEmits(["update:modelValue"]);
const componentValue = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});
</script>
<template>
  <div class="flex flex-col gap-4">
    <MdrToggle
      id="ginvoice-daily-notification"
      v-model="componentValue.active"
      description=""
    >
      {{ $t("active_daily_mails") }}
    </MdrToggle>

    <div
      v-if="componentValue.active"
      class="flex flex-wrap items-start gap-6 pl-1"
    >
      <div class="flex flex-col gap-2">
        <span class="text-sm font-medium text-gray-900">
          {{ $t("notify_days") }}
        </span>
        <DaySelect v-model="componentValue.notify_days" />
      </div>

      <div class="flex flex-col gap-1">
        <MdrFormField
          v-model="componentValue.notify_hour"
          :label="$t('notify_hour')"
          placeholder="09:00"
          dense
          class="w-28"
        />
      </div>

      <div class="flex flex-col gap-1 flex-1">
        <textarea
          v-model="componentValue.emails"
          :label="$t('notify_emails')"
          placeholder="example1@example.com&#10;example2@example.com"
          rows="4"
          class="block w-full !min-h-0 !ring-0 !leading-1 !border-0 !rounded-lg transition-colors duration-200 text-gray-900 bg-gray-50 placeholder-gray-500 dark:bg-transparent dark:text-white dark:placeholder-gray-400 !p-2.5"
        />
      </div>
    </div>
  </div>
</template>
