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

import TextOverflowTip from './index';

const LONG_TEXT =
  'This is a very long text that should overflow and show a tooltip with the full content when hovered.';

const meta: Meta<typeof TextOverflowTip> = {
  title: 'Composed Components/TextOverflowTip',
  component: TextOverflowTip,
  tags: ['autodocs'],
  parameters: {
    layout: 'padded',
  },
  args: {
    primary: LONG_TEXT,
  },
  argTypes: {
    primary: { control: 'text' },
    length: { control: { type: 'number' } },
    lineClamp: { control: { type: 'number' } },
    slotProps: { control: false },
  },
};

export default meta;

type Story = StoryObj<typeof TextOverflowTip>;

const typographyProps = {
  variant: 'globalM',
  sx: { width: 200, border: '1px solid red' },
} as const;

export const Default: Story = {
  args: {
    slotProps: {
      typography: typographyProps,
    },
  },
};

export const LineClamp: Story = {
  args: {
    lineClamp: 2,
    slotProps: {
      typography: typographyProps,
    },
  },
  render: args => (
    <Stack
      sx={{
        width: 200,
        p: 2,
        backgroundColor: 'oklch(86.9% 0.005 56.366)',
        borderRadius: '16px',
      }}
    >
      <TextOverflowTip {...args} />
    </Stack>
  ),
};

export const TruncateByLength: Story = {
  args: {
    length: 40,
    slotProps: {
      typography: typographyProps,
    },
  },
};