import AlertDialog from '@/lib/components/AlertDialog';
import { commonArgTypes, radiusOptions, sizeOptions } from '@/lib/constants';
import { type Meta } from '@storybook/vue3';
import { ref } from 'vue';

const meta = {
  title: 'Feedback Component/AlertDialog',
  component: AlertDialog,
  parameters: {
    layout: 'centered',
    themes: {
      themeOverride: 'dark'
    },
    docs: {
      description: {
        component: '사용자에게 결정을 내리거나 추가 정보를 입력하라는 프롬프트를 보내는 작은 창'
      }
    }
  },
  argTypes: {
    radius: {
      ...commonArgTypes.radius,
      description: 'AlertDialog 테두리, Dialog 내 버튼 border 둥굴기',
      defaultValue: { summary: 'large' }
    },
    size: {
      ...commonArgTypes.size,
      table: {
        category: 'Props',
        type: {
          summary: sizeOptions.filter((option) => option !== 'x-small').join(' | ')
        }
      },
      options: sizeOptions.filter((option) => option !== 'x-small'),
      description: 'AlertDialog 크기',
      defaultValue: { summary: 'large' }
    },
    scaling: {
      ...commonArgTypes.scaling,
      description: 'AlertDialog 비율'
    },
    color: {
      ...commonArgTypes.color,
      description: 'Action Button 메인 색'
    }
  }
} as Meta;

export default meta;

const alertDialogComponent = {
  AlertDialogRoot: AlertDialog.Root,
  AlertDialogTrigger: AlertDialog.Trigger,
  AlertDialogContent: AlertDialog.Content,
  AlertDialogTitle: AlertDialog.Title,
  AlertDialogDescription: AlertDialog.Description,
  AlertDialogCancel: AlertDialog.Cancel,
  AlertDialogAction: AlertDialog.Action
};

export const Default = {
  render: (args: any) => ({
    components: alertDialogComponent,
    setup() {
      return { args };
    },
    template: `
    <AlertDialogRoot v-bind='args'>
      <AlertDialogTrigger>Open Dialog</AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogTitle>AlertDialog 제목</AlertDialogTitle>
        <AlertDialogDescription>AlertDialog 내용이 들어갈 공간입니다.</AlertDialogDescription>
        <div className="flex justify-end">
          <AlertDialogCancel>취소</AlertDialogCancel>
          <AlertDialogAction>확인</AlertDialogAction>
        </div>
      </AlertDialogContent>
    </AlertDialogRoot>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <AlertDialogRoot>
    <AlertDialogTrigger>Open Dialog</AlertDialogTrigger>
    <AlertDialogContent>
      <AlertDialogTitle>AlertDialog 제목</AlertDialogTitle>
      <AlertDialogDescription>AlertDialog 내용이 들어갈 공간입니다.</AlertDialogDescription>
      <div className="flex justify-end">
        <AlertDialogCancel>취소</AlertDialogCancel>
        <AlertDialogAction>확인</AlertDialogAction>
      </div>
    </AlertDialogContent>
  </AlertDialogRoot>
</template>
        `
      }
    }
  }
};