import type { Meta, StoryObj } from "@storybook/vue3-vite"
import type { QuizBuilderSchema } from "@/stores/quizBuilderStore"
import QuizBuilder, {
  type CustomQuestionListItem,
} from "./QuizBuilder.vue"
import { componentDoc } from "@/lib/storybook"

const warmUpBank = "bank-warmup"
const advancedBank = "bank-advanced"

const seededSchema: QuizBuilderSchema = {
  questionBanks: [
    { id: warmUpBank, name: "Warm-up", description: "Easy ones to get going." },
    { id: advancedBank, name: "Advanced" },
  ],
  questions: [
    {
      id: "q1",
      prompt: "What is 2 + 2?",
      type: "single-choice",
      required: true,
      bankId: warmUpBank,
      options: [
        { id: "q1a", label: "3", value: "3" },
        { id: "q1b", label: "4", value: "4", correct: true, score: 1 },
        { id: "q1c", label: "5", value: "5" },
      ],
    },
    {
      id: "q2",
      prompt: "Pick all primary colors.",
      type: "multiple-choice",
      bankId: warmUpBank,
      options: [
        { id: "q2a", label: "Red", value: "red", correct: true, score: 1 },
        { id: "q2b", label: "Green", value: "green" },
        { id: "q2c", label: "Blue", value: "blue", correct: true, score: 1 },
        { id: "q2d", label: "Yellow", value: "yellow", correct: true, score: 1 },
      ],
    },
    {
      id: "q3",
      prompt: "Define eventual consistency.",
      type: "essay",
      bankId: advancedBank,
      options: [],
    },
  ],
}

const meta = {
  title: "Elements/Builder/QuizBuilder",
  component: QuizBuilder,
  tags: ["autodocs"],
  args: {
    label: "Quiz",
  },
  parameters: {
    layout: "fullscreen",
    ...componentDoc("QuizBuilder", { barrel: "builder" }),
  },
} satisfies Meta<typeof QuizBuilder>

export default meta
type Story = StoryObj<typeof meta>

export const Empty: Story = {
  name: "Empty (default)",
  args: {},
}

export const WithSeededSchema: Story = {
  name: "Pre-populated schema",
  args: {
    modelValue: seededSchema,
    enableQuestionBanks: true,
  },
}

export const Showcase: Story = {
  args: {
    modelValue: seededSchema,
    enableQuestionBanks: true,
  },
}

export const HideQuestionTypes: Story = {
  name: "hideElementTypes",
  args: {
    hideElementTypes: ["essay"],
  },
}

const customList: CustomQuestionListItem[] = [
  {
    type: "question-group",
    label: "Likert",
    questions: [
      {
        type: "single-choice",
        label: "Agreement (5-point)",
        icon: "list-checks",
        config: {
          required: true,
          options: [
            { id: "lk-1", label: "Strongly disagree", value: "1" },
            { id: "lk-2", label: "Disagree", value: "2" },
            { id: "lk-3", label: "Neutral", value: "3" },
            { id: "lk-4", label: "Agree", value: "4" },
            { id: "lk-5", label: "Strongly agree", value: "5" },
          ],
        },
      },
      {
        type: "single-choice",
        label: "Confidence (3-point)",
        icon: "circle-help",
      },
    ],
  },
  {
    type: "single-choice",
    label: "Yes / No",
    icon: "check",
    config: {
      options: [
        { id: "yn-1", label: "Yes", value: "yes" },
        { id: "yn-2", label: "No", value: "no" },
      ],
    },
  },
  {
    type: "essay",
    label: "Open feedback",
    icon: "pencil",
  },
]

export const CustomQuestionList: Story = {
  name: "customElementList",
  args: {
    customElementList: customList,
    openAllSections: true,
  },
}

export const WithQuestionBanks: Story = {
  name: "enableQuestionBanks",
  args: {
    enableQuestionBanks: true,
    modelValue: seededSchema,
  },
}

export const DragToAdd: Story = {
  name: "dragToAdd",
  args: {
    dragToAdd: true,
  },
}

export const FullyConfigured: Story = {
  name: "All features",
  args: {
    enableQuestionBanks: true,
    dragToAdd: true,
    customElementList: customList,
    openAllSections: true,
    modelValue: seededSchema,
  },
}
