import type { Meta, Story } from '@storybook/react';
import Box from '@mui/material/Box';
import { TextWithTooltip } from '../../../text-with-tooltip';
import type { TextWithTooltipProps } from '../../../text-with-tooltip';
import { GRID_ROW_HEIGHT } from '../../utils';

export default {
  component: TextWithTooltip,
  title: 'Data Grid/In Cells/Cell Text'
} as Meta;

const Template: Story<TextWithTooltipProps> = args => (
  <Box width={96} height={GRID_ROW_HEIGHT}>
    <TextWithTooltip {...args} />
  </Box>
);

export const Primary = Template.bind({});
Primary.args = {
  text: 'Lorem Ipsum is',
  title: '',
  numOfLines: 2
};

export const WithTooltip = Template.bind({});
WithTooltip.args = {
  ...Primary.args,
  text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"
};

export const WithTextList = Template.bind({});
WithTextList.args = {
  ...Primary.args,
  text: ['Lorem Ipsum', 'simple dummy text', "industry's standard", 'since the 1500s'],
  textSeparator: ', ',
  numOfLines: 1
};