import CardContainer from '@design-system/CardContainer';
import { Stack } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react-vite';

import Title from '.';

const meta: Meta<typeof Title> = {
  component: Title,
  title: 'Design System/Title',
  tags: ['autodocs'],
  argTypes: {
    title: { control: 'text', description: 'title' },
    copetin: { control: 'text' },
    description: { control: 'text', description: 'Used when something else.' },
    copetinTooltip: { control: 'text' },
    descriptionTooltip: { control: 'text' },
    variant: {
      control: 'radio',
      options: ['XL', 'L', 'M', 'S'],
      table: { defaultValue: { summary: 'XL' } },
    },
    fontWeight: {
      control: 'radio',
      options: ['fontWeightSemiBold', 'fontWeightRegular'],
    },
    overflow: {
      control: 'radio',
      options: ['hidden', 'tooltip'],
    },
    disabled: { control: 'boolean' },
    withEllipsis: { control: 'boolean' },
    centered: { control: 'boolean' },
    right: { control: 'boolean' },
    slotProps: { control: false },
    sx: { control: false },
  },
  args: {
    copetin: 'Copetin',
    description: 'Description',
    title: 'Title',
    variant: 'XL',
    descriptionTooltip: 'Description Tooltip',
    copetinTooltip: 'Copetin Tooltip',
  },
  decorators: [
    Story => (
      <Stack sx={{ maxWidth: 400 }}>
        <Story />
      </Stack>
    ),
  ],
};

export default meta;

type Story = StoryObj<typeof Title>;

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

export const RegularWeight: Story = {
  args: {
    fontWeight: 'fontWeightRegular',
  },
};

export const Disabled: Story = {
  args: {
    disabled: true,
  },
};

export const Centered: Story = {
  args: {
    centered: true,
  },
};

export const Right: Story = {
  args: {
    right: true,
  },
};

const LONG_TEXT_ARGS = {
  title: 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
  copetin: 'Sit amet consectetur adipiscing elit quisque faucibus ex.',
  description:
    'Adipiscing elit quisque faucibus ex sapien vitae pellentesque. Adipiscing elit quisque faucibus ex sapien vitae pellentesque.',
};

export const LongTextWithWrap: Story = {
  args: {
    ...LONG_TEXT_ARGS,
  },
};

export const LongTextWithEllipsis: Story = {
  args: {
    ...LONG_TEXT_ARGS,
    withEllipsis: true,
    copetinTooltip: undefined,
    descriptionTooltip: undefined,
  },
};

export const LongTextWithEllipsisAndIcons: Story = {
  args: {
    ...LONG_TEXT_ARGS,
    withEllipsis: true,
  },
};

export const LongTextWithEllipsisAndOverflowTooltip: Story = {
  args: {
    ...LONG_TEXT_ARGS,
    withEllipsis: true,
    overflow: 'tooltip',
  },
};

export const LongTextWithEllipsisInFlexbox: Story = {
  args: {
    ...LONG_TEXT_ARGS,
    withEllipsis: true,
  },
  decorators: [
    Story => (
      <CardContainer
        fullWidth
        sx={{
          '& .MuiCardContent-root': {
            display: 'flex',
            gap: 2,
          },
        }}
      >
        <Stack sx={{ backgroundColor: 'grey', minWidth: 50 }} />
        <Stack sx={{ flex: 1 }}>
          <Story />
        </Stack>
        <Stack sx={{ backgroundColor: 'grey', minWidth: 50 }} />
      </CardContainer>
    ),
  ],
};