import type { Meta, StoryObj } from '@storybook/vue3-vite';
import { ref } from 'vue';
import { UiIcon } from '@/components/UiIcon';
import UiSidebar from './UiSidebar.vue';
import UiSidebarContent from './UiSidebarContent.vue';
import UiSidebarGroup from './UiSidebarGroup.vue';
import UiSidebarGroupLabel from './UiSidebarGroupLabel.vue';
import UiSidebarGroupContent from './UiSidebarGroupContent.vue';
import UiSidebarHeader from './UiSidebarHeader.vue';
import UiSidebarProvider from './UiSidebarProvider.vue';

const meta: Meta<typeof UiSidebarGroupLabel> = {
  title: 'Patterns/UiSidebar/UiSidebarGroupLabel',
  component: UiSidebarGroupLabel,
  tags: ['autodocs'],
  parameters: {
    layout: 'padded',
    docs: {
      description: {
        component:
          'Section title row for a sidebar group: label typography (muted), optional collapse control, and optional trailing action. Must sit inside `UiSidebarGroup` so collapse toggles `UiSidebarGroupContent`.',
      },
    },
  },
  argTypes: {
    size: {
      control: 'select',
      options: ['sm', 'xs'],
      description:
        'Density hook (`data-size`); title remains label-12 muted styling.',
    },
    collapseIcon: {
      control: false,
      description:
        'Override chevron/icon for collapse (set in code; not editable in Controls).',
    },
    actionIcon: {
      control: false,
      description:
        'Override plus/action icon (set in code; not editable in Controls).',
    },
    collapseTooltip: {
      control: 'text',
      description:
        'Tooltip on the collapse control when non-empty and tooltips are enabled.',
    },
    actionTooltip: {
      control: 'text',
      description: 'Tooltip on the secondary action when non-empty.',
    },
    collapseAriaLabel: {
      control: 'text',
      description: 'Accessible name for the collapse button.',
    },
    actionAriaLabel: {
      control: 'text',
      description: 'Accessible name for the action button.',
    },
    showAction: {
      control: 'boolean',
      description: 'Whether the trailing action button is rendered.',
    },
    showActionOnHover: {
      control: 'boolean',
      description:
        'When true, action (and collapse) use opacity hover/focus reveal.',
    },
    showCollapse: {
      control: 'boolean',
      description: 'Whether the collapse control is rendered.',
    },
  },
  args: {
    size: 'sm',
    collapseTooltip: 'Collapse group',
    actionTooltip: 'Add item',
  },
};

export default meta;

type Story = StoryObj<typeof UiSidebarGroupLabel>;

const renderStory = (args: Story['args']) => ({
  components: {
    UiIcon,
    UiSidebar,
    UiSidebarContent,
    UiSidebarGroup,
    UiSidebarGroupContent,
    UiSidebarHeader,
    UiSidebarProvider,
    UiSidebarGroupLabel,
  },
  setup() {
    const open = ref(true);

    function toggleGroup() {
      open.value = !open.value;
    }

    return { args, open, toggleGroup };
  },
  template: `
    <UiSidebarProvider :default-open="true">
      <div class="max-w-xs bg-background-surface-primary p-4">
        <UiSidebar collapsible="icon">
          <UiSidebarHeader tooltip="Toggle sidebar">Preview</UiSidebarHeader>
          <UiSidebarContent class="p-0">
            <UiSidebarGroup>
              <UiSidebarGroupLabel v-bind="args" @collapse-click="toggleGroup">
                Projects
              </UiSidebarGroupLabel>
              <UiSidebarGroupContent v-if="open">
                <div class="px-2 py-2 text-sm text-content-on-surface-muted">Group content</div>
              </UiSidebarGroupContent>
            </UiSidebarGroup>
          </UiSidebarContent>
        </UiSidebar>
      </div>
    </UiSidebarProvider>
  `,
});

export const Default: Story = {
  render: renderStory,
};

export const ExtraSmall: Story = {
  args: {
    size: 'xs',
  },
  render: renderStory,
};

export const CustomIcons: Story = {
  render: () => ({
    components: {
      UiIcon,
      UiSidebar,
      UiSidebarContent,
      UiSidebarGroup,
      UiSidebarGroupContent,
      UiSidebarHeader,
      UiSidebarProvider,
      UiSidebarGroupLabel,
    },
    setup() {
      const open = ref(true);
      const ChevronRightIcon = {
        components: { UiIcon },
        template: '<UiIcon name="chevron-right" size="s" v-bind="$attrs" />',
      };
      const MoreHorizontalIcon = {
        components: { UiIcon },
        template: '<UiIcon name="more-horizontal" size="s" v-bind="$attrs" />',
      };

      function toggleGroup() {
        open.value = !open.value;
      }

      return { ChevronRightIcon, MoreHorizontalIcon, open, toggleGroup };
    },
    template: `
      <UiSidebarProvider :default-open="true">
        <div class="max-w-xs bg-background-surface-primary p-4">
          <UiSidebar collapsible="icon">
            <UiSidebarHeader tooltip="Toggle sidebar">Preview</UiSidebarHeader>
            <UiSidebarContent class="p-0">
              <UiSidebarGroup>
                <UiSidebarGroupLabel
                  :collapse-icon="ChevronRightIcon"
                  :action-icon="MoreHorizontalIcon"
                  collapse-tooltip="Open group"
                  action-tooltip="More actions"
                  @collapse-click="toggleGroup"
                >
                  Projects
                </UiSidebarGroupLabel>
                <UiSidebarGroupContent v-if="open">
                  <div class="px-2 py-2 text-sm text-content-on-surface-muted">Group content</div>
                </UiSidebarGroupContent>
              </UiSidebarGroup>
            </UiSidebarContent>
          </UiSidebar>
        </div>
      </UiSidebarProvider>
    `,
  }),
};

export const NoAction: Story = {
  args: {
    showAction: false,
  },
  render: renderStory,
};

export const AlwaysShowAction: Story = {
  args: {
    showActionOnHover: false,
  },
  render: renderStory,
};

export const NoTooltips: Story = {
  args: {
    collapseTooltip: '',
    actionTooltip: '',
  },
  render: renderStory,
};
