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

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

const HasValueTemplate = (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={hasValue(item) ? 'true' : 'false'} />
        </strong>
      </div>
    </div>
  )
}

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

hasValue(10)

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

type Story = StoryObj<typeof HasValueTemplate>

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

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

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

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

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

export const ZeroValue: Story = {
  ...Template,
  args: {
    item: 0,
  },
}

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

export const EmptyArray: Story = {
  ...Template,
  args: {
    item: [],
  },
}

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