import type { Meta, StoryObj } from '@storybook/vue3'
import { UDropdown } from '../components'
import { ExtractPropTypes, watch } from 'vue'

const meta: Meta<typeof UDropdown> = {
  title: 'Example/Dropdown',
  component: UDropdown,
  tags: ['autodocs'],
  argTypes: {
    variant: { table: { disable: true } },
    type: {
      control: 'select',
      options: ['-', 'header'],
    },
    size: {
      control: 'select',
      options: ['sm', 'md'],
    },
    emptyMessage: {
      control: 'text',
    },
    disabled: { control: 'boolean' },
    dropDownItems: { control: 'object' },
    error: { control: 'boolean' },
    errorMessages: {
      control: 'multi-select',
      options: [
        'This is an error message #1.',
        'This is an error message #2.',
        'This is an error message #3.',
        'This is an error message #4.',
      ],
    },
    prependIcon: {
      control: 'select',
      options: [null, 'user1', 'user-02', 'user-03', 'phone', 'mail5'],
    },
    appendIcon: {
      control: 'select',
      options: [null, 'chevron-down'],
    },
  },
}

export default meta

type Story = StoryObj<typeof UDropdown>

export const Default: Story = {
  render: (args: any) => ({
    components: { UDropdown },
    setup() {
      watch(
        () => args.modelValue,
        (currentValue: any) => {
          if (currentValue != undefined) {
            console.log(
              '%c[modelValue]',
              'background-color: black; color: lime;',
              currentValue
            )
          } else {
            console.log(
              '%c[modelValue]',
              'background-color: black; color: red;',
              currentValue
            )
          }
        }
      )
      return { args }
    },
    template:
      // eslint-disable-next-line max-len
      '<div class="h-[400px] mt-20 ml-5"><UDropdown v-bind="args" v-model="args.modelValue"></UDropdown></div>',
  }),
  args: {
    error: false,
    variant: 'default',
    label: 'Team member',
    placeholder: 'Select team member',
    hint: 'This is a hint text to help user.',
    errorMessages: ['This is an error message #1.'],
    appendIcon: 'chevron-down',
    dropDownItems: [
      {
        id: 'ID-1',
        image: 'https://www.coregames.com/api/profilepictures/1',
        text: 'Phoenix Baker',
        supportingText: '@phoenix',
      },
      {
        id: 'ID-2',
        image: '',
        text: 'Olivia Rhye',
        supportingText: '@olivia',
      },
      {
        id: 'ID-3',
        image: 'https://avatarfiles.alphacoders.com/123/123713.jpg',
        text: 'Lana Steiner',
        supportingText: '@lana',
      },
      {
        id: 'ID-4',
        image: 'https://www.coregames.com/api/profilepictures/1',
        text: 'Demi Wilkinson',
        supportingText: '@demi',
      },
      {
        id: 'ID-5',
        image: 'https://avatarfiles.alphacoders.com/158/158538.jpg',
        text: 'Candice Wu',
        supportingText: '@candice',
      },
      {
        id: 'ID-6',
        image: '',
        text: '',
        supportingText: '',
      },
      {
        id: 'ID-137',
        image: 'https://www.coregames.com/api/profilepictures/1',
        text: 'Drew Cano',
        supportingText: '@drew',
      },
      {
        id: 'ID-80',
        image: 'https://avatarfiles.alphacoders.com/158/158538.jpg',
        text: 'Jane Smith',
      },
    ],
  },
}

export const IconLeading: Story = {
  render: (args: any) => ({
    components: { UDropdown },
    setup() {
      watch(
        () => args.modelValue,
        (currentValue: any) => {
          if (currentValue != undefined) {
            console.log(
              '%c[modelValue]',
              'background-color: black; color: lime;',
              currentValue
            )
          } else {
            console.log(
              '%c[modelValue]',
              'background-color: black; color: red;',
              currentValue
            )
          }
        }
      )
      return { args }
    },
    template:
      // eslint-disable-next-line max-len
      '<div class="h-[400px] mt-20 ml-5"><UDropdown v-bind="args" v-model="args.modelValue"></UDropdown></div>',
  }),
  args: {
    error: false,
    variant: 'default',
    label: 'Team member',
    placeholder: 'Select team member',
    hint: 'This is a hint text to help user.',
    errorMessages: ['This is an error message #1.'],
    appendIcon: 'chevron-down',
    prependIcon: 'user-01',
    dropDownItems: [
      {
        image: 'https://www.coregames.com/api/profilepictures/1',
        text: 'Phoenix Baker',
        supportingText: '@phoenix',
      },
      {
        image: '',
        text: 'Olivia Rhye',
        supportingText: '@olivia',
      },
      {
        image: 'https://avatarfiles.alphacoders.com/123/123713.jpg',
        text: 'Lana Steiner',
        supportingText: '@lana',
      },
      {
        image: 'https://www.coregames.com/api/profilepictures/1',
        text: 'Demi Wilkinson',
        supportingText: '@demi',
      },
      {
        image: 'https://avatarfiles.alphacoders.com/158/158538.jpg',
        text: 'Candice Wu',
        supportingText: '@candice',
      },
      {
        image: 'https://avatarfiles.alphacoders.com/123/123713.jpg',
        text: 'Natali Craig',
        supportingText: '@natali',
      },
      {
        image: 'https://www.coregames.com/api/profilepictures/1',
        text: 'Drew Cano',
        supportingText: '@drew',
      },
      {
        image: 'https://avatarfiles.alphacoders.com/158/158538.jpg',
        text: 'Jane Smith',
        supportingText: 'janesmith',
      },
    ],
  },
}

