import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
import { ref } from 'vue'

import CpButtonToggle from '@/components/CpButtonToggle.vue'
import CpSwitch from '@/components/CpSwitch.vue'

import { docCellStyle, docLabelStyle, docRowWrapStyle } from '@/stories/documentationStyles'

const meta = {
  title: 'Atoms/CpButtonToggle',
  component: CpButtonToggle,
  argTypes: {
    isSelected: {
      control: 'boolean',
      description: 'Whether the toggle button is selected.',
    },
    disabled: {
      control: 'boolean',
      description: 'Whether interactions are disabled.',
    },
    label: {
      control: 'text',
      description: 'Text displayed in the button.',
    },
    leadingIcon: {
      control: 'text',
      description: 'Icon displayed in the button.',
    },
  },
} satisfies Meta<typeof CpButtonToggle>

export default meta
type Story = StoryObj<typeof meta>

const defaultRender = (args: Args) => ({
  components: { CpButtonToggle },
  setup() {
    return { args }
  },
  template: `
    <CpButtonToggle v-bind="args"  />
  `,
})

export const Default: Story = {
  args: {
    label: 'Title',
    isSelected: false,
    disabled: false,
    leadingIcon: 'dashed-circle',
  },
  render: defaultRender,
}

export const States: Story = {
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpButtonToggle },
    setup() {
      return { docCellStyle, docLabelStyle, docRowWrapStyle }
    },
    template: `
      <div :style="docRowWrapStyle">
        <div :style="docCellStyle">
          <span :style="docLabelStyle">Default</span>
          <CpButtonToggle label="Title" />
        </div>
        <div :style="docCellStyle">
          <span :style="docLabelStyle">Selected</span>
          <CpButtonToggle label="Title" :is-selected="true" />
        </div>
        <div :style="docCellStyle">
          <span :style="docLabelStyle">Disabled</span>
          <CpButtonToggle label="Title" :disabled="true" />
        </div>
        <div :style="docCellStyle">
          <span :style="docLabelStyle">Disabled selected</span>
          <CpButtonToggle label="Title" :is-selected="true" :disabled="true" />
        </div>
      </div>
    `,
  }),
}

export const withInertSwitch: Story = {
  args: {
    ...Default.args,
    isSelected: undefined,
  },
  render: (args: Args) => ({
    components: { CpButtonToggle, CpSwitch },
    setup() {
      const isSelected = ref(false)
      return { docCellStyle, docLabelStyle, docRowWrapStyle, isSelected, args }
    },
    template: `
      <div :style="docRowWrapStyle">
        <div :style="docCellStyle">
          <span :style="docLabelStyle">Selected</span>
          <CpButtonToggle v-bind="args" :is-selected="isSelected" @click="isSelected = !isSelected">
            <template #leading>
                <CpSwitch v-model="isSelected" inert :disabled="args.disabled" />
            </template>
          </CpButtonToggle>
        </div>
      </div>
    `,
  }),
}

export const CustomLeadingSlot: Story = {
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpButtonToggle },
    template: `
      <div>
        <CpButtonToggle label="Title" :is-selected="true">
          <template #leading>
            <span style="
              width: 16px;
              height: 16px;
              display: inline-flex;
              align-items: center;
              justify-content: center;
              border-radius: 4px;
              background: var(--cp-background-accent-solid);
              color: var(--cp-foreground-white);
              font-size: 11px;
              line-height: 1;
            ">✓</span>
          </template>
        </CpButtonToggle>
      </div>
    `,
  }),
}