import type { Meta, StoryObj } from '@storybook/vue3'
import { ref, Teleport } from 'vue'
import { UModal } from '@/components/UModal/UModal'
import { UInput } from '@/components/UInput/UInput'
import { UAvatarGroup } from '@/components/UAvatar/UAvatarGroup'
import { UButton } from '@/components/UButton/UButton'

const meta: Meta<typeof UModal> = {
  title: 'Example/Modal',
  component: UModal,
  tags: ['autodocs'],
  argTypes: {
    prependIcon: {
      control: 'select',
      options: [null, 'checkCircle', 'save1', 'trash1', 'star6', 'userPlus1'],
    },
    iconColor: {
      control: 'select',
      options: ['primary', 'success', 'warning', 'error'],
    },
    position: {
      control: 'select',
      options: ['left', 'center', 'horizontal'],
    },
    destructive: {
      control: 'boolean',
    },
    dualAction: {
      control: 'boolean',
    },
    checkboxControl: {
      control: 'boolean',
    },
    smallActions: {
      control: 'boolean',
    },
    unclosable: {
      control: 'boolean',
    },
    text: {
      control: 'text',
    },
    supportingText: {
      control: 'text',
    },
    primaryButtonText: {
      control: 'text',
    },
    secondaryButtonText: {
      control: 'text',
    },
    checkboxText: {
      control: 'text',
    },
    isActive: { table: { disable: true } },
  },
}

export default meta

type Story = StoryObj<typeof UModal>

export const Default: Story = (args: any) => ({
  components: { UModal, UButton, Teleport },
  setup() {
    const isModalVisible = ref(false)
    const isChecked = ref(false)

    const openModal = () => {
      isModalVisible.value = true
    }

    // const closeModal = () => {
    //   isModalVisible.value = false
    // }

    const closeHandle = () => {
      console.log('%c[close]', 'background-color: black; color: red;')
      // closeModal()
    }

    const checkboxHandle = () => {
      isChecked.value = !isChecked.value
      isChecked.value
        ? console.log(
            '%c[checkbox is checked 😊]',
            'background-color: black; color: gold;'
          )
        : console.log(
            '%c[checkbox is empty 🥲]',
            'background-color: black; color: pink;'
          )
    }

    const btnClickHandle = (isPrimary) => {
      isPrimary
        ? console.log('%c[confirm]', 'background-color: black; color: lime;')
        : console.log('%c[cancel]', 'background-color: black; color: silver;')
      // closeModal()
    }

    return {
      args,
      isModalVisible,
      openModal,
      // closeModal,
      closeHandle,
      checkboxHandle,
      btnClickHandle,
    }
  },
  template: `
    <div id="main" style="height: 50vh; width: 100%;">
      <div class="text-text-lg font-medium text-gray-700 mb-2">Welcome to modal component</div>
      <div class="text-text-md font-regular text-gray-700 mb-4">
        Click on the button below to see how it works!
      </div>
      <div class="w-fit">
        <UButton type="default" @click="openModal">Open modal</UButton>
      </div>
    </div>
    <Teleport to="#main">
      <UModal
        v-bind="args"
        v-model:isActive="isModalVisible"
        @close="closeHandle"
        @click:primary="closeHandle"
        @action="btnClickHandle"
        @check="checkboxHandle"
      ></UModal>
    </Teleport>
  `,
})

Default.args = {
  destructive: false,
  dualAction: true,
  checkboxControl: false,
  smallActions: false,
  prependIcon: 'checkCircle',
  iconColor: 'success',
  text: 'Blog post published',
  supportingText:
    // eslint-disable-next-line max-len
    'This blog post has been published. Team members will be able to edit this post and republish changes.',
  primaryButtonText: 'Confirm',
  secondaryButtonText: 'Cancel',
}

export const Warning: Story = {
  render: (args: any) => ({
    components: { UModal },
    setup() {
      return { args }
    },
    template:
      // eslint-disable-next-line max-len
      '<div style="height: 50dvh;width: 100%;"><UModal @close="closeHandle()" @click:primary="closeHandle()" @action="btnClickHandle" v-bind="args"></UModal></div>',
    methods: {
      closeHandle() {
        console.log('%c[close]', 'background-color: black; color: red;')
      },
      btnClickHandle(isPrimary: boolean) {
        isPrimary
          ? console.log('%c[confirm]', 'background-color: black; color: lime;')
          : console.log('%c[cancel]', 'background-color: black; color: silver;')
      },
    },
  }),
  args: {
    isActive: true,
    destructive: false,
    dualAction: true,
    prependIcon: 'save1',
    iconColor: 'warning',
    text: 'Unsaved changes',
    supportingText: 'Do you want to save or discard changes?',
    primaryButtonText: 'Save changes',
    secondaryButtonText: 'Discard',
  },
}

