import { Story, Meta } from '@storybook/react';

import Box from '@mui/material/Box';
import { GRID_ROW_HEIGHT } from '../data-grid';
import { TextWithTooltip } from './text-with-tooltip';
import type { TextWithTooltipProps } from './types';

export default {
  component: TextWithTooltip,
  title: 'Table/In Cells/Cell Text',
  argTypes: {
    text: {
      description:
        "Text (or text list) that will be displayed and wrapped in a tooltip in case it's wrapper is smaller then the text."
    },
    textSeparator: {
      description:
        'The delimiter (usually a comma) to be inserted between text list items if `text` was passed as an array.'
    },
    title: {
      description:
        'Text that will be rendered as tooltip (overrides default tooltip title based on `text`).'
    },
    numOfLines: {
      description: 'Maximum number of lines.'
    },
    textClassName: {
      description: 'Override class for the Text prop.'
    },
    classes: {
      description: 'Override classes.'
    },
    boxWidth: {
      description: "Set's the wrapper box width, not part of the component, only for demonstration",
      defaultValue: 96,
      type: 'number',
      control: { type: 'range', min: 1, max: 300, step: 1 }
    }
  }
} as Meta;

const Template: Story<TextWithTooltipProps & { boxWidth: number }> = ({ boxWidth, ...rest }) => (
  <Box width={boxWidth} height={GRID_ROW_HEIGHT}>
    <TextWithTooltip {...rest} />
  </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
};