import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
import { Story } from "@/components/Story";
import {
  LoadedCode,
  GITHUB_DIR_COMP,
  GITHUB_COMP_PREVIEW,
  GITHUB_STORY,
} from "@/components/LoadedCode";
import { DialogDemo } from "./DialogBlocks/Preview";
import Examples from "./DialogBlocks/Examples";

# Dialog

A modal window that prompts the user to take an action or provides critical information.

<TabProvider defaultName="preview">
  <TabList>
    <TabTrigger name="preview">Preview</TabTrigger>
    <TabTrigger name="code">Code</TabTrigger>
  </TabList>
  <TabContent name="preview">
    <Story layout="centered">
      <DialogDemo />
    </Story>
  </TabContent>
  <TabContent name="code">
    <LoadedCode from={GITHUB_COMP_PREVIEW("Dialog")} />
  </TabContent>
</TabProvider>

## Installation

1. Create a new directory named `Dialog` in your component folder.
2. Create following files in the folder, and paste the code into the file.

- `index.ts`
  <LoadedCode from={GITHUB_DIR_COMP("Dialog", "index.ts")} />
- `Context.ts`
  <LoadedCode from={GITHUB_DIR_COMP("Dialog", "Context.ts")} />
- `Component.tsx`
  <LoadedCode from={GITHUB_DIR_COMP("Dialog", "Component.tsx")} />

## Usage

```tsx
import {
  DialogRoot,
  DialogTrigger,
  DialogOverlay,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogSubtitle,
  DialogFooter,
  DialogClose,
} from "@components/Dialog";
```

```html
<DialogRoot>
  <DialogTrigger>
    <button>Open Dialog</button>
  </DialogTrigger>
  <DialogOverlay>
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Dialog Title</DialogTitle>
        <DialogSubtitle>Dialog Subtitle</DialogSubtitle>
      </DialogHeader>
      {/* Main Contents */}
      <DialogFooter>
        <DialogClose>
          <button>Close</button>
        </DialogClose>
      </DialogFooter>
    </DialogContent>
  </DialogOverlay>
</DialogRoot>
```

> Note:
>
> DialogTrigger and DialogClose will merge its onClick event handler to its children.
> Also, there is no default element for those.
> So you always have to provide the clickable children for DialogTrigger and DialogClose.
>
> It is easier to understand if you think of this component as always having the `asChild` prop applied to it.

## Props

### DialogOverlay

#### Special

| Prop           | Type      | Default | Description                                    |
| :------------- | :-------- | :------ | :--------------------------------------------- |
| `closeOnClick` | `boolean` | `false` | Whether the dialog will be closed when clicked |

## Examples

### Basic Informational Dialog

<TabProvider defaultName="preview">
  <TabList>
    <TabTrigger name="preview">Preview</TabTrigger>
    <TabTrigger name="code">Code</TabTrigger>
  </TabList>
  <TabContent name="preview">
    <Story layout="centered">
      <Examples.BasicInformationalDialog />
    </Story>
  </TabContent>
  <TabContent name="code">
    <LoadedCode from={GITHUB_STORY("Dialog", "BasicInformationalDialog")} />
  </TabContent>
</TabProvider>

### Deleting Item

<TabProvider defaultName="preview">
  <TabList>
    <TabTrigger name="preview">Preview</TabTrigger>
    <TabTrigger name="code">Code</TabTrigger>
  </TabList>
  <TabContent name="preview">
    <Story layout="centered">
      <Examples.DeletingItem />
    </Story>
  </TabContent>
  <TabContent name="code">
    <LoadedCode from={GITHUB_STORY("Dialog", "DeletingItem")} />
  </TabContent>
</TabProvider>