import React from 'react';

import { type Meta, type StoryObj } from '@storybook/react';

import SurveyResultsLayout from './index';

const meta: Meta<typeof SurveyResultsLayout> = {
  title:
    'Composed Components/PeopleExperience/SurveyResults/SurveyResultsLayout',
  component: SurveyResultsLayout,
  parameters: {
    layout: 'fullscreen',
  },
  tags: ['autodocs'],
  argTypes: {
    title: {
      control: 'text',
      description: 'Title of the survey results page',
    },
    disableFilters: {
      control: 'boolean',
      description: 'Disables the filters if true',
    },
    filtersLabel: {
      control: 'text',
      description: 'Label for the filters button',
    },
    clearFiltersLabel: {
      control: 'text',
      description: 'Label for the clear filters button',
    },
    filtersCount: {
      control: 'number',
      description: 'Number of active filters',
    },
    loading: {
      control: 'boolean',
      description: 'Shows skeleton state when true',
    },
  },
};
export default meta;

type Story = StoryObj<typeof SurveyResultsLayout>;

export const Default: Story = {
  args: {
    title: 'Survey Results',
    children: (
      <div style={{ padding: 32, minHeight: 300, background: '#F7F8FA' }}>
        Your survey results go here.
      </div>
    ),
    filtersLabel: 'Filters',
    clearFiltersLabel: 'Clear Filters',
    filtersCount: 2,
    disableFilters: false,
    onClearFilters: () => alert('Filters cleared!'),
    onClickFilters: () => alert('Open filters dialog!'),
  },
};

export const WithNoFilters: Story = {
  args: {
    ...Default.args,
    disableFilters: true,
    filtersCount: 0,
  },
};

export const CustomLabelsAndCount: Story = {
  args: {
    ...Default.args,
    filtersLabel: 'Advanced Filters',
    clearFiltersLabel: 'Reset',
    filtersCount: 5,
  },
};

export const Loading: Story = {
  args: {
    ...Default.args,
    loading: true,
  },
};
