import { commonArgTypes } from '@/lib/constants';
import Stepper from '@/lib/components/Stepper';
import type { Meta } from '@storybook/vue3';
import { Icon } from '@iconify/vue';

const meta = {
  title: 'Layout Component/Stepper',
  component: Stepper.Root,
  parameters: {
    layout: 'centered',
    themes: {
      themeOverride: ''
    },
    docs: {
      description: {
        component: '일련의 이벤트나 단계를 시간 순서대로 시각화하는 데 사용됩니다.'
      }
    }
  },
  argTypes: {
    scaling: {
      ...commonArgTypes.scaling,
      description: 'stepper 비율'
    },
    color: {
      ...commonArgTypes.color,
      description: 'stepper 색상',
      defaultValue: { summary: 'red' }
    },
    size: {
      table: {
        category: 'Props',
        type: { summary: ['small', 'medium', 'large'].join(' | ') }
      },
      control: { type: 'select' },
      options: ['small', 'medium', 'large'],
      defaultValue: { summary: 'medium' },
      description: 'stepper 크기'
    }
  }
} as Meta;
export default meta;

const commonComponents = {
  StepperRoot: Stepper.Root,
  StepperItem: Stepper.Item,
  StepperTrigger: Stepper.Trigger,
  StepperIndicator: Stepper.Indicator,
  StepperTitle: Stepper.Title,
  StepperDescription: Stepper.Description,
  StepperSeparator: Stepper.Separator,
  Icon
};

const steps = [
  {
    step: 1,
    title: 'Address',
    description: 'Add your address here',
    icon: 'radix-icons:home'
  },
  {
    step: 2,
    title: 'Shipping',
    description: 'Set your preferred shipping method',
    icon: 'radix-icons:archive'
  },
  {
    step: 3,
    title: 'Checkout',
    description: 'Confirm your order',
    icon: 'radix-icons:check'
  }
];

export const Default = {
  render: (args: any) => ({
    components: commonComponents,
    setup() {
      return { args, steps };
    },
    template: `
    <div class='h-16'>
      <StepperRoot v-bind='args'>
        <StepperItem
          v-for="item in steps"
          :key="item.step"
          :step="item.step"
        >
          <StepperTrigger />
          <StepperSeparator v-if="item.step !== steps[steps.length - 1].step" />
          <div class="absolute text-center top-full left-0 w-full mt-2">
            <StepperTitle>
              {{ item.title }}
            </StepperTitle>
            <StepperDescription>
              {{ item.description }}
            </StepperDescription>
          </div>
        </StepperItem>
      </StepperRoot>
    </div>
  `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <div class='h-16'>
    <StepperRoot v-bind='args'>
      <StepperItem v-for="item in steps" :key="item.step" :step="item.step">
        <StepperTrigger />
        <StepperSeparator v-if="item.step !== steps[steps.length - 1].step" />
        <div class="absolute text-center top-full left-0 w-full mt-2">
          <StepperTitle>{{ item.title }}</StepperTitle>
          <StepperDescription>{{ item.description }}</StepperDescription>
        </div>
      </StepperItem>
    </StepperRoot>
  </div>
</template>
        `
      }
    }
  }
};

export const WithIcon = {
  render: (args: any) => ({
    components: commonComponents,
    setup() {
      return { args, steps };
    },
    template: `
    <div class='h-24'>
      <StepperRoot>
        <StepperItem
          v-for="item in steps"
          :key="item.step"
          :step="item.step"
        >
          <StepperTrigger class='w-10 h-10'>
            <StepperIndicator>
              <Icon
                :icon="item.icon"
                class="w-5 h-5"
              />
            </StepperIndicator>
          </StepperTrigger>

          <StepperSeparator v-if="item.step !== steps[steps.length - 1].step" class='top-5'/>
          <div class="absolute text-center top-full left-0 w-full mt-2">
            <StepperTitle>
              {{ item.title }}
            </StepperTitle>
            <StepperDescription>
              {{ item.description }}
            </StepperDescription>
          </div>
        </StepperItem>
      </StepperRoot>
    </div>
  `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <div class='h-24'>
    <StepperRoot>
      <StepperItem v-for="item in steps" :key="item.step" :step="item.step">
        <StepperTrigger class='w-10 h-10'>
          <StepperIndicator>
            <Icon :icon="item.icon" class="w-5 h-5" />
          </StepperIndicator>
        </StepperTrigger>

        <StepperSeparator v-if="item.step !== steps[steps.length - 1].step" class='top-5'/>
        <div class="absolute text-center top-full left-0 w-full mt-2">
          <StepperTitle>{{ item.title }}</StepperTitle>
          <StepperDescription>{{ item.description }}</StepperDescription>
        </div>
      </StepperItem>
    </StepperRoot>
  </div>
</template>
        `
      }
    }
  }
};

export const Vertical = {
  render: (args: any) => ({
    components: commonComponents,
    setup() {
      return { args, steps };
    },
    template: `
      <StepperRoot orientation="vertical" class='mx-auto flex w-full max-w-md flex-col justify-start gap-10'>
        <StepperItem
          v-for="item in steps"
          :key="item.step"
          :step="item.step"
          class="relative items-start gap-6 justify-start px-0"
        >
          <StepperTrigger />
          <StepperSeparator v-if="item.step !== steps[steps.length - 1].step" class="absolute left-[5px] top-6 block h-[105%] w-0.5 shrink-0 rounded-full" />
          <div class="flex flex-col gap-1">
            <StepperTitle>
              {{ item.title }}
            </StepperTitle>
            <StepperDescription>
              {{ item.description }}
            </StepperDescription>
          </div>
        </StepperItem>
      </StepperRoot>
  `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <StepperRoot orientation="vertical" class='mx-auto flex w-full max-w-md flex-col justify-start gap-10'>
    <StepperItem
      v-for="item in steps"
      :key="item.step"
      :step="item.step"
      class="relative items-start gap-6 justify-start px-0"
    >
      <StepperTrigger />
      <StepperSeparator v-if="item.step !== steps[steps.length - 1].step" class="absolute left-[5px] top-6 block h-[105%] w-0.5 shrink-0 rounded-full" />
      <div class="flex flex-col gap-1">
        <StepperTitle>{{ item.title }}</StepperTitle>
        <StepperDescription>{{ item.description }}</StepperDescription>
      </div>
    </StepperItem>
  </StepperRoot>
</template>
        `
      }
    }
  }
};