import { Stack } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react';
import { useState } from 'storybook/internal/preview-api';

import { type Stage } from './components/Stage/type';
import Wizard from '.';

// ============================================
// META CONFIGURATION
// ============================================
const meta: Meta<typeof Wizard> = {
  component: Wizard,
  title: 'Design System/Wizard',
  tags: ['autodocs'],
  argTypes: {},
  args: {},
  parameters: {
    layout: 'padded',
  },
};

const stagesMock: Stage[] = [
  {
    label: 'Stage 1',
    subStages: [
      { label: 'Sub Step 1', component: <div>Sub Step 1</div> },
      { label: 'Sub Step 2', component: <div>Sub Step 2</div> },
      { label: 'Sub Step 3', component: <div>Sub Step 3</div> },
    ],
  },
  {
    label: 'Stage 2',
    subStages: [
      { label: 'Sub Step 2', component: <div>Sub Step 2</div> },
      { label: 'Sub Step 4', component: <div>Sub Step 4</div> },
      { label: 'Sub Step 5', component: <div>Sub Step 5</div> },
      { label: 'Sub Step 6', component: <div>Sub Step 6</div> },
    ],
  },
  {
    label: 'Stage 3',
    subStages: [
      { label: 'Sub Step 7', component: <div>Sub Step 7</div> },
      { label: 'Sub Step 8', component: <div>Sub Step 8</div> },
      { label: 'Sub Step 9', component: <div>Sub Step 9</div> },
    ],
  },
];

export default meta;

export const Default: StoryObj<typeof Wizard> = {
  args: {
    stages: [
      {
        label: 'Stage 1',
        subStages: [
          {
            label: 'Sub Step 1',
          },
          {
            label: 'Sub Step 2',
          },
          {
            label: 'Subbbbbbbbbbbbbb Stepppppppppp 3',
          },
        ],
      },
      {
        label: 'Stage 2',
        subStages: [
          {
            label: 'Sub Step 3',
          },
        ],
      },
    ],
  },
};

export const WithActiveStage: StoryObj<typeof Wizard> = {
  args: {
    activeStage: 1,
    stages: [
      {
        label: 'Stage 1',
        subStages: [
          {
            label: 'Sub Step 1',
          },
        ],
      },
      {
        label: 'Stage 2',
        subStages: [
          {
            label: 'Sub Step 2',
          },
        ],
      },
    ],
  },
};

export const WithActiveSubStage: StoryObj<typeof Wizard> = {
  render: () => {
    const [activeSubStage, setActiveSubStage] = useState(3);
    const [activeStage, setActiveStage] = useState(1);

    const handleStageClick = (stageIndex: number) => {
      setActiveSubStage(stagesMock[stageIndex].subStages.length - 1);
      setActiveStage(stageIndex);
    };

    const handleSubStageClick = (_: number, subStageIndex: number) => {
      setActiveSubStage(subStageIndex);
    };

    return (
      <Stack sx={{ flexDirection: 'row', gap: 5, alignItems: 'center' }}>
        <Wizard
          activeSubStage={activeSubStage}
          activeStage={activeStage}
          stages={stagesMock}
          onStageClick={handleStageClick}
          onSubStageClick={handleSubStageClick}
        />
        {stagesMock[activeStage].subStages[activeSubStage].component}
      </Stack>
    );
  },
};

export const WithErrorStage: StoryObj<typeof Wizard> = {
  args: {
    errorStages: [1],
    errorSubStages: [
      {
        stageIndex: 0,
        subStageIndexes: [0],
      },
    ],
    stages: [
      {
        label: 'Stage 1',
        subStages: [
          {
            label: 'Sub Step 1',
          },
        ],
      },
      {
        label: 'Stage 2',
        subStages: [
          {
            label: 'Sub Step 2',
          },
        ],
      },
    ],
  },
};

export const WithMaxLimits: StoryObj<typeof Wizard> = {
  args: {
    stages: Array.from({ length: 7 }, (_, i) => ({
      label: `Stage ${i + 1}`,
      subStages: Array.from({ length: 10 }, (_, j) => ({
        label: `Sub Step ${j + 1}`,
      })),
    })),
  },
  parameters: {
    docs: {
      description: {
        story:
          'Wizard with 7 stages and 10 sub-stages each. Only 5 stages and 8 sub-stages per stage are rendered (max limits).',
      },
    },
  },
};

export const WithCompletedStages: StoryObj<typeof Wizard> = {
  render: () => {
    const [activeStage, setActiveStage] = useState(0);
    const [activeSubStage, setActiveSubStage] = useState(0);

    const handleStageClick = (stageIndex: number) => {
      setActiveStage(stageIndex);
      setActiveSubStage(stagesMock[stageIndex].subStages.length - 1);
    };

    const handleSubStageClick = (_: number, subStageIndex: number) => {
      setActiveSubStage(subStageIndex);
    };

    return (
      <Stack sx={{ flexDirection: 'row', gap: 5, alignItems: 'center' }}>
        <Wizard
          stages={stagesMock}
          completedStages={[0, 1]}
          activeStage={activeStage}
          activeSubStage={activeSubStage}
          onStageClick={handleStageClick}
          onSubStageClick={handleSubStageClick}
        />
        {stagesMock[activeStage].subStages[activeSubStage].component}
      </Stack>
    );
  },
};