export const Destructive: Story = {
  render: (args: any) => ({
    components: { UModal },
    setup() {
      return { args }
    },
    template:
      // eslint-disable-next-line max-len
      '<div style="height: 50dvh;width: 100%;"><UModal @close="closeHandle()" @click:primary="closeHandle()" @action="btnClickHandle" v-bind="args"></UModal></div>',
    methods: {
      closeHandle() {
        console.log('%c[close]', 'background-color: black; color: red;')
      },
      btnClickHandle(isPrimary: boolean) {
        isPrimary
          ? console.log('%c[confirm]', 'background-color: black; color: lime;')
          : console.log('%c[cancel]', 'background-color: black; color: silver;')
      },
    },
  }),
  args: {
    isActive: true,
    destructive: true,
    dualAction: true,
    prependIcon: 'trash1',
    text: 'Delete blog post',
    supportingText:
      'Are you sure you want to delete this post? This action cannot be undone.',
    primaryButtonText: 'Delete',
    secondaryButtonText: 'Cancel',
  },
}

export const Centered: Story = {
  render: (args: any) => ({
    components: { UModal },
    setup() {
      return { args }
    },
    template:
      // eslint-disable-next-line max-len
      '<div style="height: 50dvh;width: 100%;"><UModal @close="closeHandle()" @click:primary="closeHandle()" @action="btnClickHandle" v-bind="args"></UModal></div>',
    methods: {
      closeHandle() {
        console.log('%c[close]', 'background-color: black; color: red;')
      },
      btnClickHandle(isPrimary: boolean) {
        isPrimary
          ? console.log('%c[confirm]', 'background-color: black; color: lime;')
          : console.log('%c[cancel]', 'background-color: black; color: silver;')
      },
    },
  }),
  args: {
    isActive: true,
    destructive: false,
    dualAction: true,
    prependIcon: 'checkCircle',
    iconColor: 'success',
    position: 'center',
    text: 'Blog post published',
    supportingText:
      // eslint-disable-next-line max-len
      'This blog post has been published. Team members will be able to edit this post and republish changes.',
    methods: {
      closeHandle() {
        console.log('%c[close]', 'background-color: black; color: red;')
      },
      btnClickHandle(isPrimary: boolean) {
        isPrimary
          ? console.log('%c[confirm]', 'background-color: black; color: lime;')
          : console.log('%c[cancel]', 'background-color: black; color: silver;')
      },
    },
    primaryButtonText: 'Confirm',
    secondaryButtonText: 'Cancel',
  },
}

export const Horizontal: Story = {
  render: (args: any) => ({
    components: { UModal },
    setup() {
      return { args }
    },
    template:
      // eslint-disable-next-line max-len
      '<div style="height: 50dvh;width: 100%;"><UModal @close="closeHandle()" @click:primary="closeHandle()" @action="btnClickHandle" v-bind="args"></UModal></div>',
    methods: {
      closeHandle() {
        console.log('%c[close]', 'background-color: black; color: red;')
      },
      btnClickHandle(isPrimary: boolean) {
        isPrimary
          ? console.log('%c[confirm]', 'background-color: black; color: lime;')
          : console.log('%c[cancel]', 'background-color: black; color: silver;')
      },
    },
  }),
  args: {
    isActive: true,
    destructive: false,
    dualAction: true,
    prependIcon: 'checkCircle',
    iconColor: 'success',
    position: 'horizontal',
    text: 'Blog post published',
    supportingText:
      // eslint-disable-next-line max-len
      'This blog post has been published. Team members will be able to edit this post and republish changes.',
    primaryButtonText: 'Confirm',
    secondaryButtonText: 'Cancel',
  },
}

export const InputField: Story = {
  render: (args: any) => ({
    components: { UModal, UInput },
    setup() {
      return { args }
    },
    template:
      // eslint-disable-next-line max-len
      '<div style="height: 50dvh;width: 100%;"><UModal @close="closeHandle()" @click:primary="closeHandle()" @action="btnClickHandle" v-bind="args"><UInput size="lg" modelValue="" label="Project name" placeholder= "e.g. Website design"/></UModal></div>',
    methods: {
      closeHandle() {
        console.log('%c[close]', 'background-color: black; color: red;')
      },
      btnClickHandle(isPrimary: boolean) {
        isPrimary
          ? console.log('%c[confirm]', 'background-color: black; color: lime;')
          : console.log('%c[cancel]', 'background-color: black; color: silver;')
      },
    },
  }),
  args: {
    isActive: true,
    destructive: false,
    dualAction: true,
    prependIcon: 'star6',
    iconColor: 'success',
    text: 'Project created',
    supportingText: 'Please enter a name for this project.',
    primaryButtonText: 'Confirm',
    secondaryButtonText: 'Cancel',
  },
}

