import { useTheme } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react-vite';

import TableHeaderDecorator from './components/TableHeaderDecorator';
import { type CommentData } from './types';
import SatisfactionDrawerCommentList from '.';

const mockComments: CommentData[] = [
  {
    id: 1,
    copetin: 'Copetin',
    comment:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
  },
  {
    id: 2,
    copetin: 'Copetin',
    comment:
      'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
  },
  {
    id: 3,
    copetin: 'Copetin',
    comment:
      'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
  },
  {
    id: 4,
    copetin: 'Copetin',
    comment:
      'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
  },
  {
    id: 5,
    copetin: 'Copetin',
    comment:
      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.',
  },
];

const meta: Meta<typeof SatisfactionDrawerCommentList> = {
  title:
    'Composed Components/PeopleExperience/SurveyResults/Satisfaction/SatisfactionDrawerCommentList',
  component: SatisfactionDrawerCommentList,
  tags: ['autodocs'],
  args: {
    headerTitle: 'Comments',
    comments: mockComments,
    loading: false,
  },
  argTypes: {
    headerTitle: {
      description: 'Title displayed in the header',
      control: 'text',
    },
    tableHeaderDecorator: {
      description: 'Optional ReactNode to render between header and table',
      control: false,
    },
    comments: {
      description: 'Array of comment data',
      control: 'object',
    },
    loading: {
      description: 'Loading state',
      control: 'boolean',
    },
    loadingMore: {
      description: 'Loading more state (shows skeleton rows at bottom)',
      control: 'boolean',
    },
    emptyStateTitle: {
      description: 'Title for empty state',
      control: 'text',
    },
    emptyStateDescription: {
      description: 'Description for empty state',
      control: 'text',
    },
  },
};

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {
    headerTitle: 'Comments',
    comments: mockComments,
    loading: false,
  },
};

export const Loading: Story = {
  args: {
    headerTitle: 'Comments',
    comments: [],
    loading: true,
  },
};

export const EmptyComments: Story = {
  args: {
    headerTitle: 'Comments',
    comments: [],
    loading: false,
  },
};

export const LoadingMore: Story = {
  args: {
    headerTitle: 'Comments',
    comments: mockComments,
    loading: false,
    loadingMore: true,
  },
};

export const CustomTitle: Story = {
  args: {
    headerTitle: 'User Feedback',
    comments: mockComments,
    loading: false,
  },
};

export const CustomEmptyState: Story = {
  args: {
    headerTitle: 'Comments',
    comments: [],
    loading: false,
    emptyStateTitle: 'No feedback yet',
    emptyStateDescription: 'Check back later for user comments and feedback',
  },
};

export const WithTableHeaderDecorator: Story = {
  render: () => {
    const theme = useTheme();
    return (
      <SatisfactionDrawerCommentList
        headerTitle="Comments"
        comments={mockComments}
        tableHeaderDecorator={
          <TableHeaderDecorator
            backgroundColor={theme.palette.new.background.feedback.success}
            textColor={theme.palette.new.text.feedback.success}
            title='"Positive"'
            description="44.8% selected • 3,457 comments"
          />
        }
      />
    );
  },
};
