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

import { DocsTemplate } from '../../../../.storybook'
import ChartTooltip from './ChartTooltip'
import { toast } from '../../Toast/Toast'

const meta: Meta<typeof ChartTooltip> = {
  title: 'Components/Charts/ChartTooltip',
  component: ChartTooltip,
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=906-7139&t=CdMnrLNv0lNFwXr0-0',
    },
    docs: {
      page: () => (
        <DocsTemplate
          figmaLink='https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=906-7139&t=CdMnrLNv0lNFwXr0-0'
          description={
            <span>
              The <code>ChartTooltip</code> component is a standardized tooltip
              designed specifically for use within graphs and charts. It
              provides users with detailed information about data points when
              they hover over them. This component ensures a consistent and
              visually cohesive presentation of data across different types of
              charts in the application.
              <br />
              <br />
              As a note: This component is only the <strong>content</strong> of
              the tooltip and <strong>NOT</strong> the tooltip itself. The
              tooltip is handled by the charting library.
            </span>
          }
          infoBullets={[
            <span key='bullet-1'>
              Use the <code>ChartTooltip</code> component to display key
              information when users hover over data points on a graph or chart.
              • The tooltip should dynamically present the relevant data
              associated with the hovered point, such as labels, values, and
              additional contextual information.
            </span>,
            <span key='bullet-2'>
              Use the <code>ChartTooltip</code> component across various types
              of charts (e.g., line, bar, pie, etc.) to maintain a consistent
              user experience.
            </span>,
          ]}
        />
      ),
    },
  },
}
export default meta
type Story = StoryObj<typeof ChartTooltip>

const Template: Story = {
  render: (args) => <ChartTooltip {...args} />,
}
const generateDataArray = (): Array<{
  productName: string
  price: React.JSX.Element
  totalSales: React.JSX.Element
  perOps: string
  swatchLineColor: string
}> => {
  const productArray: Array<{
    productName: string
    price: React.JSX.Element
    totalSales: React.JSX.Element
    perOps: string
    swatchLineColor: string
  }> = []
  for (let i = 0; i < 10; i++) {
    const productName = `Product ${i + 1}`
    const price = (
      <NumericFormat
        value={0.3233 * (i + 1) * 100}
        thousandSeparator={true}
        fixedDecimalScale={true}
        prefix='$'
        decimalScale={2}
        displayType='text'
      />
    )
    const totalSales = (
      <NumericFormat
        value={Math.floor(Math.random() * 1000000)}
        thousandSeparator={true}
        fixedDecimalScale={true}
        prefix='$'
        decimalScale={2}
        displayType='text'
      />
    )
    const perOps = `${(Math.random() * 100).toFixed(2)}%`
    const swatchLineColors = [
      'dark-blue',
      'blue',
      'chart-dark-1-red',
      'chart-dark-1-green',
      'chart-dark-1-blue',
      'chart-dark-1-purple',
      'chart-dark-1-orange',
      'dark-green',
      'chart-dark-1-yellow',
      'orange',
    ]

    productArray.push({
      productName,
      price,
      totalSales,
      perOps,
      swatchLineColor: swatchLineColors[i],
    })
  }
  return productArray
}

const commonData = {
  header: {
    text: 'Last 30D vs Prev 30D',
    subText: '12/28/22 - 01/27/23 vs 01/28/23 - 02/27/23',
  },
  tooltipContent: {
    type: 'default',
    data: generateDataArray()
      .map(({ productName, price }) => ({
        productName,
        price,
      }))
      .slice(0, 3),
    rowTotalData: {
      price: (
        <NumericFormat
          value={generateDataArray()
            .slice(0, 3)
            .reduce((sum, { price }) => sum + parseFloat(price.props.value), 0)}
          thousandSeparator={true}
          fixedDecimalScale={true}
          prefix='$'
          decimalScale={2}
          displayType='text'
        />
      ),
    },
    config: [
      {
        name: 'productName',
      },
      {
        name: 'price',
      },
    ],
  },
  footer:
    '** Advertising data updates at the end of each day. Projected is an estimate for the nearest upcoming data point.',
  swatchLineData: generateDataArray(),
}

export const Default: Story = {
  ...Template,
  args: {
    header: commonData.header,
    tooltipContent: {
      ...commonData.tooltipContent,
      type: 'default',
    },
    footer: commonData.footer,
  },
}

export const Simple: Story = {
  ...Template,
  args: {
    header: {
      text: 'Header Text',
    },
    tooltipContent: {
      type: 'default',
      data: commonData.tooltipContent.data.slice(0, 2),
      config: commonData.tooltipContent.config,
    },
  },
}

export const Swatchline: Story = {
  ...Template,
  args: {
    header: commonData.header,
    tooltipContent: {
      type: 'swatchLine',
      data: commonData.swatchLineData.map(
        ({ productName, price, swatchLineColor }) => ({
          productName,
          price,
          swatchLineColor,
        }),
      ),
      rowTotalData: commonData.tooltipContent.rowTotalData,
      config: commonData.tooltipContent.config,
    },
    footer: commonData.footer,
  },
}

export const events: Story = {
  ...Template,
  args: {
    header: commonData.header,
    tooltipContent: {
      type: 'swatchLine',
      data: commonData.swatchLineData.map(
        ({ productName, price, swatchLineColor }) => ({
          productName,
          price,
          swatchLineColor,
        }),
      ),
      rowTotalData: commonData.tooltipContent.rowTotalData,
      config: commonData.tooltipContent.config,
    },
    footer: commonData.footer,
    events: {
      eventTooltipHeader: 'Events',
      callout: () => {
        toast({ message: 'Event button clicked', type: 'success' })
      },
      events: [
        {
          eventHeader: 'Target Deal Day',
          eventSubHeader: 'Atrium - Pure Encapsulations',
          eventDate: 'Mon, Feb 10, 2023',
          eventDescription:
            'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.',
          color: 'red',
        },
        {
          eventHeader: "International Women's Day",
          eventSubHeader: 'Thorne Research',
          eventDate: 'Mon, Feb 10, 2023',
          eventDescription:
            'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.',
          color: 'orange',
        },
        {
          eventHeader: 'First day of spring',
          eventDate: 'Mon, Feb 10, 2023',
          eventDescription:
            'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.',
          color: 'blue',
        },
        {
          eventHeader: "Mother's Day",
          eventDate: 'Mon, Feb 10, 2023',
          color: 'orange',
        },
        {
          eventHeader: 'Target Deal Day',
          eventDate: 'Mon, Feb 10, 2023',
          color: 'red',
        },
        {
          eventHeader: 'Target Deal Day',
          eventDate: 'Mon, Feb 10, 2023',
          color: 'red',
        },
        {
          eventHeader: 'Target Deal Day',
          eventDate: 'Mon, Feb 10, 2023',
          color: 'red',
        },
      ],
    },
  },
}

// TODO: Update data values to currency | percentage | number | string
export const TableWithSwatchline: Story = {
  ...Template,
  args: {
    header: commonData.header,
    tooltipContent: {
      type: 'table',
      data: commonData.swatchLineData,
      hasColumnHeader: true,
      rowTotalData: {
        price: '$7,897,989',
        totalSales: '$15,044,845',
        perOps: '567.98%',
      },
      config: [
        {
          name: 'productName',
          label: 'Product Name',
        },
        {
          name: 'price',
          label: 'Price',
        },
        {
          name: 'totalSales',
          label: 'Total Sales',
        },
        {
          name: 'perOps',
          label: '% of Ops',
        },
      ],
    },
    footer: commonData.footer,
  },
}