export const HorizontalCheckbox: Story = {
  render: (args: any) => ({
    components: { UModal },
    setup() {
      return { args }
    },
    template:
      // eslint-disable-next-line max-len
      '<div style="height: 50dvh;width: 100%;"><UModal @close="closeHandle()" @click:primary="closeHandle()" @action="btnClickHandle" v-bind="args"></UModal></div>',
    methods: {
      closeHandle() {
        console.log('%c[close]', 'background-color: black; color: red;')
      },
      btnClickHandle(isPrimary: boolean) {
        isPrimary
          ? console.log('%c[confirm]', 'background-color: black; color: lime;')
          : console.log('%c[cancel]', 'background-color: black; color: silver;')
      },
    },
  }),
  args: {
    isActive: true,
    destructive: false,
    dualAction: true,
    checkboxControl: true,
    smallActions: true,
    prependIcon: 'checkCircle',
    iconColor: 'success',
    position: 'horizontal',
    text: 'Blog post published',
    supportingText:
      // eslint-disable-next-line max-len
      'This blog post has been published. Team members will be able to edit this post and republish changes.',
    primaryButtonText: 'Confirm',
    secondaryButtonText: 'Cancel',
    checkboxText: 'Don’t show again',
  },
}

export const ModalAvatarGroup: Story = {
  render: (args: any) => ({
    components: { UModal, UAvatarGroup },
    setup() {
      return { args }
    },
    template:
      // eslint-disable-next-line max-len
      '<div style="height: 50dvh;width: 100%;"><UModal @close="closeHandle()" @click:primary="closeHandle()" @action="btnClickHandle" v-bind="args"><UAvatarGroup size="sm" variant="default" avatarIcon="helpCircle" avatarNote="CW" profileName="Candice Wu" profileText="candice@untitledui.com" imagePath="https://img.freepik.com/free-psd/3d-illustration-person-with-pink-hair_23-2149436186.jpg?w=1380&t=st=1688729258~exp=1688729858~hmac=c0cd986dd7e8cd9051ab1649fad75839cff82c8eb710e5df9d8118ea89dfcc5c"></UAvatarGroup></UModal></div>',
    methods: {
      closeHandle() {
        console.log('%c[close]', 'background-color: black; color: red;')
      },
      btnClickHandle(isPrimary: boolean) {
        isPrimary
          ? console.log('%c[confirm]', 'background-color: black; color: lime;')
          : console.log('%c[cancel]', 'background-color: black; color: silver;')
      },
    },
  }),
  args: {
    isActive: true,
    destructive: false,
    dualAction: true,
    smallActions: true,
    prependIcon: 'userPlus1',
    iconColor: 'primary',
    position: 'left',
    text: 'Candice has requested edit access',
    supportingText:
      // eslint-disable-next-line max-len
      'One of your team has requested edit access to your project Website Design.',
    primaryButtonText: 'Confirm',
    secondaryButtonText: 'Cancel',
  },
}

export const CenteredPhoto: Story = {
  render: (args: any) => ({
    components: { UModal },
    setup() {
      return { args }
    },
    template:
      // eslint-disable-next-line max-len
      `<div style="height: 50dvh;width: 100%;"><UModal @close="closeHandle()" @click:primary="closeHandle()" @action="btnClickHandle" v-bind="args"><template #header>
      <div style="width: 100%; height: 200px; border-radius: 8px; background-size: cover;
      background-image: url('https://images.pexels.com/photos/34066/pexels-photo.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1')">
      </div>
    </template></UModal></div>`,
    methods: {
      closeHandle() {
        console.log('%c[close]', 'background-color: black; color: red;')
      },
      btnClickHandle(isPrimary: boolean) {
        isPrimary
          ? console.log('%c[confirm]', 'background-color: black; color: lime;')
          : console.log('%c[cancel]', 'background-color: black; color: silver;')
      },
    },
  }),
  args: {
    isActive: true,
    destructive: false,
    dualAction: true,
    unclosable: true,
    position: 'center',
    text: 'Blog post published',
    supportingText:
      // eslint-disable-next-line max-len
      'This blog post has been published. Team members will be able to edit this post.',
    primaryButtonText: 'Confirm',
    secondaryButtonText: 'Cancel',
  },
}