<script>
import theme from "#build/b24ui/prose/pre";
</script>

<script setup>
import { computed, useTemplateRef } from "vue";
import { useClipboard } from "@vueuse/core";
import { useAppConfig } from "#imports";
import { useComponentProps } from "../../composables/useComponentProps";
import { useLocale } from "../../composables/useLocale";
import { tv } from "../../utils/tv";
import icons from "../../dictionary/icons";
import B24CodeIcon from "./CodeIcon.vue";
import B24Button from "../Button.vue";
const _props = defineProps({
  icon: { type: [Function, Object], required: false },
  code: { type: String, required: false },
  language: { type: String, required: false },
  filename: { type: String, required: false },
  highlights: { type: Array, required: false },
  hideHeader: { type: Boolean, required: false },
  meta: { type: String, required: false },
  class: { type: null, required: false },
  style: { type: null, required: false },
  b24ui: { type: Object, required: false }
});
defineSlots();
const props = useComponentProps("prose.pre", _props);
const { t } = useLocale();
const { copy, copied } = useClipboard();
const appConfig = useAppConfig();
const baseRef = useTemplateRef("baseRef");
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.pre || {} })());
function copyCode() {
  const code = props.code ?? baseRef.value?.textContent ?? "";
  copy(code);
}
</script>

<template>
  <div data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root], filename: !!props.filename })">
    <div v-if="props.filename && !props.hideHeader" data-slot="header" :class="b24ui.header({ class: props.b24ui?.header })">
      <B24CodeIcon :icon="props.icon" :filename="props.filename" data-slot="icon" :class="b24ui.icon({ class: props.b24ui?.icon })" />

      <span data-slot="filename" :class="b24ui.filename({ class: props.b24ui?.filename })">{{ props.filename }}</span>
    </div>

    <B24Button
      color="air-secondary-no-accent"
      size="sm"
      :aria-label="t('prose.pre.copy')"
      data-slot="copy"
      :class="b24ui.copy({ class: props.b24ui?.copy })"
      tabindex="-1"
      :icon="copied ? icons.copyCheck : icons.copy"
      :b24ui="{ leadingIcon: [copied ? 'text-(--ui-color-accent-main-success)' : 'text-(--ui-btn-color)'] }"
      @click="copyCode"
    />

    <pre ref="baseRef" data-slot="base" :class="b24ui.base({ class: [props.b24ui?.base, props.class] })" v-bind="$attrs"><slot /></pre>
  </div>
</template>
