import Select from '@/lib/components/Select';
import { commonArgTypes, radiusOptions } from '@/lib/constants';
import { Icon } from '@iconify/vue';
import type { Meta } from '@storybook/vue3';
import { ref } from 'vue';

const meta = {
  title: 'Select Component/Select',
  component: Select,
  parameters: {
    layout: 'centered',
    themes: {
      themeOverride: 'dark'
    },
    docs: {
      description: {
        component: '제공된 목록에서 하나 이상의 목록을 선택할 수 있는 기능'
      }
    }
  },
  argTypes: {
    scaling: {
      ...commonArgTypes.scaling,
      description: 'Select 크기'
    },
    radius: {
      ...commonArgTypes.radius,
      description: 'Select 둥글기'
    },
    color: {
      ...commonArgTypes.color,
      description: 'Select 색상'
    },
    size: {
      table: {
        category: 'Props',
        type: { summary: ['small', 'medium', 'large'].join(' | ') }
      },
      control: { type: 'select' },
      options: ['small', 'medium', 'large'],
      defaultValue: { summary: 'medium' },
      description: 'Select 크기'
    },
    appearance: {
      table: {
        category: 'Props',
        type: { summary: ['classic', 'soft', 'surface', 'ghost'].join(' | ') }
      },
      control: { type: 'select' },
      defaultValue: { summary: 'surface' },
      description: 'Select 스타일',
      options: ['classic', 'soft', 'surface', 'ghost']
    }
  }
} as Meta;

export default meta;

const selectComponents = {
  SelectRoot: Select.Root,
  SelectTrigger: Select.Trigger,
  SelectContent: Select.Content,
  SelectLabel: Select.Label,
  SelectGroup: Select.Group,
  SelectItem: Select.Item,
  SelectSeparator: Select.Separator,
  Icon
};

export const Default = {
  render: (args: any) => ({
    components: selectComponents,
    setup() {
      const selectedValue = ref(null);
      return { selectedValue, args };
    },
    template: `
    <SelectRoot v-bind='args' v-model="selectedValue">
      <SelectTrigger placeholder="select.." />
      <SelectContent>
        <SelectLabel>Fruits</SelectLabel>
        <SelectGroup>
          <SelectItem value="Apple">Apple</SelectItem>
          <SelectItem value="Banana">Banana</SelectItem>
          <SelectItem value="Cherry">Cherry</SelectItem>
          <SelectSeparator />
          <SelectItem value="Blueberry" disabled>Blueberry</SelectItem>
        </SelectGroup>
      </SelectContent>
    </SelectRoot>`
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <SelectRoot v-bind='args' v-model="selectedValue">
    <SelectTrigger placeholder="select.." />
    <SelectContent>
      <SelectLabel>Fruits</SelectLabel>
      <SelectGroup>
        <SelectItem value="Apple">Apple</SelectItem>
        <SelectItem value="Banana">Banana</SelectItem>
        <SelectItem value="Cherry">Cherry</SelectItem>
        <SelectSeparator />
        <SelectItem value="Blueberry" disabled>Blueberry</SelectItem>
      </SelectGroup>
    </SelectContent>
  </SelectRoot>
</template>
        `
      }
    }
  }
};

export const Size = {
  render: (args: any) => ({
    components: selectComponents,
    setup() {
      const selectedValue = ref(null);
      return { selectedValue, args, sizeOptions: ['small', 'medium', 'large'] };
    },
    template: `
    <div className="flex items-center gap-5">
      <template v-for="size in sizeOptions" :key="size">
        <SelectRoot v-bind='args' v-model="selectedValue" :size="size">
          <SelectTrigger placeholder="select.." />
          <SelectContent>
            <SelectItem value="Apple">Apple</SelectItem>
            <SelectItem value="Banana">Banana</SelectItem>
            <SelectItem value="Cherry">Cherry</SelectItem>
          </SelectContent>
        </SelectRoot>
      </template>
    </div>`
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <SelectRoot v-model="selectedValue" :size="small">
    <SelectTrigger placeholder="select.." />
    <SelectContent>
      <SelectItem value="Apple">Apple</SelectItem>
      <SelectItem value="Banana">Banana</SelectItem>
      <SelectItem value="Cherry">Cherry</SelectItem>
    </SelectContent>
  </SelectRoot>
  <SelectRoot v-model="selectedValue" :size="medium">
    <SelectTrigger placeholder="select.." />
    <SelectContent>
      <SelectItem value="Apple">Apple</SelectItem>
      <SelectItem value="Banana">Banana</SelectItem>
      <SelectItem value="Cherry">Cherry</SelectItem>
    </SelectContent>
  </SelectRoot>
  <SelectRoot v-model="selectedValue" :size="large">
    <SelectTrigger placeholder="select.." />
    <SelectContent>
      <SelectItem value="Apple">Apple</SelectItem>
      <SelectItem value="Banana">Banana</SelectItem>
      <SelectItem value="Cherry">Cherry</SelectItem>
    </SelectContent>
  </SelectRoot>
</template>`
      }
    }
  }
};

