import TextArea from '@/lib/components/TextArea';
import { commonArgTypes } from '@/lib/constants';
import { Meta, StoryObj } from '@storybook/vue3/*';
import { ref } from 'vue';

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

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

export const Default = {
  render: (args: any) => ({
    components: {
      TextArea
    },
    setup() {
      return { args };
    },
    template: `
    <TextArea v-bind="args" placeholder="Reply to comment…"/>
    `
  })
};

export const Radius = {
  render: (args: any) => ({
    components: {
      TextArea
    },
    setup() {},
    template: `
    <div class="grid gap-5">
    <TextArea radius="none" placeholder="Reply to comment…"/>
    <TextArea radius="small"  placeholder="Reply to comment…"/>
    <TextArea radius="medium"  placeholder="Reply to comment…"/>
    <TextArea radius="large"  placeholder="Reply to comment…"/>
    <TextArea radius="full"  placeholder="Reply to comment…"/>
    </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
    <div class="grid gap-5">
    <TextArea radius="none" placeholder="Reply to comment…"/>
    <TextArea radius="small"  placeholder="Reply to comment…"/>
    <TextArea radius="medium"  placeholder="Reply to comment…"/>
    <TextArea radius="large"  placeholder="Reply to comment…"/>
    <TextArea radius="full"  placeholder="Reply to comment…"/>
    </div>
      `
      }
    }
  }
};

export const Size = {
  render: (args: any) => ({
    components: {
      TextArea
    },
    setup() {},
    template: `
    <div class="grid gap-5">
    <TextArea size="small" placeholder="Reply to comment…"/>
    <TextArea size="medium" placeholder="Reply to comment…"/>
    <TextArea size="large" placeholder="Reply to comment…"/>
    </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
        <div class="grid gap-5">
    <TextArea size="small" placeholder="Reply to comment…"/>
    <TextArea size="medium" placeholder="Reply to comment…"/>
    <TextArea size="large" placeholder="Reply to comment…"/>
    </div>
        
        `
      }
    }
  }
};

export const Appearance = {
  render: (args: any) => ({
    components: {
      TextArea
    },
    setup() {},
    template: `
    <div class="grid gap-5">
    <TextArea appearance="surface" placeholder="Reply to comment…"/>
    <TextArea appearance="soft" placeholder="Reply to comment…"/>
    <TextArea appearance="classic" placeholder="Reply to comment…"/>
    </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
    <div class="grid gap-5">
    <TextArea appearance="surface" placeholder="Reply to comment…"/>
    <TextArea appearance="soft" placeholder="Reply to comment…"/>
    <TextArea appearance="classic" placeholder="Reply to comment…"/>
    </div>
      `
      }
    }
  }
};

export const Scaling = {
  render: (args: any) => ({
    components: {
      TextArea
    },
    setup() {},
    template: `
    <div class="grid gap-5">
    <TextArea scaling="90%" placeholder="Reply to comment…"/>
    <TextArea scaling="95%" placeholder="Reply to comment…"/>
    <TextArea scaling="100%" placeholder="Reply to comment…"/>
    <TextArea scaling="105%" placeholder="Reply to comment…"/>
    <TextArea scaling="110%" placeholder="Reply to comment…"/>
    </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
    <div class="grid gap-5">
    <TextArea scaling="90%" placeholder="Reply to comment…"/>
    <TextArea scaling="95%" placeholder="Reply to comment…"/>
    <TextArea scaling="100%" placeholder="Reply to comment…"/>
    <TextArea scaling="105%" placeholder="Reply to comment…"/>
    <TextArea scaling="110%" placeholder="Reply to comment…"/>
    </div>
      `
      }
    }
  }
};