import { useState } from 'react';

import { type Meta, type StoryObj } from '@storybook/react-vite';
import { format } from 'date-fns';
import es from 'date-fns/locale/es';

import WeekMonthSelector from '.';
import { WeekMonthPeriod } from './types';

const meta: Meta<typeof WeekMonthSelector> = {
  component: WeekMonthSelector,
  title: 'Composed Components/WeekMonthSelector',
  tags: ['autodocs'],
  args: {
    dateFormatter: (date: Date, pattern = 'dd/MMM/yyyy') => {
      try {
        return format(new Date(date), pattern, { locale: es });
      } catch {
        return '';
      }
    },
  },
};

export default meta;

type Story = StoryObj<typeof WeekMonthSelector>;

export const Weekly: Story = {
  render: args => {
    const today = new Date();
    const [fromDate, setFromDate] = useState(today);
    const [toDate, setToDate] = useState(today);

    return (
      <WeekMonthSelector
        {...args}
        fromDate={fromDate}
        toDate={toDate}
        handleFromChange={setFromDate}
        handleToChange={setToDate}
        initialPeriod={WeekMonthPeriod.WEEKLY}
      />
    );
  },
};

export const Monthly: Story = {
  render: args => {
    const today = new Date();
    const [fromDate, setFromDate] = useState(today);
    const [toDate, setToDate] = useState(today);

    return (
      <WeekMonthSelector
        {...args}
        fromDate={fromDate}
        toDate={toDate}
        handleFromChange={setFromDate}
        handleToChange={setToDate}
        initialPeriod={WeekMonthPeriod.MONTHLY}
      />
    );
  },
};