export const Radius = {
  render: (args: any) => ({
    components: selectComponents,
    setup() {
      const selectedValue = ref(null);
      return { selectedValue, args, radiusOptions };
    },
    template: `
    <div className="flex items-center gap-5">
      <template v-for="radius in radiusOptions" :key="radius">
        <SelectRoot v-bind='args' v-model="selectedValue" :radius="radius">
          <SelectTrigger placeholder="select.." />
          <SelectContent>
            <SelectItem value="Apple">Apple</SelectItem>
            <SelectItem value="Banana">Banana</SelectItem>
            <SelectItem value="Cherry">Cherry</SelectItem>
          </SelectContent>
        </SelectRoot>
      </template>
    </div>`
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <SelectRoot v-model="selectedValue" :radius="none">
    <SelectTrigger placeholder="select.." />
    <SelectContent>
      <SelectItem value="Apple">Apple</SelectItem>
      <SelectItem value="Banana">Banana</SelectItem>
      <SelectItem value="Cherry">Cherry</SelectItem>
    </SelectContent>
  </SelectRoot>
  <SelectRoot v-model="selectedValue" :radius="small">
    <SelectTrigger placeholder="select.." />
    <SelectContent>
      <SelectItem value="Apple">Apple</SelectItem>
      <SelectItem value="Banana">Banana</SelectItem>
      <SelectItem value="Cherry">Cherry</SelectItem>
    </SelectContent>
    </SelectContent>
  </SelectRoot>
  <SelectRoot v-model="selectedValue" :radius="medium">
    <SelectTrigger placeholder="select.." />
    <SelectContent>
      <SelectItem value="Apple">Apple</SelectItem>
      <SelectItem value="Banana">Banana</SelectItem>
      <SelectItem value="Cherry">Cherry</SelectItem>
    </SelectContent>
  </SelectRoot>
  <SelectRoot v-model="selectedValue" :radius="large">
    <SelectTrigger placeholder="select.." />
    <SelectContent>
      <SelectItem value="Apple">Apple</SelectItem>
      <SelectItem value="Banana">Banana</SelectItem>
      <SelectItem value="Cherry">Cherry</SelectItem>
    </SelectContent>
  </SelectRoot>
  <SelectRoot v-model="selectedValue" :radius="full">
    <SelectTrigger placeholder="select.." />
    <SelectContent>
      <SelectItem value="Apple">Apple</SelectItem>
      <SelectItem value="Banana">Banana</SelectItem>
      <SelectItem value="Cherry">Cherry</SelectItem>
    </SelectContent>
  </SelectRoot>
</template>`
      }
    }
  }
};

export const Appearance = {
  render: (args: any) => ({
    components: selectComponents,
    setup() {
      const selectedValue = ref(null);
      return { selectedValue, args, appearanceOptions: ['classic', 'ghost', 'soft', 'surface'] };
    },
    template: `
    <div className="flex items-center gap-5">
      <template v-for="appearance in appearanceOptions" :key="appearance">
        <SelectRoot v-bind='args' v-model="selectedValue" :appearance="appearance">
          <SelectTrigger placeholder="select.." />
          <SelectContent>
            <SelectItem value="Apple">Apple</SelectItem>
            <SelectItem value="Banana">Banana</SelectItem>
            <SelectItem value="Cherry">Cherry</SelectItem>
          </SelectContent>
        </SelectRoot>
      </template>
    </div>`
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <SelectRoot v-model="selectedValue" :appearance="classic">
    <SelectTrigger placeholder="select.." />
    <SelectContent>
      <SelectItem value="Apple">Apple</SelectItem>
      <SelectItem value="Banana">Banana</SelectItem>
      <SelectItem value="Cherry">Cherry</SelectItem>
    </SelectContent>
  </SelectRoot>
  <SelectRoot v-model="selectedValue" :appearance="ghost">
    <SelectTrigger placeholder="select.." />
    <SelectContent>
      <SelectItem value="Apple">Apple</SelectItem>
      <SelectItem value="Banana">Banana</SelectItem>
      <SelectItem value="Cherry">Cherry</SelectItem>
    </SelectContent>
  </SelectRoot>
  <SelectRoot v-model="selectedValue" :appearance="soft">
    <SelectTrigger placeholder="select.." />
    <SelectContent>
      <SelectItem value="Apple">Apple</SelectItem>
      <SelectItem value="Banana">Banana</SelectItem>
      <SelectItem value="Cherry">Cherry</SelectItem>
    </SelectContent>
  </SelectRoot>
  <SelectRoot v-model="selectedValue" :appearance="surface">
    <SelectTrigger placeholder="select.." />
    <SelectContent>
      <SelectItem value="Apple">Apple</SelectItem>
      <SelectItem value="Banana">Banana</SelectItem>
      <SelectItem value="Cherry">Cherry</SelectItem>
    </SelectContent>
  </SelectRoot>
</template>`
      }
    }
  }
};

