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 DatePeriodSelector from '.';

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

export default meta;

type Story = StoryObj<typeof DatePeriodSelector>;

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

    return (
      <DatePeriodSelector
        {...args}
        fromDate={fromDate}
        handleFromChange={setFromDate}
        handleToChange={setToDate}
        toDate={toDate}
        minMaxDatesDifference={45}
      />
    );
  },
};

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

    return (
      <DatePeriodSelector
        {...args}
        fromDate={fromDate}
        handleFromChange={setFromDate}
        handleToChange={setToDate}
        toDate={toDate}
        currentDate={new Date()}
        showDateReference
      />
    );
  },
};