import { Box, Divider, Stack, Typography } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react-vite';

const meta: Meta<typeof Divider> = {
  component: Divider,
  title: 'Design System/Divider',
  tags: ['autodocs'],
  argTypes: {
    orientation: {
      control: 'radio',
      options: ['horizontal', 'vertical'],
      table: {
        defaultValue: { summary: 'horizontal' },
      },
    },
  },
  args: {
    orientation: 'horizontal',
  },
  decorators: [
    (Story, context) => {
      const isVertical = context.args.orientation === 'vertical';

      if (isVertical) {
        return (
          <Stack
            direction="row"
            alignItems="stretch"
            sx={{ p: 2, gap: 3 }}
          >
            <Stack>
              <Typography
                variant="globalXS"
                color="text.secondary"
              >
                Proyectos
              </Typography>
              <Typography
                variant="globalL"
                fontWeight="fontWeightSemiBold"
              >
                24
              </Typography>
            </Stack>
            <Story />
            <Stack>
              <Typography
                variant="globalXS"
                color="text.secondary"
              >
                Pendientes
              </Typography>
              <Typography
                variant="globalL"
                fontWeight="fontWeightSemiBold"
              >
                7
              </Typography>
            </Stack>
            <Story />
            <Stack>
              <Typography
                variant="globalXS"
                color="text.secondary"
              >
                Aprobados
              </Typography>
              <Typography
                variant="globalL"
                fontWeight="fontWeightSemiBold"
              >
                10
              </Typography>
            </Stack>
          </Stack>
        );
      }

      return (
        <Box sx={{ p: 2, maxWidth: 360 }}>
          <Stack sx={{ gap: 1 }}>
            <Typography
              variant="globalM"
              fontWeight="fontWeightSemiBold"
            >
              Reunión de bienvenida
            </Typography>
            <Typography
              variant="globalS"
              color="text.secondary"
            >
              Conversá con tu líder sobre los objetivos de tu rol en los
              primeros tres meses.
            </Typography>
          </Stack>
          <Box sx={{ my: 2 }}>
            <Story />
          </Box>
          <Stack sx={{ gap: 1 }}>
            <Typography
              variant="globalM"
              fontWeight="fontWeightSemiBold"
            >
              Próximos pasos
            </Typography>
            <Typography
              variant="globalS"
              color="text.secondary"
            >
              Revisá la documentación interna y agendá tus primeros 1:1 con el
              equipo.
            </Typography>
          </Stack>
        </Box>
      );
    },
  ],
};

export default meta;

type Story = StoryObj<typeof Divider>;

export const Default: Story = {
  args: {},
};

export const Vertical: Story = {
  args: {
    orientation: 'vertical',
    flexItem: true,
  },
};