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

import TypographyOverflowTooltip from './index';

const meta: Meta<typeof TypographyOverflowTooltip> = {
  title: 'Composed Components/TypographyOverflowTooltip',
  component: TypographyOverflowTooltip,
  parameters: {
    layout: 'padded',
  },
};

export default meta;

type Story = StoryObj<typeof TypographyOverflowTooltip>;

export const Default: Story = {
  args: {
    tooltipProps: {
      title: 'Full value',
      description:
        'This is a very long text that should overflow the available width and therefore show a tooltip with the full content.',
    },
    typographyProps: {
      variant: 'globalM',
      sx: { width: 200 },
    },
    children:
      'This is a very long text that should overflow the available width and therefore show a tooltip with the full content.',
  },
};

export const ParentConstrained: Story = {
  args: {
    tooltipProps: {
      title: 'Full value',
      description:
        'This is a very long text that should overflow the available width and therefore show a tooltip with the full content.',
    },
    typographyProps: {
      variant: 'globalM',
    },
    children:
      'This is a very long text that should overflow the available width and therefore show a tooltip with the full content.',
  },
  render: args => (
    <Stack
      sx={{
        width: 200,
        p: 2,
        backgroundColor: 'oklch(86.9% 0.005 56.366)',
        borderRadius: '16px',
      }}
    >
      <TypographyOverflowTooltip {...args} />
    </Stack>
  ),
};
