<script setup>
import { Icon } from "@iconify/vue";
import { Button } from "../ui/button";
defineOptions({ name: "ShwfedConfigEditorFooter" });
const props = defineProps({
  state: { type: Object, required: true }
});
const emit = defineEmits(["close"]);
function onDismiss() {
  props.state.dismiss();
  emit("close");
}
function onConfirm() {
  const dirtyBefore = props.state.isDirty.value;
  const errorBefore = props.state.validationError.value;
  props.state.confirm();
  const errorAfter = props.state.validationError.value;
  if (errorAfter && errorAfter !== errorBefore) return;
  if (!dirtyBefore || !errorAfter) emit("close");
}
</script>

<template>
  <div class="flex w-full items-center justify-between gap-3">
    <div class="flex flex-1 flex-col gap-1 text-xs">
      <span
        v-if="props.state.validationError.value"
        class="text-red-500 break-all"
      >{{ props.state.validationError.value }}</span>
    </div>
    <Button
      v-if="props.state.stack.value.length > 1"
      type="button"
      variant="default"
      size="sm"
      @click="props.state.popOne()"
    >
      <Icon icon="fluent:arrow-left-20-regular" />
      返回
    </Button>
    <template v-else>
      <Button
        type="button"
        variant="default"
        size="sm"
        @click="onDismiss"
      >
        <Icon icon="fluent:dismiss-20-regular" />
        取消
      </Button>
      <Button
        type="button"
        variant="primary"
        size="sm"
        @click="onConfirm"
      >
        <Icon icon="fluent:checkmark-20-regular" />
        确认
      </Button>
    </template>
  </div>
</template>
