import React, { useState } from "react";
import { fn } from "@storybook/test";
import { MonthRangePicker } from "../components/MonthRangePicker";

export default {
  title: "Components/MonthRangePicker",
  component: MonthRangePicker,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    docs: {
      description: {
        component:
          "A Month Range Picker is a UI component that allows users to select a range of months from a calendar interface. It's commonly used in scenarios where month-level date ranges are needed, such as filtering data by month ranges, setting quarterly periods, or selecting reporting timeframes.\n\n" +
          "Key features:\n" +
          "- Month range selection with year navigation\n" +
          "- Custom year ranges support\n" +
          "- Multiple display formats (MM/YYYY, YYYY/MM)\n" +
          "- Disabled state and error state support\n" +
          "- Custom validation through isOutsideRange\n" +
          "- Apply/Cancel button functionality\n" +
          "- Visual range preview on hover\n\n" +
          "The MonthRangePicker is commonly used for:\n" +
          "- Quarterly report filtering\n" +
          "- Multi-month billing periods\n" +
          "- Campaign duration selection\n" +
          "- Analytics date range filtering\n" +
          "- Subscription period management",
      },
    },
  },
  argTypes: {
    customYears: {
      description: "Custom year array for year selection dropdown",
      table: {
        type: { summary: "Array Object" },
      },
    },
    locale: {
      description:
        "Locale string for month formatting (e.g., 'en-US', 'fr-FR')",
      table: {
        defaultValue: { summary: "en-US" },
        type: { summary: "string" },
      },
    },
    isMandatory: {
      description: "If true, the month range selection is mandatory",
      table: {
        defaultValue: { summary: "false" },
        type: { summary: "boolean" },
      },
    },
    displayFormat: {
      description: "Display format for the selected months",
      options: ["MM/YYYY", "YYYY/MM"],
      control: { type: "radio" },
      table: {
        defaultValue: { summary: "MM/YYYY" },
        type: { summary: "string" },
      },
    },
    focusedInput: {
      description:
        "Which input should be focused initially ('start month' or 'end month')",
      table: {
        defaultValue: { summary: "null" },
        type: { summary: "string" },
      },
    },
    onApply: {
      description:
        "Function called when Apply button is clicked with start and end months",
      table: {
        defaultValue: { summary: "() => {}" },
        type: { summary: "function" },
      },
    },
    startMonth: {
      description: "Start month of the range as a Date object",
      table: {
        defaultValue: { summary: "null" },
        type: { summary: "Date | null" },
      },
    },
    endMonth: {
      description: "End month of the range as a Date object",
      table: {
        defaultValue: { summary: "null" },
        type: { summary: "Date | null" },
      },
    },
    showYearSelect: {
      description:
        "If true, shows year selection dropdown for easier year navigation",
      table: {
        defaultValue: { summary: "false" },
        type: { summary: "boolean" },
      },
    },
    isOutsideRange: {
      description: "Function to determine if a month should be disabled",
      table: {
        defaultValue: { summary: "() => false" },
        type: { summary: "function" },
      },
    },
    disabled: {
      description: "If true, disables the month range picker",
      table: {
        defaultValue: { summary: "false" },
        type: { summary: "boolean" },
      },
    },
    customWidth: {
      description: "Custom width for the month range picker",
      table: {
        defaultValue: { summary: "282px" },
        type: { summary: "string" },
      },
    },
    isError: {
      description: "If true, displays error state styling",
      table: {
        defaultValue: { summary: "false" },
        type: { summary: "boolean" },
      },
    },
    withPortal: {
      description: "If true, renders the calendar dropdown in a portal",
      table: {
        defaultValue: { summary: "false" },
        type: { summary: "boolean" },
      },
    },
    portalContainer: {
      description: "Container element where the portal should be rendered",
      table: {
        defaultValue: { summary: "document.body" },
        type: { summary: "HTMLElement" },
      },
    },
    portalClassName: {
      description: "Additional CSS class to apply to the portal container",
      table: {
        defaultValue: { summary: "" },
        type: { summary: "string" },
      },
    },
    onStartMonthChange: {
      description: "Callback function when start month is changed",
      table: {
        defaultValue: { summary: "null" },
        type: { summary: "function" },
      },
    },
    onEndMonthChange: {
      description: "Callback function when end month is changed",
      table: {
        defaultValue: { summary: "null" },
        type: { summary: "function" },
      },
    },
  },
  args: {
    onApply: fn(),
    isOutsideRange: fn(),
  },
};

// Simple wrapper without complex state management
const SimpleMonthRangePickerWrapper = (args) => {
  return <MonthRangePicker {...args} />;
};

export const Default = {
  render: (args) => <SimpleMonthRangePickerWrapper {...args} />,
  args: {
    locale: "en-US",
    isMandatory: false,
    displayFormat: "MM/YYYY",
    focusedInput: null,
    startMonth: new Date(2024, 0, 1), // January 2024
    endMonth: new Date(2024, 2, 1), // March 2024
    showYearSelect: false, // Start with false to avoid Select component issues
    disabled: false,
    isError: false,
    customWidth: "282px",
  },
  parameters: {
    docs: {
      description: {
        story:
          "Default Month Range Picker allowing users to select a range of months. This example shows a pre-selected range from January to March 2024.",
      },
    },
  },
};

export const WithCustomYears = {
  render: (args) => <SimpleMonthRangePickerWrapper {...args} />,
  args: {
    ...Default.args,
    customYears: [
      { label: "2020", value: "2020" },
      { label: "2021", value: "2021" },
      { label: "2022", value: "2022" },
      { label: "2023", value: "2023" },
      { label: "2024", value: "2024" },
      { label: "2025", value: "2025" },
    ],
    showYearSelect: true,
  },
  parameters: {
    docs: {
      description: {
        story:
          "Month Range Picker with custom year options. You can provide your own array of years to limit the available selections to specific years only.",
      },
    },
  },
};

export const ErrorState = {
  render: (args) => <SimpleMonthRangePickerWrapper {...args} />,
  args: {
    ...Default.args,
    isError: true,
  },
  parameters: {
    docs: {
      description: {
        story:
          "Month Range Picker in error state with error styling applied. This is useful for form validation scenarios.",
      },
    },
  },
};

export const EmptyState = {
  render: (args) => <SimpleMonthRangePickerWrapper {...args} />,
  args: {
    ...Default.args,
    startMonth: null,
    endMonth: null,
  },
  parameters: {
    docs: {
      description: {
        story:
          "Month Range Picker with no pre-selected months, allowing users to start fresh with their selection.",
      },
    },
  },
};
