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

import { DocsTemplate } from '../../../.storybook'
import Button from '../Button/Button'
import HeaderMetric from './HeaderMetric'
import isClient from '../../services/isClient'
import Popover from '../Popover/Popover'

const meta: Meta<typeof HeaderMetric> = {
  title: 'Components/HeaderMetrics/HeaderMetric',
  component: HeaderMetric,
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-607&t=jsd8kEmb1sJfCa2m-0',
    },
    docs: {
      page: () => (
        <DocsTemplate
          figmaLink='https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-607&t=jsd8kEmb1sJfCa2m-0'
          description={
            <span>
              The <code>HeaderMetric</code> component is a comprehensive display
              element that includes a label, a main value, and supporting
              metrics related to the main value. Typically located at the top of
              a page and above a graph, this component offers users an
              informative overview of key metrics. It may also include a link
              and an informational tooltip to provide additional context. Some
              supporting breakdown metrics are accessible through a tooltip when
              hovering over the main value.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Place the <code>HeaderMetric</code> component at the top of pages
              or sections where a concise and insightful summary of key metrics
              is necessary.
            </span>,
            <span key='second-bullet'>
              The <code>HeaderMetric</code> component is not intended to be used
              as a standalone component. It is best used in conjunction with a
              graph or other data visualization component.
            </span>,
            <span key='third-bullet'>
              The label should clearly indicate the context or purpose of the
              presented metrics.
            </span>,
          ]}
        />
      ),
    },
  },
}

export default meta

type Story = StoryObj<typeof HeaderMetric>

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

export const Metric: Story = {
  ...Template,
  args: {
    title: 'In-Stock Rate',
    tooltip: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    value: 0.9415,
    change: 0.315,
    pctChange: 0.615,
    formatType: 'percentage',
    decimalScale: 2,
  },
}

export const WithLink: Story = {
  ...Template,
  args: {
    title: 'In-Stock Rate',
    tooltip: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    value: 0.9415,
    change: 0.315,
    pctChange: 0.615,
    formatType: 'percentage',
    decimalScale: 2,
    linkTo: '/',
    routerComponent: 'a',
    routerProp: 'href',
  },
}

const ActionButton = () => {
  return (
    <Popover
      popoverContent={
        <div
          className='flex items-center justify-center'
          style={{
            width: '300px',
            height: '300px',
          }}
        >
          Hello There
        </div>
      }
      position='top'
      noPadding
      {...(isClient ? { appendTo: document.body } : {})}
    >
      {({ visible, setVisible }) => (
        <div>
          <Button
            className='mr-8'
            as='unstyled'
            onClick={() => setVisible(!visible)}
          >
            View
          </Button>
        </div>
      )}
    </Popover>
  )
}

export const WithActionButton: Story = {
  ...Template,
  args: {
    title: 'In-Stock Rate',
    tooltip: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    value: 0.9415,
    change: 0.315,
    pctChange: 0.615,
    formatType: 'percentage',
    decimalScale: 2,
    actionButton: <ActionButton />,
  },
}

export const WithBetaTag: Story = {
  ...Template,
  args: {
    title: 'In-Stock Rate',
    tooltip: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    value: 0.9415,
    change: 0.315,
    pctChange: 0.615,
    formatType: 'percentage',
    decimalScale: 2,
    beta: true,
  },
}

export const WithBetaTagAndBetaText: Story = {
  ...Template,
  args: {
    title: 'In-Stock Rate',
    tooltip: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    value: 0.9415,
    change: 0.315,
    pctChange: 0.615,
    formatType: 'percentage',
    decimalScale: 2,
    beta: true,
    badgeProps: {
      children: 'Beta Text',
      color: 'lavender',
    },
  },
}

export const CustomSecondaryMetric: Story = {
  ...Template,
  args: {
    title: 'In-Stock Rate',
    tooltip: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    value: 0.9415,
    change: 0.315,
    pctChange: 0.615,
    formatType: 'percentage',
    decimalScale: 2,
    customSecondaryValue: <div>Some Metric</div>,
  },
}

export const CustomSecondaryInfo: Story = {
  ...Template,
  args: {
    title: 'In-Stock Rate',
    tooltip: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    secondaryInfo: 'String value goes here!',
  },
}