export const AvatarLeading: Story = {
  render: (args: any) => ({
    components: { UDropdown },
    setup() {
      watch(
        () => args.modelValue,
        (currentValue: any) => {
          if (currentValue != undefined) {
            console.log(
              '%c[modelValue]',
              'background-color: black; color: lime;',
              currentValue
            )
          } else {
            console.log(
              '%c[modelValue]',
              'background-color: black; color: red;',
              currentValue
            )
          }
        }
      )
      return { args }
    },
    template:
      // eslint-disable-next-line max-len
      '<div class="h-[400px] mt-20 ml-5"><UDropdown v-bind="args" v-model="args.modelValue"></UDropdown></div>',
  }),
  args: {
    error: false,
    variant: 'avatarLeading',
    label: 'Team member',
    placeholder: 'Select team member',
    hint: 'This is a hint text to help user.',
    errorMessages: ['This is an error message #1.'],
    appendIcon: 'chevron-down',
    prependIcon: 'user-01',
    dropDownItems: [
      {
        image: 'https://www.coregames.com/api/profilepictures/1',
        text: 'Phoenix Baker',
        supportingText: '@phoenix',
      },
      {
        image: '',
        text: 'Olivia Rhye',
        supportingText: '@olivia',
      },
      {
        image: 'https://avatarfiles.alphacoders.com/123/123713.jpg',
        text: 'Lana Steiner',
        supportingText: '@lana',
      },
      {
        image: 'https://www.coregames.com/api/profilepictures/1',
        text: 'Demi Wilkinson',
        supportingText: '@demi',
      },
      {
        image: 'https://avatarfiles.alphacoders.com/158/158538.jpg',
        text: 'Candice Wu',
        supportingText: '@candice',
      },
      {
        image: 'https://avatarfiles.alphacoders.com/123/123713.jpg',
        text: 'Natali Craig',
        supportingText: '@natali',
      },
      {
        image: 'https://www.coregames.com/api/profilepictures/1',
        text: 'Drew Cano',
        supportingText: '@drew',
      },
      {
        image: 'https://avatarfiles.alphacoders.com/158/158538.jpg',
        text: 'Jane Smith',
        supportingText: 'janesmith',
      },
    ],
  },
}

export const DotLeading: Story = {
  render: (args: any) => ({
    components: { UDropdown },
    setup() {
      watch(
        () => args.modelValue,
        (currentValue: any) => {
          if (currentValue != undefined) {
            console.log(
              '%c[modelValue]',
              'background-color: black; color: lime;',
              currentValue
            )
          } else {
            console.log(
              '%c[modelValue]',
              'background-color: black; color: red;',
              currentValue
            )
          }
        }
      )
      return { args }
    },
    template:
      // eslint-disable-next-line max-len
      '<div class="h-[400px] mt-20 ml-5"><UDropdown v-bind="args" v-model="args.modelValue"></UDropdown></div>',
  }),
  args: {
    error: false,
    variant: 'dotLeading',
    label: 'Team member',
    placeholder: 'Select team member',
    hint: 'This is a hint text to help user.',
    errorMessages: ['This is an error message #1.'],
    appendIcon: 'chevron-down',
    prependIcon: 'user-01',
    dropDownItems: [
      {
        image: 'https://www.coregames.com/api/profilepictures/1',
        text: 'Phoenix Baker',
        supportingText: '@phoenix',
      },
      {
        image: '',
        text: 'Olivia Rhye',
        supportingText: '@olivia',
      },
      {
        image: 'https://avatarfiles.alphacoders.com/123/123713.jpg',
        text: 'Lana Steiner',
        supportingText: '@lana',
      },
      {
        image: 'https://www.coregames.com/api/profilepictures/1',
        text: 'Demi Wilkinson',
        supportingText: '@demi',
      },
      {
        image: 'https://avatarfiles.alphacoders.com/158/158538.jpg',
        text: 'Candice Wu',
        supportingText: '@candice',
      },
      {
        image: 'https://avatarfiles.alphacoders.com/123/123713.jpg',
        text: 'Natali Craig',
        supportingText: '@natali',
      },
      {
        image: 'https://www.coregames.com/api/profilepictures/1',
        text: 'Drew Cano',
        supportingText: '@drew',
      },
      {
        image: 'https://avatarfiles.alphacoders.com/158/158538.jpg',
        text: 'Jane Smith',
        supportingText: 'janesmith',
      },
    ],
  },
}

