import Button from '@/lib/components/Button';
import {
  appearanceOptions,
  commonArgTypes,
  radiusOptions,
  scalingOptions,
  sizeOptions,
  weightOptions
} from '@/lib/constants';
import type { Meta } from '@storybook/vue3';

const meta = {
  title: 'Basic Component/Button',
  component: Button,
  parameters: {
    layout: 'centered',
    themes: {
      themeOverride: 'dark'
    },
    docs: {
      description: {
        component: '어떤 기능이나 동작을 실행하거나 기능을 사용하기 위한 상태로 변경하는 요소'
      }
    }
  },
  argTypes: {
    radius: {
      ...commonArgTypes.radius,
      description: '버튼 둥글기'
    },
    scaling: {
      ...commonArgTypes.scaling,
      description: '버튼 비율'
    },
    size: {
      ...commonArgTypes.size,
      description: '버튼 크기'
    },
    weight: {
      ...commonArgTypes.weight,
      description: '버튼 폰트 두께'
    },
    onClick: {
      table: {
        category: 'EVENT HANDLER'
      }
    },
    color: {
      ...commonArgTypes.color,
      description: 'Button 메인 색'
    },
    appearance: {
      ...commonArgTypes.appearance,
      description: 'Button 스타일',
      options: appearanceOptions
    },
    disabled: {
      description: '버튼 disabled 기본 속성',
      defaultValue: { summary: 'false' },
      table: {
        category: 'Props',
        type: { summary: 'boolean' }
      },
      control: { type: 'boolean' }
    }
  },
  args: {
    // onClick: fn()
  }
} as Meta;

export default meta;

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

export const Radius = {
  render: (args: any) => ({
    components: {
      Button
    },
    setup() {
      return { args, radiusOptions };
    },
    template: `
    <div 
      class="flex items-center gap-5">
    <template
      v-for="radius in radiusOptions"
      :key="radius"
    >
      <Button :radius='radius'>button</Button>
    </template>`
  }),
  parameters: {
    docs: {
      source: {
        code: `
        <div class="grid">
          <Header radius="none">Header Component</Header>
          <Header radius="small">Header Component</Header>
          <Header radius="medium">Header Component</Header>
          <Header radius="large">Header Component</Header>
          <Header radius="full">Header Component</Header>
        </div>
        `
      }
    }
  }
};

export const Scaling = {
  render: (args: any) => ({
    components: {
      Button
    },
    setup() {
      return { args, scalingOptions };
    },
    template: `
    <div 
      class="flex items-center gap-5">
    <template
      v-for="scaling in scalingOptions"
      :key="scaling"
    >
      <Button :scaling='scaling'>button</Button>
    </template>`
  }),
  parameters: {
    docs: {
      source: {
        code: `
        <div class="grid">
      <Button scaling='90%'>button</Button>
      <Button scaling='95%'>button</Button>
      <Button scaling='100%'>button</Button>
      <Button scaling='105%'>button</Button>
      <Button scaling='110%'>button</Button>
        </div>
        `
      }
    }
  }
};

export const Weight = {
  render: (args: any) => ({
    components: {
      Button
    },
    setup() {
      return { args, weightOptions };
    },
    template: `
    <div 
      class="flex items-center gap-5">
    <template
      v-for="weight in weightOptions"
      :key="weight"
    >
      <Button :weight='weight'>button</Button>
    </template></div>`
  }),
  parameters: {
    docs: {
      source: {
        code: `
        <div class="grid">
        <Button weight='regular'>button</Button>
        <Button weight='medium'>button</Button>
        <Button weight='semibold'>button</Button>
        <Button weight='bold'>button</Button>
        </div>
        `
      }
    }
  }
};

export const Size = {
  render: (args: any) => ({
    components: {
      Button
    },
    setup() {
      return { args, sizeOptions };
    },
    template: `
    <div 
      class="flex items-center gap-5">
    <template
      v-for="size in sizeOptions"
      :key="size"
    >
      <Button :size='size'>button</Button>
    </template></div>`
  }),
  parameters: {
    docs: {
      source: {
        code: `
        <div class="grid">
          <Button size='x-small'>button</Button>
          <Button size='small'>button</Button>
          <Button size='medium'>button</Button>
          <Button size='large'>button</Button>
          <Button size='x-large'>button</Button>
        </div>
        `
      }
    }
  }
};

export const Appearance = {
  render: (args: any) => ({
    components: {
      Button
    },
    setup() {
      return { args, appearanceOptions };
    },
    template: `  
    <div 
      class="flex items-center gap-5">
    <template
      v-for="appearance in appearanceOptions"
      :key="appearance"
    >
      <Button :appearance='appearance' >button</Button>
    </template></div>`
  }),
  parameters: {
    docs: {
      source: {
        code: `
      <div class="grid">
      <Button appearance='classic' >button</Button>
      <Button appearance='ghost' >button</Button>
      <Button appearance='outline' >button</Button>
      <Button appearance='soft' >button</Button>
      <Button appearance='solid' >button</Button>
      <Button appearance='surface' >button</Button>
    </div>
        `
      }
    }
  }
};