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

import CsvExport from './CsvExport'
import { DocsTemplate } from '../../../.storybook'
import type SingleCsv from './SingleCsv'

export default {
  title: 'Components/CsvExport',
  component: CsvExport,
  parameters: {
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              The <code>CsvExport</code> component enables users to download
              reports in the CSV (Comma-Separated Values) file format. By
              clicking on the button, users can retrieve the report data as a
              downloadable file, allowing for easy analysis and compatibility
              with various spreadsheet software.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Place the <code>CsvExport</code> component in relevant areas, such
              as report or data visualization pages, where users might want to
              export the data for further analysis or sharing.
            </span>,
            <span key='second-bullet'>
              This component is typically used in conjunction with other
              components that display data, such as tables or charts.
            </span>,
            <span key='third-bullet'>
              The <code>CsvExport</code> component should be used sparingly on
              its own. It is currently part of the{' '}
              <code>
                <a href='/?path=/docs/components-pageheader--docs'>
                  PageHeader
                </a>
              </code>{' '}
              and{' '}
              <code>
                <a href='/?path=/docs/components-tables-components-tableheader--docs'>
                  TableHeader
                </a>
              </code>{' '}
              components. Since those components are standards that should be
              used with tables and charts, it should be a rare occurence to use
              this component on its own.
            </span>,
          ]}
        />
      ),
    },
  },
} as Meta<typeof CsvExport>

type Story = StoryObj<typeof CsvExport>

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

const singleCsvDataDownloadOptions = [
  {
    linkName: 'CSV dataset 1',
    csvName: 'CSV dataset 1',
    hiddenClass: 'revandunits',
    csvData: [
      { Name: 'John Doe', Age: 33, Email: 'johndoe@pattern.com' },
      { Name: 'Jane Doe', Age: 31, Email: 'janedoe@pattern.com' },
      { Name: 'Tom', Age: 35, Email: 'tom@pattern.com' },
    ],
    callout: (element) => element.click(),
  },
]
const multiCsvDataDownloadOptions = [
  {
    linkName: 'CSV dataset 1',
    csvName: 'CSV dataset 1',
    hiddenClass: 'revandunits',
    csvData: [
      { Name: 'John Doe', Age: 33, Email: 'johndoe@pattern.com' },
      { Name: 'Jane Doe', Age: 31, Email: 'janedoe@pattern.com' },
      { Name: 'Tom', Age: 35, Email: 'tom@pattern.com' },
    ],
    callout: (element) => element.click(),
  },
  {
    linkName: 'CSV dataset 2',
    csvName: 'CSV dataset 2',
    hiddenClass: 'revandunits',
    csvData: [
      { Name: 'Jane Doe', Age: 31, Email: 'janedoe@pattern.com' },
      { Name: 'John Doe', Age: 33, Email: 'johndoe@pattern.com' },
      { Name: 'Tom', Age: 35, Email: 'tom@pattern.com' },
    ],
    callout: (element) => element.click(),
  },
]

// Using an open source CSV download API for demo
const url = 'https://dl.dropboxusercontent.com/s/eui3rl43yf2m8nv/nuevo_test.csv'

type CsvOption = ComponentProps<typeof SingleCsv>['csv']

const singleCsvApiDownloadOptions: CsvOption[] = [
  {
    linkName: 'API Data 1',
    csvName: 'API Data 1',
    csvFormat: {
      api: () => fetch(url).then((response) => response.blob()),
      params: {},
    },
  },
]
const multiCsvApiDownloadOptions: CsvOption[] = [
  {
    linkName: 'API Data 1',
    csvName: 'API Data 1',
    csvFormat: {
      api: () =>
        fetch(url).then((response) => {
          return response.blob()
        }),
      params: {},
    },
  },
  {
    linkName: 'API Data 2',
    csvName: 'API Data 2',
    csvFormat: {
      api: () =>
        fetch(url).then((response) => {
          return response.blob()
        }),
      params: {},
    },
  },
]

export const SingleCsvDataDownload: Story = {
  ...Template,
  args: {
    csvDownloadOptions: singleCsvDataDownloadOptions,
    show: true,
    initialDisplay: true,
  },
  name: 'Single Download Using JSON Data',
}

export const MultipleCsvDataDownload: Story = {
  ...Template,
  args: {
    csvDownloadOptions: multiCsvDataDownloadOptions,
    show: true,
    initialDisplay: true,
  },
  name: 'Multiple Download Using JSON Data',
}

export const SingleCsvApiDownload: Story = {
  ...Template,
  args: {
    csvDownloadOptions: singleCsvApiDownloadOptions,
    show: true,
    initialDisplay: true,
  },
  name: 'Single Download Using an API',
}

export const MultipleCsvApiDownload: Story = {
  ...Template,
  args: {
    csvDownloadOptions: multiCsvApiDownloadOptions,
    show: true,
    initialDisplay: true,
  },
  name: 'Multiple Download Using an API',
}