import React from 'react';
import { StoryObj, Meta } from '@storybook/react';
import AUTruncatorComponent from '../src/components/AUTruncatorComponent';
import { ThemeWrapper } from './lib/helpers';

export default {
  title: 'Delphinus/Truncator',
  component: AUTruncatorComponent,
  argTypes: {
    children: {
      table: {
        disable: true,
      }
    },
    buttonChild: {
      table: {
        disable: true,
      }
    },
    classNames: {
      table: {
        disable: true,
      }
    },
    header: {
      table: {
        disable: true,
      }
    },
    headerLevel: {
      table: {
        disable: true,
      }
    },
  },
  decorators: [
    (Story, context) => (
      <ThemeWrapper theme={context.globals.theme}>
        {Story()}
      </ThemeWrapper>
    )
  ],
} as Meta<typeof AUTruncatorComponent>;

type Story = StoryObj<typeof AUTruncatorComponent>;

export const Truncated: Story = {
  args: {
    maxLines: 10,
    buttonChild: <span>Læs mere</span>,
    children: <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus odit temporibus illo hic esse minus, ab molestiae! Aperiam accusantium, facilis sunt sit corporis autem similique. Cum dolorum unde expedita vitae?
    Reiciendis facere sapiente dolor saepe earum id itaque sit culpa quaerat fuga deleniti quo illum, iusto dolorem fugit odit nisi quos ut! Perspiciatis delectus explicabo sunt vel harum et provident?
    Ipsum quas incidunt nostrum a quisquam error, nisi repellat pariatur sunt enim! Odio, veritatis, quas exercitationem pariatur debitis commodi doloremque illo eos sint eveniet maiores nobis necessitatibus, sapiente tempora error?
    Cupiditate amet nostrum architecto esse, vero, nisi expedita tempore ullam suscipit velit enim nobis. Explicabo tempora earum, accusamus facilis minima dolore facere saepe doloremque soluta. Aliquid enim libero ullam iste!
    Perspiciatis odio sunt, illum nobis excepturi et itaque praesentium suscipit dolore, ipsa obcaecati reprehenderit aspernatur placeat quod maiores vel quas repellendus. Sed incidunt dicta harum accusamus enim earum doloribus hic?
    Mollitia perferendis, repellendus odio molestiae ducimus, ut sed quasi voluptates ea assumenda ullam vero nam earum voluptas facilis aspernatur quo magni ipsam consequatur ipsa, eius doloremque! Maiores consequatur iure aut!
    Excepturi non saepe ex esse asperiores, possimus et magnam! Quaerat exercitationem, ipsam quisquam aliquid tempora beatae officia facere? A autem numquam quae repudiandae illo repellendus natus commodi fugit facilis modi.</p>
  },
  render: (args) => <AUTruncatorComponent {...args} />,
};

export const Not_Truncated: Story = {
  args: {
    maxLines: 100,
    buttonChild: <span>Læs mere</span>,
    children: <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus odit temporibus illo hic esse minus, ab molestiae! Aperiam accusantium, facilis sunt sit corporis autem similique. Cum dolorum unde expedita vitae?
    Reiciendis facere sapiente dolor saepe earum id itaque sit culpa quaerat fuga deleniti quo illum, iusto dolorem fugit odit nisi quos ut! Perspiciatis delectus explicabo sunt vel harum et provident?
    Ipsum quas incidunt nostrum a quisquam error, nisi repellat pariatur sunt enim! Odio, veritatis, quas exercitationem pariatur debitis commodi doloremque illo eos sint eveniet maiores nobis necessitatibus, sapiente tempora error?
    Cupiditate amet nostrum architecto esse, vero, nisi expedita tempore ullam suscipit velit enim nobis. Explicabo tempora earum, accusamus facilis minima dolore facere saepe doloremque soluta. Aliquid enim libero ullam iste!
    Perspiciatis odio sunt, illum nobis excepturi et itaque praesentium suscipit dolore, ipsa obcaecati reprehenderit aspernatur placeat quod maiores vel quas repellendus. Sed incidunt dicta harum accusamus enim earum doloribus hic?
    Mollitia perferendis, repellendus odio molestiae ducimus, ut sed quasi voluptates ea assumenda ullam vero nam earum voluptas facilis aspernatur quo magni ipsam consequatur ipsa, eius doloremque! Maiores consequatur iure aut!
    Excepturi non saepe ex esse asperiores, possimus et magnam! Quaerat exercitationem, ipsam quisquam aliquid tempora beatae officia facere? A autem numquam quae repudiandae illo repellendus natus commodi fugit facilis modi.</p>
  },
  render: (args) => <AUTruncatorComponent {...args} />,
};

