import { componentName } from '../src/components/descope-date-field/descope-calendar';
import { withForm } from './helpers';
import {
  sizeControl,
  fullWidthControl,
  directionControl,
  disabledControl,
  readOnlyControl,
  requiredControl,
  borderedControl,
  textAlignControl,
  errorMissingValueControl,
} from './commonControls';

const Template = ({
  size,
  bordered,
  direction,
  required,
  disabled,
  readonly,
  'initial-value': initialValue,
  'initial-month': initialMonth,
  'initial-year': initialYear,
  'years-range': yearsRange,
  'full-width': fullWidth,
  'data-errormessage-value-missing': customErrorMessage,
  'calendar-months': dataMonths,
  'calendar-weekdays': dataWeekdays,
  'calendar-label-today': dataLabelToday,
  'calendar-label-submit': dataLabelCalendarSubmit,
  'calendar-label-cancel': dataLabelCalendarCancel,
}) => `
      <descope-calendar
        size="${size}"
        bordered="${bordered}"
        disabled="${disabled || false}"
        initial-month="${initialMonth || ''}"
        initial-year="${initialYear || ''}"
        initial-value="${initialValue || ''}"
        readonly="${readonly || false}"
        required="${required || false}"
        full-width="${fullWidth || false}"
        data-errormessage-value-missing="${customErrorMessage || ''}"
        st-host-direction="${direction ?? ''}"
        years-range="${yearsRange || ''}"
        calendar-months="${dataMonths || ''}"
        calendar-weekdays="${dataWeekdays || ''}"
        calendar-label-today="${dataLabelToday || ''}"
        calendar-label-submit="${dataLabelCalendarSubmit || ''}"
        calendar-label-cancel="${dataLabelCalendarCancel || ''}"
      ></descope-calendar>
  `;

export default {
  component: componentName,
  title: 'descope-calendar',
  decorators: [
    (story, { args }) => {
      setTimeout(() => {
        const calendar = document.querySelector('descope-calendar');
        calendar.addEventListener('month-changed', (e) => console.log('month changed', e.detail));
        calendar.addEventListener('year-changed', (e) => console.log('year changed', e.detail));
        calendar.addEventListener('day-changed', (e) => console.log('day changed', e.detail));
        calendar.addEventListener('date-submit', (e) => console.log('submit', e.detail));
        calendar.addEventListener('date-cancel', (e) => console.log('cancel', e.detail));
      });
      return story();
    },
    withForm,
  ],
  argTypes: {
    ...sizeControl,
    ...fullWidthControl,
    ...disabledControl,
    ...readOnlyControl,
    ...requiredControl,
    ...borderedControl,
    ...errorMissingValueControl,
    ...directionControl,
    ...textAlignControl,
    'initial-value': {
      name: 'Initial Value',
      control: { type: 'text' },
    },
    'initial-year': {
      name: 'Initial Year',
      control: { type: 'number' },
    },
    'initial-month': {
      name: 'Initial Month',
      control: { type: 'number' },
    },
    'years-range': {
      name: 'Years Range',
      control: { type: 'text' },
    },
    'calendar-months': {
      name: 'Custom Months',
      control: { type: 'text' },
    },
    'calendar-weekdays': {
      name: 'Custom Weekdays',
      control: { type: 'text' },
    },
  },
};

export const Default = Template.bind({});

Default.args = {
  bordered: true,
  size: 'md',
  'years-range': '2000-2050',
};