export const ComparisonTooltip: Story = {
  ...Template,
  args: {
    title: 'Buy Box Ownership',
    tooltip: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    value: 0.68,
    change: 0.315,
    pctChange: 0.615,
    formatType: 'percentage',
    decimalScale: 2,
    comparisonTooltip: {
      currentPeriodDates: {
        startDate: '2021-01-01',
        endDate: '2021-01-31',
      },
      timeframe: {
        aggregation: 'day',
        display: '30D',
        timeValue: 'day',
        type: 'historical',
        value: 30,
      },
      comparison: 0.365,
      hasNoCurrentMonthData: false,
    },
  },
}

export const ComparisonTooltipWithPartialPeriod: Story = {
  ...Template,
  args: {
    title: 'Buy Box Ownership',
    tooltip: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    value: 0.68,
    change: 0.315,
    pctChange: 0.615,
    formatType: 'percentage',
    decimalScale: 2,
    comparisonTooltip: {
      currentPeriodDates: {
        startDate: '2025-04-01',
        endDate: '2025-06-24',
      },
      timeframe: {
        type: 'quarterly',
        display: '2025 Q2',
        year: 2025,
        quarter: 2,
        timeValue: 'quarter',
        aggregation: 'week',
      },
      compareWith: 'previous_period',
      comparison: 0.365,
      wholePreviousPeriodComparison: 0.12,
      hasNoCurrentMonthData: false,
      showPartialPeriodDates: true,
      footerContent: (
        <div>
          ** Advertising data updates at the end of each day. Projected is an
          estimate for the nearest upcoming data point.
        </div>
      ),
    },
  },
}

export const ComparisonTooltipWithPrimaryMetricTitle: Story = {
  ...Template,
  args: {
    title: 'Buy Box Ownership',
    tooltip: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    value: 0.68,
    change: 0.315,
    pctChange: 0.615,
    formatType: 'percentage',
    decimalScale: 2,
    comparisonTooltip: {
      primaryMetricTitle: 'Buy Box Custom Title',
      currentPeriodDates: {
        startDate: '2021-01-01',
        endDate: '2021-01-31',
      },
      timeframe: {
        aggregation: 'day',
        display: '30D',
        timeValue: 'day',
        type: 'historical',
        value: 30,
      },
      comparison: 0.365,
    },
  },
}

export const ComparisonTooltipWithComparisonPeriod: Story = {
  ...Template,
  args: {
    title: 'Buy Box Ownership',
    tooltip: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    value: 0.68,
    change: 0.315,
    pctChange: 0.615,
    formatType: 'percentage',
    decimalScale: 2,
    comparisonTooltip: {
      primaryMetricTitle: 'Buy Box Custom Title',
      currentPeriodDates: {
        startDate: '2021-01-01',
        endDate: '2021-01-31',
      },
      timeframe: {
        aggregation: 'day',
        display: '30D',
        timeValue: 'day',
        type: 'historical',
        value: 30,
      },
      comparison: 0.365,
      compareWith: 'previous_year',
    },
  },
}

export const ComparisonTooltipCurrentWeekCurrency: Story = {
  ...Template,
  args: {
    title: 'Revenue',
    tooltip: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    value: 100000,
    change: 99900.12,
    pctChange: 111.14,
    formatType: 'number',
    decimalScale: 2,
    currency: {
      currencySymbol: '$',
      currencyCode: 'CAD',
    },
    comparisonTooltip: {
      comparison: 99.8,
      currentPeriodDates: {
        startDate: moment().subtract(1, 'week').startOf('week').format(),
        endDate: moment().format(),
      },
      timeframe: {
        aggregation: 'day',
        display: 'Week',
        timeValue: 'week',
        type: 'current',
      },
    },
  },
}

export const ChangeValueFormatMetric: Story = {
  ...Template,
  args: {
    title: 'In-Stock Rate',
    tooltip: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    value: 0.9415,
    change: 0.315,
    pctChange: 0.615,
    formatType: 'percentage',
    decimalScale: 2,
    changeValueFormatType: 'number',
    changeValueDecimalScale: 2,
  },
}