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

import { cleanUpValues } from '../../services/FilterHelperServiceTyped'
import { DocsTemplate } from '../../../.storybook'

const FilterDisplay = ({ filters, label }) => {
  const cleanedFilters = cleanUpValues(filters)

  return (
    <div>
      <h4>{label}</h4>
      <div>
        <h5>Original Filters:</h5>
        <pre>{JSON.stringify(filters, null, 2)}</pre>
      </div>
      <div>
        <h5>Cleaned Filters (for URL params):</h5>
        <pre>{JSON.stringify(cleanedFilters, null, 2)}</pre>
      </div>
    </div>
  )
}

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

// Basic usage with date filters
const filters = {
  dates: {
    startDate: '2023-01-01',
    endDate: '2023-01-31'
  }
}

const cleanedFilters = cleanUpValues(filters)
console.log(cleanedFilters)
/* Output: 
{
  start_date: { value: '2023-01-01' },
  end_date: { value: '2023-01-31' }
}
*/

// Multiple filter types
const complexFilters = {
  dates: {
    startDate: '2023-01-01',
    endDate: '2023-01-31'
  },
  status: {
    id: 1,
    value: 'active'
  },
  include: {
    defaultValue: ['item1', 'item2']
  },
  search_term: 'example'
}

const cleanedComplexFilters = cleanUpValues(complexFilters)
console.log(cleanedComplexFilters)
/* Output will process each filter type according to its format */
`}
          description='A utility function that transforms filter objects into a standardized format suitable for URL parameters. This function handles different types of filters and organizes them into a consistent structure for API requests.'
          infoBullets={[
            <span key='core-functionality'>
              Core features:
              <ul>
                <li>
                  Transforms filter objects into a standardized format for URL
                  parameters
                </li>
                <li>
                  Handles multiple filter types (dates, include/exclude,
                  ID-based, strings)
                </li>
                <li>Returns null if no valid filters are found</li>
              </ul>
            </span>,
            <span key='filter-types'>
              Supported filter types:
              <ul>
                <li>
                  <code>Date filters</code>: Processes both timeframe dates
                  (startDate/endDate) and date ranges (start_date/end_date)
                </li>
                <li>
                  <code>Include/exclude filters</code>: Extracts the
                  defaultValue property
                </li>
                <li>
                  <code>ID-based filters</code>: Special handling for
                  fulfillment, warehouse_status, and purchase_order_states
                </li>
                <li>
                  <code>String filters</code>: Passes through non-empty string
                  values directly
                </li>
              </ul>
            </span>,
            <span key='use-cases'>
              Common use cases:
              <ul>
                <li>
                  Processing filter objects before sending them as URL
                  parameters
                </li>
                <li>
                  Standardizing filter formats across different components
                </li>
                <li>Preparing filters for API requests</li>
                <li>Normalizing date ranges for consistent processing</li>
              </ul>
            </span>,
            <span key='best-practices'>
              Best practices:
              <ul>
                <li>
                  Use this function when preparing filter objects for API
                  requests
                </li>
                <li>
                  Ensure your filter objects follow the expected structure for
                  each filter type
                </li>
                <li>
                  Handle the case when the function returns null (no valid
                  filters)
                </li>
              </ul>
            </span>,
          ]}
        />
      ),
      source: {
        code: false,
      },
    },
  },
  argTypes: {
    label: {
      control: 'text',
      description: 'Label for the filter example',
    },
    filters: {
      control: 'object',
      description: 'Filter object to clean up',
    },
  },
} as Meta

type Story = StoryObj<typeof FilterDisplay>

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

export const DateFilters: Story = {
  ...Template,
  args: {
    label: 'Date Filters Example',
    filters: {
      dates: {
        startDate: '2023-01-01',
        endDate: '2023-01-31',
      },
    },
  },
}

export const DateRangeFilters: Story = {
  ...Template,
  args: {
    label: 'Date Range Filters Example',
    filters: {
      activity_date: {
        start_date: '2023-01-01',
        end_date: '2023-01-31',
      },
    },
  },
}

export const IncludeExcludeFilters: Story = {
  ...Template,
  args: {
    label: 'Include/Exclude Filters Example',
    filters: {
      include: {
        defaultValue: ['item1', 'item2'],
      },
      exclude: {
        defaultValue: ['item3'],
      },
    },
  },
}

export const IDBasedFilters: Story = {
  ...Template,
  args: {
    label: 'ID-Based Filters Example',
    filters: {
      fulfillment: {
        id: 1,
        value: 'shipped',
      },
      warehouse_status: {
        id: 2,
        state: 'in_progress',
      },
      purchase_order_states: {
        id: 3,
        state: 'completed',
      },
      category: {
        id: 4,
        name: 'Electronics',
      },
    },
  },
}

export const StringFilters: Story = {
  ...Template,
  args: {
    label: 'String Filters Example',
    filters: {
      search_term: 'example search',
      status: 'active',
    },
  },
}

export const ComplexFilters: Story = {
  ...Template,
  args: {
    label: 'Complex Mixed Filters Example',
    filters: {
      dates: {
        startDate: '2023-01-01',
        endDate: '2023-01-31',
      },
      activity_date: {
        start_date: '2023-02-01',
        end_date: '2023-02-28',
      },
      include: {
        defaultValue: ['item1', 'item2'],
      },
      fulfillment: {
        id: 1,
        value: 'shipped',
      },
      search_term: 'example search',
    },
  },
}

export const EmptyFilters: Story = {
  ...Template,
  args: {
    label: 'Empty Filters Example',
    filters: {},
  },
}

export const NullFilters: Story = {
  ...Template,
  args: {
    label: 'Null Filters Example',
    filters: null,
  },
}