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

export default {
  title: "Components/MonthPicker",
  component: MonthPicker,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    docs: {
      description: {
        component:
          "A Month Picker is a UI component that allows users to select a specific month and year from a calendar interface. It's commonly used in scenarios where only month-level precision is needed, such as filtering data by month, setting monthly budgets, or selecting billing periods.\n\n" +
          "Key features:\n" +
          "- Month 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\n" +
          "The MonthPicker is commonly used for:\n" +
          "- Monthly report filtering\n" +
          "- Billing period selection\n" +
          "- Budget planning\n" +
          "- Subscription management\n" +
          "- Monthly data analysis",
      },
    },
  },
  argTypes: {
    customYears: {
      description: `You can pass your own custom year array. In format,
      <code>
          <ul class="storybook-order-list">
            <li><strong>label</strong>: label of the year [string]</li>
            <li><strong>value</strong>: unique value of the year [string]</li>
          </ul>
        </code>`,
      table: {
        defaultValue: {
          summary: `[{
    label: "2019",
    value: "2019",
  },
  {
    label: "2020",
    value: "2020",
  },
  // ... more years
  ]`,
        },
        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 selection is mandatory",
      table: {
        defaultValue: { summary: "false" },
        type: { summary: "boolean" },
      },
    },
    displayFormat: {
      description: "Display format for the selected month",
      options: ["MM/YYYY", "YYYY/MM"],
      control: { type: "radio" },
      table: {
        defaultValue: { summary: "MM/YYYY" },
        type: { summary: "string" },
      },
    },
    focusedInput: {
      description: "Which input should be focused initially",
      table: {
        defaultValue: { summary: "null" },
        type: { summary: "string" },
      },
    },
    onApply: {
      description: "Function called when Apply button is clicked",
      table: {
        defaultValue: { summary: "() => {}" },
        type: { summary: "function" },
      },
    },
    selectedMonth: {
      description: "Currently selected month as a Date object",
      table: {
        defaultValue: { summary: "null" },
        type: { summary: "Date | null" },
      },
    },
    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 picker",
      table: {
        defaultValue: { summary: "false" },
        type: { summary: "boolean" },
      },
    },
    showYearSelect: {
      description: "If true, shows year selection dropdown",
      table: {
        defaultValue: { summary: "false" },
        type: { summary: "boolean" },
      },
    },
    isError: {
      description: "If true, displays error state styling",
      table: {
        defaultValue: { summary: "false" },
        type: { summary: "boolean" },
      },
    },
    customWidth: {
      description: "Custom width for the month picker",
      table: {
        defaultValue: { summary: "282px" },
        type: { summary: "string" },
      },
    },
    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" },
      },
    },
    onMonthChange: {
      description: "Callback function when month is changed",
      table: {
        defaultValue: { summary: "null" },
        type: { summary: "function" },
      },
    },
  },
  args: {
    onApply: fn(),
    isOutsideRange: fn(),
  },
};

const MonthPickerWrapper = (args) => {
  const [selectedMonth, setSelectedMonth] = useState(
    args.selectedMonth || null
  );

  const handleApply = (month) => {
    setSelectedMonth(month);
    args.onApply(month);
  };

  const isOutsideRange = (month) => {
    // Example: Disable future months
    const today = new Date();
    const currentYear = today.getFullYear();
    const currentMonth = today.getMonth();

    // Compare year and month together
    return (
      month.getFullYear() > currentYear ||
      (month.getFullYear() === currentYear && month.getMonth() > currentMonth)
    );
  };

  return (
    <MonthPicker
      {...args}
      selectedMonth={selectedMonth}
      onApply={handleApply}
      isOutsideRange={args.disabled ? isOutsideRange : () => false}
    />
  );
};

export const Default = {
  render: (args) => <MonthPickerWrapper {...args} />,
  args: {
    locale: "en-US",
    isMandatory: false,
    displayFormat: "MM/YYYY",
    focusedInput: null,
    selectedMonth: new Date(),
    disabled: false,
    showYearSelect: true,
    isError: false,
    customWidth: "282px",
  },
  parameters: {
    docs: {
      description: {
        story:
          "Default Month Picker allowing users to select a single month. This example shows the current month pre-selected.",
      },
    },
  },
};

export const WithCustomYears = {
  render: (args) => <MonthPickerWrapper {...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 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) => <MonthPickerWrapper {...args} />,
  args: {
    ...Default.args,
    isError: true,
  },
  parameters: {
    docs: {
      description: {
        story:
          "Month Picker in error state with error styling applied. This is useful for form validation scenarios.",
      },
    },
  },
};

export const Disabled = {
  render: (args) => <MonthPickerWrapper {...args} />,
  args: {
    ...Default.args,
    disabled: true,
  },
  parameters: {
    docs: {
      description: {
        story:
          "Month Picker in disabled state with restricted month selections. Future months are disabled in this example.",
      },
    },
  },
};

export const YearMonthFormat = {
  render: (args) => <MonthPickerWrapper {...args} />,
  args: {
    ...Default.args,
    displayFormat: "YYYY/MM",
  },
  parameters: {
    docs: {
      description: {
        story:
          "Month Picker with YYYY/MM display format instead of the default MM/YYYY format.",
      },
    },
  },
};

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