import { commonArgTypes } from '@/lib/constants';
import Editor from '@/lib/components/Editor';
import type { Meta } from '@storybook/vue3';

const meta = {
  title: 'Input Component/Editor',
  component: Editor,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component: '텍스트를 작성하고 스타일을 지정하며 다양한 포멧팅 옵션을 적용할 수 있습니다.'
      }
    }
  },
  argTypes: {
    scaling: {
      ...commonArgTypes.scaling,
      description: 'Editor 비율'
    },
    size: {
      table: {
        category: 'Props',
        type: { summary: ['small', 'medium', 'large'].join(' | ') }
      },
      control: { type: 'select' },
      options: ['small', 'medium', 'large'],
      defaultValue: { summary: 'medium' },
      description: 'Editor 크기'
    },
    language: {
      table: {
        disable: true
      }
    }
  }
} as Meta;

export default meta;

export const Default = {
  render: (args: any) => ({
    components: {
      Editor
    },
    setup() {
      return { args };
    },
    template: `<Editor v-bind='args'/>`
  })
};

export const Customize = {
  render: (args: any) => ({
    components: {
      Editor
    },
    setup() {
      return { args };
    },
    template: `<Editor 
                 :init="{ 
                   menubar: '', 
                   toolbar: 'blocks | bold italic forecolor strikethrough | hr blockquote | bullist numlist outdent indent | table image link | inlinecode codeformat codesample markdown' 
                 }" 
               />`
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <Editor :init="{ menubar: '', toolbar: 'blocks | bold italic forecolor strikethrough | hr blockquote | bullist numlist outdent indent | table image link | inlinecode codeformat codesample markdown' }" />
</template>`
      }
    }
  }
};

export const Language = {
  render: (args: any) => ({
    components: {
      Editor
    },
    setup() {
      return { args };
    },
    template: `<Editor language="ko_KR"/>`
  })
};