import DateRangepicker from '@/lib/components/DateRangePicker';
import Datepicker from '@/lib/components/Datepicker';
import { commonArgTypes } from '@/lib/constants';
import Calendar from '@/lib/components/Calendar';
import type { Meta } from '@storybook/vue3';

const meta = {
  title: 'Input Component/Datepicker',
  component: Datepicker,
  parameters: {
    layout: 'centered',
    themes: {
      themeOverride: 'dark'
    },
    docs: {
      description: {
        component: '사용자가 날짜를 선택할 수 있도록 도와주는 UI 요소입니다.'
      },
      source: {
        type: 'code'
      }
    }
  },
  argTypes: {
    scaling: {
      ...commonArgTypes.scaling,
      description: 'Datepicker 비율'
    },
    radius: {
      ...commonArgTypes.radius,
      description: 'Datepicker 둥글기'
    },
    color: {
      ...commonArgTypes.color,
      description: 'Datepicker 메인 색'
    },
    placeholder: {
      table: {
        category: 'Props',
        type: { summary: 'string' }
      },
      control: 'text',
      defaultValue: { summary: '날짜를 선택해주세요' }
    }
  }
} as Meta;
export default meta;

export const Default = {
  render: (args: {}) => ({
    components: {
      Datepicker
    },
    setup() {
      return { args };
    },
    template: `<Datepicker v-bind='args' />`
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <Datepicker />
</template> 
        `
      }
    }
  }
};

export const DateRangePicker = {
  render: (args: {}) => ({
    components: {
      DateRangepicker
    },
    setup() {
      return { args };
    },
    template: `<DateRangepicker />`
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <DateRangepicker />
</template> 
        `
      }
    }
  }
};

export const ShowOutsideDays = {
  render: (args: {}) => ({
    components: {
      Datepicker
    },
    setup() {
      return { args };
    },
    template: `<Datepicker showOutsideDays/>`
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <Datepicker showOutsideDays />
</template> 
        `
      }
    }
  }
};

export const CalendarUI = {
  render: (args: {}) => ({
    components: {
      Calendar
    },
    setup() {
      return { args };
    },
    template: `<Calendar />`
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <Calendar />
</template> 
        `
      }
    }
  }
};