import { commonArgTypes, sizeOptions, radiusOptions, scalingOptions } from '@/lib/constants';
import type { Meta } from '@storybook/vue3';
import type { ISize } from '@/lib/types';
import Dialog from '@/lib/components/Dialog';
import Button from '@/lib/components/Button';
import Label from '@/lib/components/Label';

const meta = {
  title: 'Feedback Component/Dialog',
  component: Dialog.Root,
  parameters: {
    layout: 'centered',
    themes: {
      themeOverride: 'dark'
    },
    docs: {
      description: {
        component: '사용자에게 결정을 내리거나 추가 정보를 입력하라는 프롬프트를 보내는 작은 창'
      }
    }
  },
  argTypes: {
    radius: {
      ...commonArgTypes.radius,
      description: 'dialog 둥글기'
    },
    size: {
      ...commonArgTypes.size,
      table: {
        category: 'Props',
        type: {
          summary: sizeOptions.filter((size: ISize) => !['x-small'].includes(size)).join(' | ')
        }
      },
      options: sizeOptions.filter((size: ISize) => !['x-small'].includes(size)),
      description: 'dialog 크기'
    },
    scaling: {
      ...commonArgTypes.scaling,
      description: 'dialog scaling'
    },
    color: {
      ...commonArgTypes.color,
      description: 'dialog color'
    },
    default: { table: { disable: true } }
  }
} as Meta;

export default meta;

const commonComponents = {
  DialogRoot: Dialog.Root,
  DialogTrigger: Dialog.Trigger,
  DialogContent: Dialog.Content,
  DialogTitle: Dialog.Title,
  DialogDescription: Dialog.Description,
  DialogSlot: Dialog.Slot,
  DialogCancel: Dialog.Cancel,
  DialogAction: Dialog.Action,
  Button,
  Label
};

export const Default = {
  render: (args: any) => ({
    components: commonComponents,
    setup() {
      return { args };
    },
    template: `
     <DialogRoot v-bind='args'>
      <DialogTrigger>
        <Button>Edit profile</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogTitle>Edit profile</DialogTitle>
        <DialogDescription>Make changes to your profile.</DialogDescription>
        <DialogSlot>
          <Label>Name</Label>
          <input placeholder="Enter your full name" />
          <Label>Email</Label>
          <input placeholder="Enter your email" />
        </DialogSlot>

        <div class="flex justify-end">
          <DialogCancel>Cancel</DialogCancel>
          <DialogAction>Save</DialogAction>
        </div>
      </DialogContent>
  </DialogRoot>
  `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <DialogRoot>
    <DialogTrigger>
      <Button>Edit profile</Button>
    </DialogTrigger>
    <DialogContent>
      <DialogTitle>Edit profile</DialogTitle>
      <DialogDescription>Make changes to your profile.</DialogDescription>
      <DialogSlot>
        <Label>Name</Label>
        <input placeholder="Enter your full name" />
        <Label>Email</Label>
        <input placeholder="Enter your email" />
      </DialogSlot>

      <div class="flex justify-end">
        <DialogCancel>Cancel</DialogCancel>
        <DialogAction>Save</DialogAction>
      </div>
    </DialogContent>
  </DialogRoot>
</template>
        `
      }
    }
  }
};