<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import AppBox from './app/AppBox.vue';

defineProps<{
  title: string;
  category?: string;
  isEdit?: boolean;
  bgOn?: boolean;
  statusBranch?: string;
  badgeLabel?: string;
  badgeClass?: string;
  editData?: (...args: unknown[]) => void;
  deleteData?: (...args: unknown[]) => void;
  submit?: (...args: unknown[]) => void;
  close?: (...args: unknown[]) => void;
  undo?: (...args: unknown[]) => void;
}>();

const drawerOpen = defineModel<boolean>('drawerOpen', {
  default: false,
});

const myForm = ref();

function reset() {
  if (myForm.value) {
    myForm.value.resetValidation();
  }
}
</script>
<template>
  <q-drawer
    @before-hide="reset"
    @hide="close"
    :width="
      $q.screen.gt.xs
        ? $q.screen.gt.sm
          ? $q.screen.gt.md
            ? $q.screen.gt.lg
              ? 1400
              : 1200
            : 1000
          : 700
        : 510
    "
    v-model="drawerOpen"
    behavior="mobile"
    side="right"
    show-if-above
  >
    <q-form
      ref="myForm"
      class="full-height"
      greedy
      @submit.prevent
      @validation-success="submit"
    >
      <AppBox
        class="column justify-between full-height"
        style="padding: 0; border-radius: var(--radius-2)"
      >
        <div class="form-header col q-px-lg row items-center">
          <div v-if="isEdit" class="row">
            <q-btn
              round
              flat
              id="closeDialog"
              icon="mdi-undo"
              padding="xs"
              class="q-mr-md"
              :class="{ dark: $q.dark.isActive }"
              style="color: var(--brand-1)"
              @click="undo"
            />
            <div style="width: 31.98px"></div>
          </div>
          <div v-else>
            <q-btn
              round
              flat
              id="editDialog"
              icon="mdi-pencil-outline"
              padding="xs"
              class="q-mr-md"
              :class="{ dark: $q.dark.isActive }"
              style="color: var(--brand-1)"
              @click="editData"
            />
            <q-btn
              round
              flat
              id="deleteDialog"
              icon="mdi-trash-can-outline"
              padding="xs"
              :class="{ dark: $q.dark.isActive }"
              style="color: hsl(var(--negative-bg))"
              @click="deleteData"
            />
          </div>

          <div class="col text-subtitle1 text-weight-bold text-center">
            <text v-if="category" class="app-text-muted">{{ category }} /</text>
            {{ title }}

            <text
              v-if="!!statusBranch"
              class="branch-badge branch-card__badge"
              :class="{
                'branch-card__inactive ': statusBranch === 'INACTIVE',
              }"
            >
              {{
                statusBranch === 'INACTIVE'
                  ? $t('statusINACTIVE')
                  : $t('statusACTIVE')
              }}
            </text>
            <text
              v-if="badgeLabel"
              class="badge-label q-px-sm text-caption"
              :class="badgeClass"
            >
              {{ badgeLabel }}
            </text>
          </div>

          <div style="width: 31.98px"></div>
          <q-btn
            round
            flat
            id="closeDialog"
            icon="mdi-close"
            padding="xs"
            class="close-btn"
            :class="{ dark: $q.dark.isActive }"
            type="reset"
            @click="close"
            resetValidation
          />
        </div>

        <div
          class="col-10 form-body surface-0"
          style="position: relative"
          :class="{ dark: $q.dark.isActive }"
        >
          <slot name="info"></slot>
        </div>

        <div
          class="form-footer col q-pr-lg row items-center justify-end q-gutter-x-lg"
        >
          <q-btn
            dense
            outline
            unelevated
            id="cancelBtn"
            class="q-px-md app-text-negative"
            :label="$t('cancel')"
            type="reset"
            @click="close"
          />
          <q-btn
            v-if="isEdit"
            dense
            unelevated
            id="submitBtn"
            type="submit"
            color="primary"
            class="q-px-md"
            :label="$t('save')"
          />
          <q-btn
            v-else
            dense
            unelevated
            id="okBtn"
            color="primary"
            class="q-px-md"
            :label="$t('agree')"
            @click="close"
          />
        </div>
      </AppBox>
    </q-form>
  </q-drawer>
</template>

<style scoped lang="scss">
.close-btn {
  color: hsl(var(--negative-bg));
  background-color: hsla(var(--negative-bg) / 0.1);

  &.dark {
    background-color: transparent;
    border: 1px solid hsl(var(--negative-bg));
  }
}

.form-header {
  border-bottom: 1px solid var(--border-color);
}

.form-body {
  --_body-bg: var(--sand-0);
  background-color: var(--_body-bg);
  background-repeat: no-repeat;
  background-size: cover;
  &.dark {
    --_body-bg: var(--gray-10);
  }
}

.form-footer {
  border-top: 1px solid var(--border-color);
}

.branch-badge {
  --_branch-badge-fg: var(--green-8-hsl);
  --_branch-badge-bg: var(--green-6-hsl);

  &.branch-card__inactive {
    --_branch-badge-fg: var(--red-4-hsl);
    --_branch-badge-bg: var(--red-4-hsl);
  }

  &.branch-card__badge {
    display: inline-block;
    border-radius: 999rem;
    padding-inline: var(--size-2);
    color: hsl(var(--_branch-badge-fg));
    background-color: hsla(var(--_branch-badge-bg) / 0.1);
  }
}

.badge-label {
  display: inline-block;
  border-radius: var(--radius-6);
  background-color: var(--surface-2);
  text-wrap: nowrap;
}
</style>
