import Tooltip from '@/lib/components/Tooltip';
import Text from '@/lib/components/Text/Text.vue';
import { commonArgTypes } from '@/lib/constants';
import { Meta } from '@storybook/vue3/*';

const meta = {
  title: 'Feedback Component/ToolTip',
  component: { Tooltip },
  parameters: {
    layout: 'centered',
    themes: {
      themeOverride: 'dark'
    },
    docs: {
      description: {
        component:
          '부연 설명을 표시할 때 사용되는 요소로 개체 위에 포인터를 올려놓았을 때 자동으로 표시되는 기능'
      }
    }
  },
  argTypes: {
    radius: {
      table: {
        category: 'Theme Props',
        type: { summary: ['none', 'small', 'medium', 'large'].join(' | ') }
      },
      options: ['none', 'small', 'medium', 'large'],
      control: { type: 'select' },
      defaultValue: { summary: 'medium' },
      description: 'Tooltip component 둥글기'
    },
    color: {
      ...commonArgTypes.color,
      description: 'Tooltip component 배경 색상',
      defaultValue: { summary: 'black' }
    },
    side: {
      table: {
        category: 'Props',
        type: { summary: ['top', 'right', 'left', 'bottom'].join(' | ') }
      },
      control: { type: 'select' },
      defaultValue: { summary: 'top' },
      description: 'Tooltip component 위치',
      options: ['top', 'right', 'left', 'bottom']
    },
    label: {
      table: {
        disable: true
      }
    },
    defaultValue: {
      table: {
        disable: true
      }
    },
    selected: {
      table: {
        disable: true
      }
    },
    disabled: {
      table: {
        disable: true
      }
    },
    active: {
      table: {
        disable: true
      }
    }
  }
} as Meta;

export default meta;
export const Default = {
  render: (args: any) => ({
    components: {
      TooltipRoot: Tooltip.Root,
      TooltipContent: Tooltip.Content,
      TooltipTrigger: Tooltip.Trigger,
      Text
    },
    setup() {
      return { args };
    },
    template: `
      <div>
        <TooltipRoot>
        <TooltipTrigger>
         <Text>마우스 커서를 올려주세요</Text>
        </TooltipTrigger>
          <TooltipContent v-bind="args">
            툴팁 컴포넌트 내용입니다.
          </TooltipContent>
        </TooltipRoot>
      </div>
      `
  })
};

export const Radius = {
  render: (args: any) => ({
    components: {
      TooltipRoot: Tooltip.Root,
      TooltipContent: Tooltip.Content,
      TooltipTrigger: Tooltip.Trigger,
      Text
    },
    setup() {
      const radiusOptions = ['none', 'small', 'medium', 'large'];
      return { args, radiusOptions };
    },
    template: `
      <template v-for="radius in radiusOptions" :key="radius">
        <TooltipRoot>
        <TooltipTrigger>
         <Text>마우스 커서를 올려주세요</Text>
        </TooltipTrigger>
          <TooltipContent :radius="radius" >
            툴팁 컴포넌트 내용입니다.
          </TooltipContent>
        </TooltipRoot>
        <br/>
        </template>
      `
  })
};

export const Position = {
  render: (args: any) => ({
    components: {
      TooltipRoot: Tooltip.Root,
      TooltipContent: Tooltip.Content,
      TooltipTrigger: Tooltip.Trigger,
      Text
    },
    setup() {
      const positions = ['top', 'right', 'left', 'bottom'];
      return { args, positions };
    },
    template: `
      <template v-for="position in positions" :key="position">
        <TooltipRoot>
          <TooltipTrigger>
          <Text>마우스 커서를 올려주세요</Text>
          </TooltipTrigger>
          <TooltipContent :side="position" >
            툴팁 컴포넌트 내용입니다.
          </TooltipContent>
        </TooltipRoot>
        <br/>
        </template>
      `
  })
};