export const WithIcon = {
  render: (args: any) => ({
    components: selectComponents,
    setup() {
      const selectedValue = ref(null);
      return { selectedValue, args };
    },
    template: `
      <SelectRoot v-bind='args' v-model="selectedValue">
        <SelectTrigger placeholder="select.." />
        <SelectContent>
          <SelectItem value="light">light<Icon icon="radix-icons:sun" /></SelectItem>
          <SelectItem value="dark">dark<Icon icon="radix-icons:moon" /></SelectItem>
        </SelectContent>
      </SelectRoot>`
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <SelectRoot v-bind='args' v-model="selectedValue">
    <SelectTrigger placeholder="select.." />
    <SelectContent>
      <SelectItem value="light">light<Icon icon="radix-icons:sun" /></SelectItem>
      <SelectItem value="dark">dark<Icon icon="radix-icons:moon" /></SelectItem>
    </SelectContent>
  </SelectRoot>
</template>`
      }
    }
  }
};

export const Group = {
  render: (args: any) => ({
    components: selectComponents,
    setup() {
      const selectedValue = ref(null);
      return { selectedValue, args };
    },
    template: `
    <SelectRoot v-bind='args' v-model="selectedValue" >
      <SelectTrigger placeholder="select.." />
      <SelectContent side="top">
        <SelectLabel>Fruits</SelectLabel>
        <SelectGroup>
          <SelectItem value="apple">apple</SelectItem>
          <SelectItem value="banana">banana</SelectItem>
          <SelectItem value="blueberry">blueberry</SelectItem>
        </SelectGroup>
        <SelectSeparator />
        <SelectLabel>Vegetables</SelectLabel>
        <SelectGroup>
          <SelectItem value="aubergine">aubergine</SelectItem>
          <SelectItem value="broccoli">broccoli</SelectItem>
          <SelectItem value="carrot">carrot</SelectItem>
        </SelectGroup>
      </SelectContent>
    </SelectRoot>`
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <SelectRoot v-model="selectedValue" >
    <SelectTrigger placeholder="select.." />
    <SelectContent side="top">
      <SelectLabel>Fruits</SelectLabel>
      <SelectGroup>
        <SelectItem value="apple">apple</SelectItem>
        <SelectItem value="banana">banana</SelectItem>
        <SelectItem value="blueberry">blueberry</SelectItem>
      </SelectGroup>
      <SelectSeparator />
      <SelectLabel>Vegetables</SelectLabel>
      <SelectGroup>
        <SelectItem value="aubergine">aubergine</SelectItem>
        <SelectItem value="broccoli">broccoli</SelectItem>
        <SelectItem value="carrot">carrot</SelectItem>
      </SelectGroup>
    </SelectContent>
  </SelectRoot>
</template>`
      }
    }
  }
};