<script lang="ts" setup>
import {
  AlertRoot,
  AlertTitle,
  AlertDescription,
  AlertCloseTrigger,
} from "@/components/ui/alert";
import {
  Preview,
  SectionTitle,
  SectionContent,
  InstallPackage,
  PreviewCode,
} from "@/components/docs";
import { Compass } from "@lucide/vue";
import { Box } from "@/components/ui/box";
</script>

<template>
  <div id="preview" class="-mt-20">
    <Preview>
      <template #preview>
        <AlertRoot variant="primary">
          <Compass />
          <AlertTitle>Success! Your changes have been saved</AlertTitle>
          <AlertDescription>
            This is an alert with icon, title and description.
          </AlertDescription>
          <AlertCloseTrigger />
        </AlertRoot>
      </template>
      <template #code>
        <PreviewCode>
          {{ `
          <AlertRoot variant="primary">
            <Compass />
            <AlertTitle>Success! Your changes have been saved</AlertTitle>
            <AlertDescription>
              This is an alert with icon, title and description.
            </AlertDescription>
            <AlertCloseTrigger />
          </AlertRoot>
          ` }}
        </PreviewCode>
      </template>
    </Preview>
  </div>
  <div id="installation">
    <SectionTitle>Installation</SectionTitle>
    <SectionContent>Install the following dependencies:</SectionContent>
    <InstallPackage>add @zag-js/vue @zag-js/alert</InstallPackage>
    <SectionContent>
      Copy and paste the following code into your project.
    </SectionContent>
    <PreviewCode title="components/ui/alert/AlertCloseTrigger.vue">
      {{`
      <script lang="ts" setup>
import { X } from "@lucide/vue";
import { cn } from "@mykopkb/core/utils/cn";
import { Slot } from "@/components/ui/slot";
import { alertCloseTrigger } from "@mykopkb/core/styles/alert.styles";
import { inject } from "vue";

const {
  class: className,
  asChild = false,
  ...props
} = defineProps<{
  class?: string;
  asChild?: boolean;
}>();

const context = inject<{
  present: boolean;
  setPresent: (value: boolean) => void;
} | null>("alertPresent", null);
</script>

      <template>
        <Slot :class="cn([className, alertCloseTrigger])" v-bind="{ ...props, ...$attrs }"
          @click="context?.setPresent(false)">
          <slot v-if="asChild" />
          <div v-else>
            <slot v-if="$slots.default" />
            <X v-else />
          </div>
        </Slot>
      </template>
      ` }}
    </PreviewCode>
    <PreviewCode title="components/ui/alert/AlertDescription.vue">
      {{ `
      <script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { Slot } from "@/components/ui/slot";
import { alertDescription } from "@mykopkb/core/styles/alert.styles";

const {
  class: className,
  asChild = false,
  ...props
} = defineProps<{
  class?: string;
  asChild?: boolean;
}>();
</script>

      <template>
        <Slot :class="cn([className, alertDescription])" v-bind="{ ...props, ...$attrs }">
          <slot v-if="asChild" />
          <div v-else>
            <slot />
          </div>
        </Slot>
      </template>
      ` }}
    </PreviewCode>
    <PreviewCode title="components/ui/alert/AlertRoot.vue">
      {{`
      <script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import {
  alertRootVariants,
  type AlertRootVariants,
} from "@mykopkb/core/styles/alert.styles";
import { Presence } from "@/components/ui/presence";
import { ref, provide } from "vue";

const {
  class: className,
  look,
  variant,
  ...rest
} = defineProps<AlertRootVariants & { class?: string }>();

const present = ref(true);
const setPresent = (value: boolean) => {
  present.value = value;
};

provide("alertPresent", { present, setPresent });
</script>

      <template>
        <Presence :class="
      cn(
        alertRootVariants({
          look,
          variant,
        }),
        className
      )
    " v-bind="rest" :present="present">
          <slot />
        </Presence>
      </template>
      ` }}
    </PreviewCode>
    <PreviewCode title="components/ui/alert/AlertTitle.vue">
      {{ `
      <script lang="ts" setup>
import { cn } from "@mykopkb/core/utils/cn";
import { Slot } from "@/components/ui/slot";
import { alertTitle } from "@mykopkb/core/styles/alert.styles";

const {
  class: className,
  asChild = false,
  ...props
} = defineProps<{
  class?: string;
  asChild?: boolean;
}>();
</script>

      <template>
        <Slot :class="cn([className, alertTitle])" v-bind="{ ...props, ...$attrs }">
          <slot v-if="asChild" />
          <div v-else>
            <slot />
          </div>
        </Slot>
      </template>
      ` }}
    </PreviewCode>
    <PreviewCode title="components/ui/alert/index.ts">
      {{ `
      export { default as AlertRoot } from "./AlertRoot.vue";
      export { default as AlertTitle } from "./AlertTitle.vue";
      export { default as AlertDescription } from "./AlertDescription.vue";
      export { default as AlertCloseTrigger } from "./AlertCloseTrigger.vue";
      ` }}
    </PreviewCode>
    <SectionContent>
      Update the import paths to match your project setup.
    </SectionContent>
  </div>
  <div id="usage">
    <SectionTitle>Usage</SectionTitle>
    <PreviewCode>
      {{ `
      import {
      AlertRoot,
      AlertTitle,
      AlertDescription,
      AlertCloseTrigger,
      } from "@/components/ui/alert";
      ` }}
    </PreviewCode>
    <PreviewCode>
      {{ `
      <AlertRoot>
        <Compass />
        <AlertTitle>
          Success! Your changes have been saved
        </AlertTitle>
        <AlertDescription>
          This is an alert with icon, title and description.
        </AlertDescription>
        <AlertCloseTrigger />
      </AlertRoot>
      ` }}
    </PreviewCode>
  </div>
  <div id="variants">
    <SectionTitle>Variants</SectionTitle>
    <SectionContent>A collection of components you can use.</SectionContent>
    <Preview class="flex-col!">
      <template #preview>
        <AlertRoot variant="primary">
          <Compass />
          <AlertTitle>Success! Your changes have been saved</AlertTitle>
          <AlertDescription>
            This is an alert with icon, title and description.
          </AlertDescription>
          <AlertCloseTrigger />
        </AlertRoot>
        <AlertRoot variant="secondary">
          <Compass />
          <AlertTitle>Success! Your changes have been saved</AlertTitle>
          <AlertDescription>
            This is an alert with icon, title and description.
          </AlertDescription>
          <AlertCloseTrigger />
        </AlertRoot>
        <AlertRoot variant="success">
          <Compass />
          <AlertTitle>Success! Your changes have been saved</AlertTitle>
          <AlertDescription>
            This is an alert with icon, title and description.
          </AlertDescription>
          <AlertCloseTrigger />
        </AlertRoot>
        <AlertRoot variant="danger">
          <Compass />
          <AlertTitle>Success! Your changes have been saved</AlertTitle>
          <AlertDescription>
            This is an alert with icon, title and description.
          </AlertDescription>
          <AlertCloseTrigger />
        </AlertRoot>
        <AlertRoot variant="pending">
          <Compass />
          <AlertTitle>Success! Your changes have been saved</AlertTitle>
          <AlertDescription>
            This is an alert with icon, title and description.
          </AlertDescription>
          <AlertCloseTrigger />
        </AlertRoot>
        <AlertRoot variant="warning">
          <Compass />
          <AlertTitle>Success! Your changes have been saved</AlertTitle>
          <AlertDescription>
            This is an alert with icon, title and description.
          </AlertDescription>
          <AlertCloseTrigger />
        </AlertRoot>
      </template>
      <template #code>
        <PreviewCode>
          {{ `
          <AlertRoot variant="primary">
            <Compass />
            <AlertTitle>Success! Your changes have been saved</AlertTitle>
            <AlertDescription>
              This is an alert with icon, title and description.
            </AlertDescription>
            <AlertCloseTrigger />
          </AlertRoot>
          <AlertRoot variant="secondary">
            <Compass />
            <AlertTitle>Success! Your changes have been saved</AlertTitle>
            <AlertDescription>
              This is an alert with icon, title and description.
            </AlertDescription>
            <AlertCloseTrigger />
          </AlertRoot>
          <AlertRoot variant="success">
            <Compass />
            <AlertTitle>Success! Your changes have been saved</AlertTitle>
            <AlertDescription>
              This is an alert with icon, title and description.
            </AlertDescription>
            <AlertCloseTrigger />
          </AlertRoot>
          <AlertRoot variant="danger">
            <Compass />
            <AlertTitle>Success! Your changes have been saved</AlertTitle>
            <AlertDescription>
              This is an alert with icon, title and description.
            </AlertDescription>
            <AlertCloseTrigger />
          </AlertRoot>
          <AlertRoot variant="pending">
            <Compass />
            <AlertTitle>Success! Your changes have been saved</AlertTitle>
            <AlertDescription>
              This is an alert with icon, title and description.
            </AlertDescription>
            <AlertCloseTrigger />
          </AlertRoot>
          <AlertRoot variant="warning">
            <Compass />
            <AlertTitle>Success! Your changes have been saved</AlertTitle>
            <AlertDescription>
              This is an alert with icon, title and description.
            </AlertDescription>
            <AlertCloseTrigger />
          </AlertRoot>
          ` }}
        </PreviewCode>
      </template>
    </Preview>
    <Preview class="flex-col!">
      <template #preview>
        <AlertRoot look="filled" variant="primary">
          <Compass />
          <AlertTitle>Success! Your changes have been saved</AlertTitle>
          <AlertDescription>
            This is an alert with icon, title and description.
          </AlertDescription>
          <AlertCloseTrigger />
        </AlertRoot>
        <AlertRoot look="filled" variant="secondary">
          <Compass />
          <AlertTitle>Success! Your changes have been saved</AlertTitle>
          <AlertDescription>
            This is an alert with icon, title and description.
          </AlertDescription>
          <AlertCloseTrigger />
        </AlertRoot>
        <AlertRoot look="filled" variant="success">
          <Compass />
          <AlertTitle>Success! Your changes have been saved</AlertTitle>
          <AlertDescription>
            This is an alert with icon, title and description.
          </AlertDescription>
          <AlertCloseTrigger />
        </AlertRoot>
        <AlertRoot look="filled" variant="danger">
          <Compass />
          <AlertTitle>Success! Your changes have been saved</AlertTitle>
          <AlertDescription>
            This is an alert with icon, title and description.
          </AlertDescription>
          <AlertCloseTrigger />
        </AlertRoot>
        <AlertRoot look="filled" variant="pending">
          <Compass />
          <AlertTitle>Success! Your changes have been saved</AlertTitle>
          <AlertDescription>
            This is an alert with icon, title and description.
          </AlertDescription>
          <AlertCloseTrigger />
        </AlertRoot>
        <AlertRoot look="filled" variant="warning">
          <Compass />
          <AlertTitle>Success! Your changes have been saved</AlertTitle>
          <AlertDescription>
            This is an alert with icon, title and description.
          </AlertDescription>
          <AlertCloseTrigger />
        </AlertRoot>
      </template>
      <template #code>
        <PreviewCode>
          {{ `
          <AlertRoot look="filled" variant="primary">
            <Compass />
            <AlertTitle>Success! Your changes have been saved</AlertTitle>
            <AlertDescription>
              This is an alert with icon, title and description.
            </AlertDescription>
            <AlertCloseTrigger />
          </AlertRoot>
          <AlertRoot look="filled" variant="secondary">
            <Compass />
            <AlertTitle>Success! Your changes have been saved</AlertTitle>
            <AlertDescription>
              This is an alert with icon, title and description.
            </AlertDescription>
            <AlertCloseTrigger />
          </AlertRoot>
          <AlertRoot look="filled" variant="success">
            <Compass />
            <AlertTitle>Success! Your changes have been saved</AlertTitle>
            <AlertDescription>
              This is an alert with icon, title and description.
            </AlertDescription>
            <AlertCloseTrigger />
          </AlertRoot>
          <AlertRoot look="filled" variant="danger">
            <Compass />
            <AlertTitle>Success! Your changes have been saved</AlertTitle>
            <AlertDescription>
              This is an alert with icon, title and description.
            </AlertDescription>
            <AlertCloseTrigger />
          </AlertRoot>
          <AlertRoot look="filled" variant="pending">
            <Compass />
            <AlertTitle>Success! Your changes have been saved</AlertTitle>
            <AlertDescription>
              This is an alert with icon, title and description.
            </AlertDescription>
            <AlertCloseTrigger />
          </AlertRoot>
          <AlertRoot look="filled" variant="warning">
            <Compass />
            <AlertTitle>Success! Your changes have been saved</AlertTitle>
            <AlertDescription>
              This is an alert with icon, title and description.
            </AlertDescription>
            <AlertCloseTrigger />
          </AlertRoot>
          ` }}
        </PreviewCode>
      </template>
    </Preview>
    <Preview class="flex-col!">
      <template #preview>
        <AlertRoot variant="primary">
          <Compass />
          <AlertTitle>Success! Your changes have been saved</AlertTitle>
          <AlertCloseTrigger />
        </AlertRoot>
        <AlertRoot variant="secondary">
          <Compass />
          <AlertTitle>Success! Your changes have been saved</AlertTitle>
          <AlertCloseTrigger />
        </AlertRoot>
        <AlertRoot variant="success">
          <Compass />
          <AlertTitle>Success! Your changes have been saved</AlertTitle>
          <AlertCloseTrigger />
        </AlertRoot>
        <AlertRoot variant="danger">
          <Compass />
          <AlertTitle>Success! Your changes have been saved</AlertTitle>
          <AlertCloseTrigger />
        </AlertRoot>
        <AlertRoot variant="pending">
          <Compass />
          <AlertTitle>Success! Your changes have been saved</AlertTitle>
          <AlertCloseTrigger />
        </AlertRoot>
        <AlertRoot variant="warning">
          <Compass />
          <AlertTitle>Success! Your changes have been saved</AlertTitle>
          <AlertCloseTrigger />
        </AlertRoot>
      </template>
      <template #code>
        <PreviewCode>
          {{ `
          <AlertRoot variant="primary">
            <Compass />
            <AlertTitle>Success! Your changes have been saved</AlertTitle>
            <AlertCloseTrigger />
          </AlertRoot>
          <AlertRoot variant="secondary">
            <Compass />
            <AlertTitle>Success! Your changes have been saved</AlertTitle>
            <AlertCloseTrigger />
          </AlertRoot>
          <AlertRoot variant="success">
            <Compass />
            <AlertTitle>Success! Your changes have been saved</AlertTitle>
            <AlertCloseTrigger />
          </AlertRoot>
          <AlertRoot variant="danger">
            <Compass />
            <AlertTitle>Success! Your changes have been saved</AlertTitle>
            <AlertCloseTrigger />
          </AlertRoot>
          <AlertRoot variant="pending">
            <Compass />
            <AlertTitle>Success! Your changes have been saved</AlertTitle>
            <AlertCloseTrigger />
          </AlertRoot>
          <AlertRoot variant="warning">
            <Compass />
            <AlertTitle>Success! Your changes have been saved</AlertTitle>
            <AlertCloseTrigger />
          </AlertRoot>
          ` }}
        </PreviewCode>
      </template>
    </Preview>
    <Preview class="flex-col!">
      <template #preview>
        <AlertRoot look="filled" variant="primary">
          <Compass />
          <AlertTitle>Success! Your changes have been saved</AlertTitle>
        </AlertRoot>
        <AlertRoot look="filled" variant="secondary">
          <Compass />
          <AlertTitle>Success! Your changes have been saved</AlertTitle>
        </AlertRoot>
        <AlertRoot look="filled" variant="success">
          <Compass />
          <AlertTitle>Success! Your changes have been saved</AlertTitle>
        </AlertRoot>
        <AlertRoot look="filled" variant="danger">
          <Compass />
          <AlertTitle>Success! Your changes have been saved</AlertTitle>
        </AlertRoot>
        <AlertRoot look="filled" variant="pending">
          <Compass />
          <AlertTitle>Success! Your changes have been saved</AlertTitle>
        </AlertRoot>
        <AlertRoot look="filled" variant="warning">
          <Compass />
          <AlertTitle>Success! Your changes have been saved</AlertTitle>
        </AlertRoot>
      </template>
      <template #code>
        <PreviewCode>
          {{ `
          <AlertRoot look="filled" variant="primary">
            <Compass />
            <AlertTitle>Success! Your changes have been saved</AlertTitle>
          </AlertRoot>
          <AlertRoot look="filled" variant="secondary">
            <Compass />
            <AlertTitle>Success! Your changes have been saved</AlertTitle>
          </AlertRoot>
          <AlertRoot look="filled" variant="success">
            <Compass />
            <AlertTitle>Success! Your changes have been saved</AlertTitle>
          </AlertRoot>
          <AlertRoot look="filled" variant="danger">
            <Compass />
            <AlertTitle>Success! Your changes have been saved</AlertTitle>
          </AlertRoot>
          <AlertRoot look="filled" variant="pending">
            <Compass />
            <AlertTitle>Success! Your changes have been saved</AlertTitle>
          </AlertRoot>
          <AlertRoot look="filled" variant="warning">
            <Compass />
            <AlertTitle>Success! Your changes have been saved</AlertTitle>
          </AlertRoot>
          ` }}
        </PreviewCode>
      </template>
    </Preview>
    <Preview class="flex-col!">
      <template #preview>
        <Box class="p-0">
          <AlertRoot variant="ghost">
            <Compass />
            <AlertTitle>Success! Your changes have been saved</AlertTitle>
            <AlertDescription>
              This is an alert with icon, title and description.
            </AlertDescription>
            <AlertCloseTrigger />
          </AlertRoot>
        </Box>
        <Box class="p-0" raised="single">
          <AlertRoot variant="ghost">
            <Compass />
            <AlertTitle>Success! Your changes have been saved</AlertTitle>
            <AlertDescription>
              This is an alert with icon, title and description.
            </AlertDescription>
            <AlertCloseTrigger />
          </AlertRoot>
        </Box>
        <Box class="p-0" raised="double">
          <AlertRoot variant="ghost">
            <Compass />
            <AlertTitle>Success! Your changes have been saved</AlertTitle>
            <AlertDescription>
              This is an alert with icon, title and description.
            </AlertDescription>
            <AlertCloseTrigger />
          </AlertRoot>
        </Box>
      </template>
      <template #code>
        <PreviewCode>
          {{ `
          <Box class="p-0">
            <AlertRoot variant="ghost">
              <Compass />
              <AlertTitle>Success! Your changes have been saved</AlertTitle>
              <AlertDescription>
                This is an alert with icon, title and description.
              </AlertDescription>
              <AlertCloseTrigger />
            </AlertRoot>
          </Box>
          <Box class="p-0" raised="single">
            <AlertRoot variant="ghost">
              <Compass />
              <AlertTitle>Success! Your changes have been saved</AlertTitle>
              <AlertDescription>
                This is an alert with icon, title and description.
              </AlertDescription>
              <AlertCloseTrigger />
            </AlertRoot>
          </Box>
          <Box class="p-0" raised="double">
            <AlertRoot variant="ghost">
              <Compass />
              <AlertTitle>Success! Your changes have been saved</AlertTitle>
              <AlertDescription>
                This is an alert with icon, title and description.
              </AlertDescription>
              <AlertCloseTrigger />
            </AlertRoot>
          </Box>
          ` }}
        </PreviewCode>
      </template>
    </Preview>
  </div>
</template>
