import { useState } from 'react';

import { Box, Typography } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react-vite';
import { IconEdit, IconTrash } from '@tabler/icons-react';

import SortableList from '../SortableList';

import { type BaseQuestionType } from './types';
import QuestionListItem from '.';

const snakeCaseToSentence = (snakeCaseString: string) => {
  let sentence = snakeCaseString.replace(/_/g, ' ');
  if (sentence.length > 0) {
    sentence = sentence.charAt(0).toUpperCase() + sentence.slice(1);
  }

  return sentence;
};

const meta: Meta<typeof QuestionListItem<Question>> = {
  title: 'Composed Components/QuestionListItem',
  component: QuestionListItem,
  tags: ['autodocs'],
  args: {
    getTypeDescription: (question: Question) => {
      return `Type: ${snakeCaseToSentence(question.type)}`;
    },
  },
};

export default meta;

type Question = BaseQuestionType & {
  type: string;
  required: boolean;
  statement: string;
  allowComments: boolean;
  category: string;
};

const baseQuestions: Question[] = [
  {
    id: 1,
    type: 'multiple_choice',
    required: true,
    statement: '¿Cuál es la capital de Francia?',
    allowComments: true,
    category: 'Geografía',
  },
  {
    id: 2,
    type: 'short_answer',
    required: false,
    statement: 'Describe tu experiencia con TypeScript.',
    allowComments: false,
    category: 'Programación',
  },
  {
    id: 3,
    type: 'boolean',
    required: true,
    statement: '¿Te gusta el café?',
    allowComments: true,
    category: 'Estilo de vida',
  },
];

// Helper to generate actions for each question
const getActions = (question: BaseQuestionType) => [
  {
    name: 'Editar',
    onClick: () => alert(`Editar pregunta: ${question.statement}`),
    icon: <IconEdit size={18} />,
  },
  {
    name: 'Eliminar',
    onClick: () => alert(`Eliminar pregunta: ${question.statement}`),
    icon: <IconTrash size={18} />,
  },
];

// Story: Single QuestionListItem
export const Default: StoryObj<typeof QuestionListItem<BaseQuestionType>> = {
  args: {
    item: baseQuestions[0],
    actions: getActions(baseQuestions[0]),
  },
};

// Story: QuestionListItem with pill label and custom pill props
export const WithPillLabel: StoryObj<
  typeof QuestionListItem<BaseQuestionType>
> = {
  args: {
    item: baseQuestions[1],
    actions: getActions(baseQuestions[1]),
    pillLabel: 'Obligatoria',
    slotProps: {
      pill: {
        type: 'info',
        variant: 'outlined',
      },
    },
  },
};

// Story: QuestionListItem with no actions and a custom pill
export const NoActionsWithCustomPill: StoryObj<
  typeof QuestionListItem<BaseQuestionType>
> = {
  args: {
    item: baseQuestions[2],
    pillLabel: 'Mandatory',
    slotProps: {
      pill: {
        type: 'success',
        variant: 'filled',
        size: 'small',
      },
    },
  },
};

export const WithIndex: StoryObj<typeof QuestionListItem<BaseQuestionType>> = {
  args: {
    item: baseQuestions[0],
    actions: getActions(baseQuestions[0]),
    showIndex: true,
    index: 0,
  },
};

// Story: QuestionListItem inside a SortableList
export const SortableQuestionList: StoryObj = {
  render: () => {
    const [questions, setQuestions] = useState(baseQuestions);

    return (
      <Box sx={{ p: 2, maxWidth: 500 }}>
        <Typography sx={{ mb: 2 }}>Questions List (Draggable)</Typography>
        <SortableList
          items={questions}
          onSort={setQuestions}
          ItemComponent={props => (
            <QuestionListItem
              {...props}
              actions={getActions(props.item)}
              pillLabel="eNPS"
              slotProps={{
                pill: {
                  type: 'success',
                },
              }}
              showIndex
            />
          )}
          direction="vertical"
          dragByHandler={true}
          sx={{ gap: 2 }}
        />
      </Box>
    );
  },
};