import PinInput from '@/lib/components/PinInput';
import { commonArgTypes, radiusOptions, scalingOptions, typoSizeOptions } from '@/lib/constants';
import { Meta, StoryObj } from '@storybook/vue3/*';

const meta = {
  title: 'Input Component/PinInput',
  component: PinInput,
  parameters: {
    themes: {
      themeOverride: 'dark'
    },
    docs: {
      description: {
        component: ''
      }
    }
  },
  argTypes: {
    radius: {
      ...commonArgTypes.radius,
      description: 'PinInput 의 둥굴기'
    },
    size: {
      table: {
        category: 'Props',
        type: { summary: ['small', 'medium', 'large'].join(' | ') }
      },
      control: { type: 'select' },
      options: ['small', 'medium', 'large'],
      defaultValue: { summary: 'medium' },
      description: 'PinInput 의 크기'
    },
    scaling: {
      ...commonArgTypes.scaling,
      description: 'PinInput 의 비율'
    },
    color: {
      ...commonArgTypes.color,
      description: 'PinInput 의 색상'
    }
  }
} as Meta;

export default meta;
type Story = StoryObj<typeof meta>;
export const Default = {
  render: (args: {}) => ({
    components: {
      PinInputRoot: PinInput.Root,
      PinInputInput: PinInput.Input
    },
    setup() {
      return { args };
    },
    template: `<div >
    <PinInputRoot
      id="pin-input"
      v-model="value"
      placeholder="○"
      class="flex gap-2 items-center mt-1"
    >
      <PinInputInput
      v-bind="args"
        v-for="(id, index) in 5"
        :key="id"
        :index="index"
        class=""
      />
    </PinInputRoot>
    
    </div>`
  })
};

export const Size = {
  render: (args: {}) => ({
    components: {
      PinInputRoot: PinInput.Root,
      PinInputInput: PinInput.Input
    },
    setup() {
      const sizeOptions = ['small', 'medium', 'large'];
      return { args, sizeOptions };
    },
    template: `<div >
    <template 
      v-for="size in sizeOptions"
      :key="size">

    <PinInputRoot
      id="pin-input"
      v-model="value"
      placeholder="○"
      class="flex gap-2 items-center mt-1"
    >
      <PinInputInput
      v-bind="args"
        v-for="(id, index) in 5"
        :key="id"
        :index="index"
        class=""
        :size="size"
      />
    </PinInputRoot>
    
    </template>
    </div>`
  })
};

export const Radius = {
  render: (args: {}) => ({
    components: {
      PinInputRoot: PinInput.Root,
      PinInputInput: PinInput.Input
    },
    setup() {
      return { args, radiusOptions };
    },
    template: `<div >
    <template 
      v-for="radius in radiusOptions"
      :key="radius">

    <PinInputRoot
      id="pin-input"
      v-model="value"
      placeholder="○"
      class="flex gap-2 items-center mt-1"
    >
      <PinInputInput
      v-bind="args"
        v-for="(id, index) in 5"
        :key="id"
        :index="index"
        class=""
        :radius="radius"
      />
    </PinInputRoot>
    
    </template>
    </div>`
  })
};

export const Scaling = {
  render: (args: {}) => ({
    components: {
      PinInputRoot: PinInput.Root,
      PinInputInput: PinInput.Input
    },
    setup() {
      return { args, scalingOptions };
    },
    template: `<div >
    <template 
      v-for="scaling in scalingOptions"
      :key="scaling">

    <PinInputRoot
      id="pin-input"
      v-model="value"
      placeholder="○"
      class="flex gap-3 items-center mt-1"
    >
      <PinInputInput
      v-bind="args"
        v-for="(id, index) in 5"
        :key="id"
        :index="index"
        class=""
        :scaling="scaling"
      />
    </PinInputRoot>
    
    </template>
    </div>`
  })
};