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

export default {
  title: 'Delphinus/Character Count',
  component: AUCharacterCountComponent,
  argTypes: {
  },
  decorators: [
    (Story, context) => (
      <ThemeWrapper theme={context.globals.theme}>
        <div className="form">
          <div className="form__field">
            {Story()}
          </div>
        </div>
      </ThemeWrapper>
    )
  ],
} as Meta<typeof AUCharacterCountComponent>;

type Story = StoryObj<typeof AUCharacterCountComponent>;

export const Recommended_empty: Story = {
  args: {
    type: 'recommended',
    initialChars: 0,
    maxChars: 100,
    translations,
    children: (
      <input type='text' />
    ),
  },
  render: (args) => {
    return (
      <AUCharacterCountComponent {...args}>
        {args.children}
      </AUCharacterCountComponent>
    );
  },
};

export const Recommended_initial: Story = {
  args: {
    type: 'recommended',
    initialChars: 19,
    maxChars: 15,
    translations,
    children: (
      <input type='text' defaultValue="Her står noget tekst" />
    ),
  },
  render: (args) => {
    return (
      <AUCharacterCountComponent {...args}>
        {args.children}
      </AUCharacterCountComponent>
    );
  },
};

export const Allowed_empty: Story = {
  args: {
    type: 'allowed',
    initialChars: 0,
    maxChars: 30,
    translations,
    children: (
      <input type='text' />
    ),
  },
  render: (args) => {
    return (
      <AUCharacterCountComponent {...args}>
        {args.children}
      </AUCharacterCountComponent>
    );
  },
};

export const Allowed_initial: Story = {
  args: {
    type: 'allowed',
    initialChars: 19,
    maxChars: 15,
    translations,
    children: (
      <input type='text' defaultValue="Her står noget tekst" />
    ),
  },
  render: (args) => {
    return (
      <AUCharacterCountComponent {...args}>
        {args.children}
      </AUCharacterCountComponent>
    );
  },
};

export const Allowed_initial_with_textarea: Story = {
  args: {
    type: 'allowed',
    initialChars: 664,
    maxChars: 500,
    translations,
    children: (
      <textarea defaultValue="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil totam hic, eligendi illo perspiciatis temporibus quas magnam illum, amet debitis voluptatibus libero similique assumenda harum consequatur dolore veniam tenetur voluptatum.
      Dolorem aliquam qui pariatur sapiente commodi! Odit dicta aspernatur officia quod saepe molestias tempore similique iste quasi possimus voluptas deleniti, consequatur ut facere vitae. Accusamus atque illo omnis eum unde.
      Error necessitatibus repellat qui! Iusto, neque officia quae facilis debitis corrupti error. Quaerat nobis nesciunt, earum ea quo id unde iure quas soluta, nemo tempora natus, nisi beatae aspernatur fugiat." />
    ),
  },
  render: (args) => {
    return (
      <AUCharacterCountComponent {...args}>
        {args.children}
      </AUCharacterCountComponent>
    );
  },
};