import type { Meta, StoryObj } from '@storybook/vue3'
import Sizes from '@/types/sizes'
import { InputRules } from '@/types/inputRules'
import { InputProps } from '@/types/inputProps'
import { ExtractPropTypes } from 'vue'
import { UInput } from '../components'

const meta: Meta<typeof UInput> = {
  title: 'Example/Input',
  component: UInput,
  tags: ['autodocs'],
  argTypes: {
    variant: { table: { disable: true } },
    size: { control: 'select', options: ['sm', 'md'] },
    disabled: { control: 'boolean' },
    type: { control: 'text' },
    autocomplete: { control: 'boolean' },
    name: { control: 'text' },
    tooltipTitle: { control: 'text' },
    tooltipText: { control: 'text' },
    tooltipTheme: {
      control: 'select',
      options: ['light', 'dark'],
    },
    tooltipPosition: {
      control: 'select',
      options: [
        'none top',
        'none bottom',
        'bottom',
        'bottom-start',
        'bottom-end',
        'top',
        'top-start',
        'top-end',
        'left',
        'right',
      ],
    },
    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.',
      ],
    },
    rules: { table: { disable: true } },
    validateOn: {
      control: 'select',
      options: ['blur', 'input', 'change', 'submit'],
    },
    prependIcon: {
      control: 'select',
      options: ['mail1', 'mail2', 'mail3', 'mail4', 'mail5'],
    },
    appendIcon: {
      control: 'select',
      options: [null, 'helpCircle', 'helpHexagon', 'helpOctagon', 'helpSquare'],
    },
  },
}

export default meta

type Story = StoryObj<typeof UInput>

export const Default: Story = {
  render: (args: ExtractPropTypes<InputProps>) => ({
    components: { UInput },
    setup() {
      return { args }
    },
    template:
      // eslint-disable-next-line max-len
      '<UInput v-bind="args" v-model="args.modelValue" @validationError="validationError" @validationSuccess="validationSuccess" @blur="blurHandle" @input="inputHandle" @change="changeHandle" @submit="submitHandle" @click:append="appendClickHandle" @click:prepend="prependClickHandle"></UInput>',
    methods: {
      validationError() {
        args.error = true
      },
      validationSuccess() {
        args.error = false
      },
      blurHandle() {
        console.log('%c[blur]', 'background-color: black; color: gold;')
        console.log(
          '%c[modelValue]',
          'background-color: black; color: lime;',
          this.args.modelValue
        ) //modelValue demo on blur
      },
      inputHandle() {
        console.log('%c[input]', 'background-color: black; color: orange;')
      },
      changeHandle() {
        console.log('%c[change]', 'background-color: black; color: tomato;')
      },
      submitHandle() {
        console.log('%c[submit]', 'background-color: black; color: red;')
      },
      appendClickHandle() {
        console.log(
          '%c[click-append]',
          'background-color: black; color: aquamarine;'
        )
      },
      prependClickHandle() {
        console.log(
          '%c[click-prepend]',
          'background-color: black; color: turquoise;'
        )
      },
    },
  }),
  args: {
    error: false,
    autocomplete: false,
    variant: 'default',
    label: 'Email',
    placeholder: 'olivia@untitledui.com',
    tooltipTitle: 'This is a tooltip',
    tooltipText:
      // eslint-disable-next-line max-len
      'Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand meaning, function or alt-text.',
    tooltipTheme: 'light',
    tooltipPosition: 'top-start',
    hint: 'This is a hint text to help user.',
    size: 'sm' as Sizes,
    rules: InputRules.email,
    errorMessages: [
      'This is an error message #1.',
      'This is an error message #2.',
      'This is an error message #3.',
    ],
    name: 'email',
    modelValue: '',
    appendIcon: null,
  },
}

export const IconLeading: Story = {
  render: (args: ExtractPropTypes<InputProps>) => ({
    components: { UInput },
    setup() {
      return { args }
    },
    template:
      // eslint-disable-next-line max-len
      '<UInput v-bind="args" class="mt-20 ml-5" v-model="args.modelValue" @validationError="validationError" @validationSuccess="validationSuccess" @blur="blurHandle" @input="inputHandle" @change="changeHandle" @submit="submitHandle" @click:append="appendClickHandle" @click:prepend="prependClickHandle"></UInput>',
    methods: {
      validationError() {
        args.error = true
      },
      validationSuccess() {
        args.error = false
      },
      blurHandle() {
        console.log('%c[blur]', 'background-color: black; color: gold;')
        console.log(
          '%c[modelValue]',
          'background-color: black; color: lime;',
          this.args.modelValue
        )
      },
      inputHandle() {
        console.log('%c[input]', 'background-color: black; color: orange;')
      },
      changeHandle() {
        console.log('%c[change]', 'background-color: black; color: tomato;')
      },
      submitHandle() {
        console.log('%c[submit]', 'background-color: black; color: red;')
      },
      appendClickHandle() {
        console.log(
          '%c[click-append]',
          'background-color: black; color: aquamarine;'
        )
      },
      prependClickHandle() {
        console.log(
          '%c[click-prepend]',
          'background-color: black; color: turquoise;'
        )
      },
    },
  }),
  args: {
    error: false,
    variant: 'iconLeading',
    label: 'Email',
    placeholder: 'olivia@untitledui.com',
    tooltipTitle: 'This is a tooltip',
    tooltipText:
      // eslint-disable-next-line max-len
      'Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand meaning, function or alt-text.',
    tooltipTheme: 'light',
    tooltipPosition: 'top-start',
    hint: 'This is a hint text to help user.',
    size: 'sm' as Sizes,
    rules: InputRules.email,
    errorMessages: ['This is an error message #1.'],
    name: 'email',
    appendIcon: 'helpCircle',
    prependIcon: 'mail1',
    modelValue: '',
  },
}