import { Meta, StoryObj } from "@storybook/nextjs-vite";
import { DateTemplate } from "./DateTemplate";
import { fn } from "storybook/test";
import { buildDateDefaults } from "@/lib/admin/builder/state/defaults/date";
import type { DateScreenDefinition } from "@/lib/funnel/types";

// Получаем дефолтные значения из builder
const defaultScreen = buildDateDefaults("date-screen-story") as DateScreenDefinition;

/** DateTemplate - экраны с выбором даты рождения */
const meta: Meta<typeof DateTemplate> = {
  title: "Funnel Templates/DateTemplate",
  component: DateTemplate,
  tags: ["autodocs"],
  parameters: {
    layout: "fullscreen",
  },
  args: {
    screen: defaultScreen,
    selectedDate: {},
    onDateChange: fn(),
    onContinue: fn(),
    canGoBack: true,
    onBack: fn(),
    screenProgress: { current: 4, total: 10 },
    defaultTexts: {
      nextButton: "Next"
    },
  },
  argTypes: {
    screen: {
      control: { type: "object" },
    },
    selectedDate: {
      control: { type: "object" },
    },
    screenProgress: {
      control: { type: "object" },
    },
    onDateChange: { action: "date changed" },
    onContinue: { action: "continue" },
    onBack: { action: "back" },
  },
};

export default meta;
type Story = StoryObj<typeof meta>;

/** Дефолтный экран выбора даты */
export const Default: Story = {};

/** Экран с предзаполненной датой */
export const WithPrefilledDate: Story = {
  args: {
    selectedDate: {
      month: "4",
      day: "8",
      year: "1987",
    },
  },
};

/** Экран без показа выбранной даты */
export const WithoutSelectedDate: Story = {
  args: {
    screen: {
      ...defaultScreen,
      dateInput: {
        ...defaultScreen.dateInput,
        showSelectedDate: false,
      },
    },
  },
};

/** Экран с кастомными лейблами */
export const CustomLabels: Story = {
  args: {
    screen: {
      ...defaultScreen,
      dateInput: {
        ...defaultScreen.dateInput,
        monthLabel: "Month",
        dayLabel: "Day", 
        yearLabel: "Year",
        monthPlaceholder: "MM",
        dayPlaceholder: "DD",
        yearPlaceholder: "YYYY",
        selectedDateLabel: "Selected date:",
        selectedDateFormat: "MMMM d, yyyy",
      },
    },
  },
};

/** Экран без информационного сообщения */
export const WithoutInfoMessage: Story = {
  args: {
    screen: {
      ...defaultScreen,
    },
  },
};

/** Экран с включенным зодиаком */
export const WithZodiac: Story = {
  args: {
    screen: {
      ...defaultScreen,
      dateInput: {
        ...defaultScreen.dateInput,
        zodiac: {
          enabled: true,
          storageKey: "zodiac_sign",
        },
      },
    },
  },
};

/** Экран без header */
export const WithoutHeader: Story = {
  args: {
    screen: {
      ...defaultScreen,
      header: {
        show: false,
      },
    },
  },
};