export const With_Focusable_Content: Story = {
  args: {
    maxLines: 10,
    buttonChild: <span>Læs mere</span>,
    children: <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus odit temporibus illo hic esse minus, ab molestiae! Aperiam accusantium, facilis sunt sit corporis autem similique. Cum dolorum unde expedita vitae?
    Reiciendis facere sapiente dolor saepe earum id itaque sit culpa quaerat fuga deleniti quo illum, iusto dolorem fugit odit nisi quos ut! Perspiciatis delectus explicabo sunt vel harum et provident?
    Ipsum quas incidunt nostrum a quisquam error, nisi repellat pariatur sunt enim! Odio, veritatis, quas exercitationem pariatur debitis commodi doloremque illo eos sint eveniet maiores nobis necessitatibus, sapiente tempora error?
    Cupiditate amet nostrum architecto esse, vero, nisi expedita tempore ullam suscipit velit enim nobis. Explicabo tempora earum, accusamus facilis minima dolore facere saepe doloremque soluta. <a href="#">Aliquid enim libero ullam iste!</a>
    Perspiciatis odio sunt, illum nobis excepturi et itaque praesentium suscipit dolore, ipsa obcaecati reprehenderit aspernatur placeat quod maiores vel quas repellendus. Sed incidunt dicta harum accusamus enim earum doloribus hic?
    Mollitia perferendis, repellendus odio molestiae ducimus, ut sed quasi voluptates ea assumenda ullam vero nam earum voluptas facilis aspernatur quo magni ipsam consequatur ipsa, eius doloremque! Maiores consequatur iure aut!
    Excepturi non saepe ex esse asperiores, possimus et magnam! Quaerat exercitationem, ipsam quisquam aliquid tempora beatae officia facere? A autem numquam quae repudiandae illo repellendus natus commodi fugit facilis modi.</p>
  },
  render: (args) => <AUTruncatorComponent {...args} />,
};

export const Narrow_Viewport: Story = {
  args: {
    classNames: 'truncator truncator--not-on-medium',
    maxLines: 10,
    buttonChild: <span>Læs mere</span>,
    children: <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus odit temporibus illo hic esse minus, ab molestiae! Aperiam accusantium, facilis sunt sit corporis autem similique. Cum dolorum unde expedita vitae?
    Reiciendis facere sapiente dolor saepe earum id itaque sit culpa quaerat fuga deleniti quo illum, iusto dolorem fugit odit nisi quos ut! Perspiciatis delectus explicabo sunt vel harum et provident?
    Ipsum quas incidunt nostrum a quisquam error, nisi repellat pariatur sunt enim! Odio, veritatis, quas exercitationem pariatur debitis commodi doloremque illo eos sint eveniet maiores nobis necessitatibus, sapiente tempora error?
    Cupiditate amet nostrum architecto esse, vero, nisi expedita tempore ullam suscipit velit enim nobis. Explicabo tempora earum, accusamus facilis minima dolore facere saepe doloremque soluta. <a href="#">Aliquid enim libero ullam iste!</a>
    Perspiciatis odio sunt, illum nobis excepturi et itaque praesentium suscipit dolore, ipsa obcaecati reprehenderit aspernatur placeat quod maiores vel quas repellendus. Sed incidunt dicta harum accusamus enim earum doloribus hic?
    Mollitia perferendis, repellendus odio molestiae ducimus, ut sed quasi voluptates ea assumenda ullam vero nam earum voluptas facilis aspernatur quo magni ipsam consequatur ipsa, eius doloremque! Maiores consequatur iure aut!
    Excepturi non saepe ex esse asperiores, possimus et magnam! Quaerat exercitationem, ipsam quisquam aliquid tempora beatae officia facere? A autem numquam quae repudiandae illo repellendus natus commodi fugit facilis modi.</p>
  },
  render: (args) => <AUTruncatorComponent {...args} />,
};


export const Not_On_Wide_Viewport: Story = {
  args: {
    classNames: 'truncator truncator--not-on-wide',
    maxLines: 10,
    buttonChild: <span>Læs mere</span>,
    children: <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus odit temporibus illo hic esse minus, ab molestiae! Aperiam accusantium, facilis sunt sit corporis autem similique. Cum dolorum unde expedita vitae?
    Reiciendis facere sapiente dolor saepe earum id itaque sit culpa quaerat fuga deleniti quo illum, iusto dolorem fugit odit nisi quos ut! Perspiciatis delectus explicabo sunt vel harum et provident?
    Ipsum quas incidunt nostrum a quisquam error, nisi repellat pariatur sunt enim! Odio, veritatis, quas exercitationem pariatur debitis commodi doloremque illo eos sint eveniet maiores nobis necessitatibus, sapiente tempora error?
    Cupiditate amet nostrum architecto esse, vero, nisi expedita tempore ullam suscipit velit enim nobis. Explicabo tempora earum, accusamus facilis minima dolore facere saepe doloremque soluta. <a href="#">Aliquid enim libero ullam iste!</a>
    Perspiciatis odio sunt, illum nobis excepturi et itaque praesentium suscipit dolore, ipsa obcaecati reprehenderit aspernatur placeat quod maiores vel quas repellendus. Sed incidunt dicta harum accusamus enim earum doloribus hic?
    Mollitia perferendis, repellendus odio molestiae ducimus, ut sed quasi voluptates ea assumenda ullam vero nam earum voluptas facilis aspernatur quo magni ipsam consequatur ipsa, eius doloremque! Maiores consequatur iure aut!
    Excepturi non saepe ex esse asperiores, possimus et magnam! Quaerat exercitationem, ipsam quisquam aliquid tempora beatae officia facere? A autem numquam quae repudiandae illo repellendus natus commodi fugit facilis modi.</p>
  },
  render: (args) => <AUTruncatorComponent {...args} />,
};