import React from 'react'
import { type Meta, type StoryObj } from '@storybook/react-vite'

import TrimText from './TrimText'
import { DocsTemplate } from '../../../.storybook'

export default {
  title: 'Components/Text/TrimText',
  component: TrimText,
  parameters: {
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              The <code>TrimText</code> component is designed to truncate text
              strings that exceed a specified character limit and add an
              ellipsis to indicate that the text has been trimmed. When users
              hover over the truncated text, a tooltip appears, displaying the
              entire text string. If the original text is shorter than the
              limit, it will be displayed normally without any truncation.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Implement the <code>TrimText</code> component in areas where text
              content needs to be constrained within a specific character limit,
              such as titles, descriptions, or user-generated content.
            </span>,
          ]}
        />
      ),
    },
  },
} as Meta<typeof TrimText>

type Story = StoryObj<typeof TrimText>

const Template: Story = {
  render: (args) => {
    return <TrimText {...args} />
  },
}

const AutoTrimmedTemplate: Story = {
  render: (args) => {
    return (
      <div style={{ maxWidth: '300px' }}>
        <TrimText {...args} />
      </div>
    )
  },
}

export const TrimmedText: Story = {
  ...Template,
  args: {
    text: 'This is a really long text string that will need to be trimmed.',
    limit: 30,
  },
}

export const FullText: Story = {
  ...Template,
  args: {
    text: 'This string has a longer limit.',
    limit: 100,
  },
}

export const AutoTrimmedLongText: Story = {
  ...AutoTrimmedTemplate,
  args: {
    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
  },
}

export const AutoNoTrimmingNeeded: Story = {
  ...AutoTrimmedTemplate,
  args: {
    text: 'A concise message that fits',
  },
}

export const CustomClassExample: Story = {
  ...Template,
  args: {
    text: 'This text has custom styling applied through the customClass prop',
    limit: 40,
    customClass: 'text-lg font-bold text-blue',
  },
}

FullText.storyName = 'Full Text - No Tooltip'