export const Search: Story = {
  render: (args: any) => ({
    components: { UDropdown },
    setup() {
      watch(
        () => args.modelValue,
        (currentValue: any) => {
          if (currentValue != undefined) {
            console.log(
              '%c[modelValue]',
              'background-color: black; color: lime;',
              currentValue
            )
          } else {
            console.log(
              '%c[modelValue]',
              'background-color: black; color: red;',
              currentValue
            )
          }
        }
      )
      return { args }
    },
    template:
      // eslint-disable-next-line max-len
      '<div class="h-[400px] w-[300px] mt-20 ml-5"><UDropdown @blur="blurHandle" v-bind="args" v-model="args.modelValue"></UDropdown></div>',
    methods: {
      blurHandle() {
        console.log('%c[blur]', 'background-color: black; color: gold;')
        console.log(
          '%c[modelValue]',
          'background-color: black; color: lime;',
          this.args.modelValue
        )
      },
    },
  }),
  args: {
    error: false,
    variant: 'search',
    label: 'Search',
    placeholder: 'Search',
    hint: 'Click backspace to clear search field',
    errorMessages: ['This is an error message #1.'],
    appendIcon: 'null',
    prependIcon: 'search-lg',
    dropDownItems: [
      {
        image: 'https://www.coregames.com/api/profilepictures/1',
        text: 'Phoenix Baker',
        supportingText: '@phoenix',
      },
      {
        image: '',
        text: 'Hampton by Hilton Nizhny Novgorod',
        supportingText: 'ID-542',
      },
      {
        image: 'https://avatarfiles.alphacoders.com/123/123713.jpg',
        text: 'Lana Steiner',
        supportingText: '@lana',
      },
      {
        image: 'https://www.coregames.com/api/profilepictures/1',
        text: 'Demi Wilkinson',
        supportingText: '@demi',
      },
      {
        image: 'https://avatarfiles.alphacoders.com/158/158538.jpg',
        text: 'Candice Wu',
        supportingText: '@candice',
      },
      {
        image: 'https://avatarfiles.alphacoders.com/123/123713.jpg',
        text: 'Natali Craig',
        supportingText: '@natali',
      },
      {
        image: 'https://www.coregames.com/api/profilepictures/1',
        text: 'Drew Cano',
        supportingText: '@drew',
      },
      {
        image: 'https://avatarfiles.alphacoders.com/158/158538.jpg',
        text: 'Jane Smith',
        supportingText: 'janesmith',
      },
    ],
  },
}

export const Tags: Story = {
  render: (args: any) => ({
    components: { UDropdown },
    setup() {
      watch(
        () => args.modelValue,
        (currentValue: any) => {
          if (currentValue != undefined) {
            console.log(
              '%c[modelValue]',
              'background-color: black; color: lime;',
              currentValue
            )
          } else {
            console.log(
              '%c[modelValue]',
              'background-color: black; color: red;',
              currentValue
            )
          }
        }
      )
      return { args }
    },
    template:
      // eslint-disable-next-line max-len
      '<div class="h-[400px] mt-20 ml-5"><UDropdown v-bind="args" v-model="args.modelValue"></UDropdown></div>',
  }),
  args: {
    error: false,
    variant: 'tags',
    label: 'Search',
    placeholder: 'Search',
    hint: 'Click backspace to clear search field',
    errorMessages: ['This is an error message #1.'],
    appendIcon: 'null',
    prependIcon: 'search-lg',
    dropDownItems: [
      {
        image: 'https://www.coregames.com/api/profilepictures/1',
        text: 'Phoenix Baker',
        supportingText: '@phoenix',
      },
      {
        image: '',
        text: 'Olivia Rhye',
        supportingText: '@olivia',
      },
      {
        image: 'https://avatarfiles.alphacoders.com/123/123713.jpg',
        text: 'Lana Steiner',
        supportingText: '@lana',
      },
      {
        image: 'https://www.coregames.com/api/profilepictures/1',
        text: 'Demi Wilkinson',
        supportingText: '@demi',
      },
      {
        image: 'https://avatarfiles.alphacoders.com/158/158538.jpg',
        text: 'Candice Wu',
        supportingText: '@candice',
      },
      {
        image: 'https://avatarfiles.alphacoders.com/123/123713.jpg',
        text: 'Natali Craig',
        supportingText: '@natali',
      },
      {
        image: 'https://www.coregames.com/api/profilepictures/1',
        text: 'Drew Cano',
        supportingText: '@drew',
      },
      {
        image: 'https://avatarfiles.alphacoders.com/158/158538.jpg',
        text: 'Jane Smith',
      },
    ],
  },
}