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

const meta = {
  title: 'Select Component/ToggleSwitch',
  component: { ToggleSwitch },
  parameters: {
    layout: 'centered',
    themes: {
      themeOverride: 'dark'
    },
    docs: {
      description: {
        component: '선택 상태와 선택 해제 상태를 전환하여 컨트롤하는 요소'
      }
    }
  },
  argTypes: {
    radius: {
      ...commonArgTypes.radius,
      description: 'ToggleSwitch 의 둥굴기'
    },
    size: {
      table: {
        category: 'Props',
        type: { summary: ['small', 'medium', 'large'].join(' | ') }
      },
      control: { type: 'select' },
      options: ['small', 'medium', 'large'],
      defaultValue: { summary: 'medium' },
      description: 'ToggleSwitch 의 크기'
    },
    scaling: {
      ...commonArgTypes.scaling,
      description: 'ToggleSwitch 비율'
    },
    color: {
      ...commonArgTypes.color,
      description: 'ToggleSwitch'
    },
    appearance: {
      table: {
        category: 'Props',
        type: { summary: ['classic', 'soft', 'surface'].join(' | ') }
      },
      control: { type: 'select' },
      defaultValue: { summary: 'surface' },
      description: 'ToggleSwitch 스타일',
      options: ['classic', 'soft', 'surface']
    },
    disabled: {
      description: 'ToggleSwitch disabled 기본 속성',
      defaultValue: { summary: 'false' },
      table: {
        category: 'Props',
        type: { summary: 'boolean' }
      },
      control: { type: 'boolean' }
    },
    label: {
      table: {
        category: 'Props',
        type: { summary: '' }
      },
      control: { type: 'text' },
      defaultValue: { summary: '' },
      description: 'ToggleSwitch Label'
    }
  }
} as Meta;

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

export const Default = {
  render: (args: any) => ({
    components: {
      ToggleSwitch
    },
    setup() {
      return { args };
    },
    template: `
    <div>
      <ToggleSwitch v-bind="args"/>
    </div>
    `
  })
};

export const Size = {
  render: (args: any) => ({
    components: {
      ToggleSwitch
    },
    setup() {
      return { args };
    },
    template: `
  <div class="flex items-center gap-3">
    <ToggleSwitch size="small"></ToggleSwitch>
    <ToggleSwitch size="medium"></ToggleSwitch>
    <ToggleSwitch size="large"></ToggleSwitch>
  </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
        
  <div class="flex items-center gap-3">
    <ToggleSwitch size="small"></ToggleSwitch>
    <ToggleSwitch size="medium"></ToggleSwitch>
    <ToggleSwitch size="large"></ToggleSwitch>
  </div>`
      }
    }
  }
};

export const Appearance = {
  render: (args: any) => ({
    components: {
      ToggleSwitch
    },
    setup() {
      return { args };
    },
    template: `
  <div class="flex items-center gap-3">
    <ToggleSwitch appearance="classic"></ToggleSwitch>
    <ToggleSwitch appearance="soft"></ToggleSwitch>
    <ToggleSwitch appearance="surface"></ToggleSwitch>
  </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
        
  <div class="flex items-center gap-3">
    <ToggleSwitch appearance="classic"></ToggleSwitch>
    <ToggleSwitch appearance="soft"></ToggleSwitch>
    <ToggleSwitch appearance="surface"></ToggleSwitch>
  </div>`
      }
    }
  }
};

export const Radius = {
  render: (args: any) => ({
    components: {
      ToggleSwitch
    },
    setup() {
      return { args, radiusOptions };
    },
    template: `
    <div class="flex items-center gap-5"  >
    <ToggleSwitch radius="none"></ToggleSwitch>
    <ToggleSwitch radius="small"></ToggleSwitch>
    <ToggleSwitch radius="medium"></ToggleSwitch>
    <ToggleSwitch radius="large"></ToggleSwitch>
    <ToggleSwitch radius="full"></ToggleSwitch>
    </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
    <div class="flex items-center gap-5"  >
    <ToggleSwitch radius="none"></ToggleSwitch>
    <ToggleSwitch radius="small"></ToggleSwitch>
    <ToggleSwitch radius="medium"></ToggleSwitch>
    <ToggleSwitch radius="large"></ToggleSwitch>
    <ToggleSwitch radius="full"></ToggleSwitch>
    </div>`
      }
    }
  }
};