import { Meta, StoryObj } from "@storybook/nextjs-vite";
import { FormTemplate } from "./FormTemplate";
import { fn } from "storybook/test";
import { buildFormDefaults } from "@/lib/admin/builder/state/defaults/form";
import type { FormScreenDefinition } from "@/lib/funnel/types";

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

// Создаем более богатую форму для демонстрации
const richFormScreen: FormScreenDefinition = {
  ...defaultScreen,
  title: {
    ...defaultScreen.title,
    text: "Расскажите о себе",
  },
  subtitle: {
    ...defaultScreen.subtitle,
    text: "Заполните форму для персонализированного анализа",
  },
  fields: [
    {
      id: "name",
      label: "Полное имя",
      placeholder: "Введите ваше имя",
      type: "text",
      required: true,
    },
    {
      id: "email",
      label: "Email адрес",
      placeholder: "example@email.com",
      type: "email",
      required: true,
    },
    {
      id: "phone",
      label: "Телефон",
      placeholder: "+7 (999) 123-45-67",
      type: "tel",
      required: false,
    },
  ],
};

/** FormTemplate - экраны с формами ввода */
const meta: Meta<typeof FormTemplate> = {
  title: "Funnel Templates/FormTemplate",
  component: FormTemplate,
  tags: ["autodocs"],
  parameters: {
    layout: "fullscreen",
  },
  args: {
    screen: richFormScreen,
    formData: {},
    onFormDataChange: fn(),
    onContinue: fn(),
    canGoBack: true,
    onBack: fn(),
    screenProgress: { current: 6, total: 10 },
    defaultTexts: {
      nextButton: "Next",
      
    },
  },
  argTypes: {
    screen: {
      control: { type: "object" },
    },
    formData: {
      control: { type: "object" },
    },
    screenProgress: {
      control: { type: "object" },
    },
    onFormDataChange: { action: "form data changed" },
    onContinue: { action: "continue" },
    onBack: { action: "back" },
  },
};

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

/** Дефолтная форма */
export const Default: Story = {};

/** Простая форма с одним полем */
export const SimpleForm: Story = {
  args: {
    screen: defaultScreen, // Используем базовые дефолты
  },
};

/** Форма только с обязательными полями */
export const RequiredFieldsOnly: Story = {
  args: {
    screen: {
      ...richFormScreen,
      fields: richFormScreen.fields.filter(field => field.required),
    },
  },
};

/** Форма с кастомными сообщениями валидации */
export const CustomValidation: Story = {
  args: {
    screen: {
      ...richFormScreen,
      validationMessages: {
        required: "Пожалуйста, заполните это поле",  
      },
    },
  },
};

/** Форма без header */
export const WithoutHeader: Story = {
  args: {
    screen: {
      ...richFormScreen,
      header: {
        show: false,
      },
    },
  },
};

/** Форма без subtitle */
export const WithoutSubtitle: Story = {
  args: {
    screen: {
      ...richFormScreen,
      subtitle: undefined, // Просто удаляем subtitle
    },
  },
};
