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

import { DocsTemplate } from '../../../.storybook'
import OutputForDemo from '../../../.storybook/templates/OutputForDemo'
import { notEmpty } from '../../services/HelperServiceTyped'

const NotEmptyTemplate = (args: { item: unknown }): React.JSX.Element => {
  const { item } = args

  return (
    <div className='flex-column'>
      <div>
        <strong>Input Value:</strong> {JSON.stringify(item, null, 2)}
      </div>
      <div>
        <strong>
          <OutputForDemo output={notEmpty(item) ? 'true' : 'false'} />
        </strong>
      </div>
    </div>
  )
}

export default {
  title: 'Helper Functions/notEmpty',
  component: NotEmptyTemplate,
  parameters: {
    viewMode: 'docs',
    previewTabs: {
      canvas: { hidden: true },
    },
    docs: {
      page: () => (
        <>
          <DocsTemplate
            code={`import { notEmpty } from '@patterninc/react-ui'

notEmpty(10)

Output: true // boolean`}
            description={
              <span>
                A function used to check if the argument passed in has a value
                and is not an empty string (not <code>null</code>,{' '}
                <code>undefined</code>, or <code>''</code>).
              </span>
            }
            infoBullets={[
              <span key='first-line'>
                <code>notEmpty</code> is used when you a boolean returned when
                checking if a variable has a value and is not an empty string.
              </span>,
            ]}
            noArgs
            noDemo
          />
        </>
      ),
      source: {
        code: false,
      },
    },
  },
  argTypes: {
    item: {
      control: 'object',
      description: 'The value to check',
    },
  },
} as Meta<typeof NotEmptyTemplate>

type Story = StoryObj<typeof NotEmptyTemplate>

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

export const Number: Story = {
  ...Template,
  args: {
    item: 10,
  },
}

export const String: Story = {
  ...Template,
  args: {
    item: 'Hello World!',
  },
}

export const EmptyString: Story = {
  ...Template,
  args: {
    item: '',
  },
}

export const Undefined: Story = {
  ...Template,
  args: {
    item: undefined,
  },
}

export const Null: Story = {
  ...Template,
  args: {
    item: null,
  },
}