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

import HeaderMetricGroup, { checkboxColorOptions } from './HeaderMetricGroup'
import {
  headerMetricData,
  headerMetricTextData,
  headerMetricTooltipData,
} from './HeaderMetricGroupData'

export default {
  title: 'Components/HeaderMetricGroup',
  component: HeaderMetricGroup,
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    data: { control: 'object' },
    loading: { control: 'boolean' },
    showRadio: { control: 'boolean' },
    showChangeBelowMainMetric: { control: 'boolean' },
    otherMetricCount: { control: 'number' },
    activeMetrics: { control: 'object' },
    colors: {
      control: 'object',
      options: checkboxColorOptions,
    },
  },
} as Meta<typeof HeaderMetricGroup>

const Template: StoryFn<typeof HeaderMetricGroup> = (args) => (
  <HeaderMetricGroup {...args} />
)

// Basic metrics with numeric values
export const Default = Template.bind({})
Default.args = {
  data: headerMetricData,
  styleBottom: false,
  showRadio: false,
  loading: false,
}

// Text-based metrics
export const WithTextMetrics = Template.bind({})
WithTextMetrics.args = {
  data: headerMetricTextData,
  styleBottom: false,
  showRadio: false,
  loading: false,
}

// Metrics with tooltips
export const WithTooltips = Template.bind({})
WithTooltips.args = {
  data: headerMetricTooltipData,
  styleBottom: false,
  showRadio: false,
  loading: false,
}

// Metrics with radio buttons
export const WithRadio = Template.bind({})
WithRadio.args = {
  data: headerMetricData,
  styleBottom: false,
  showRadio: true,
  loading: false,
  mainCallOut: ({ name, checked }) => {
    console.log('Radio button clicked:', { name, checked })
  },
}

// Metrics with radio buttons and active selection
export const WithRadioAndActiveSelection = Template.bind({})
WithRadioAndActiveSelection.args = {
  data: headerMetricData,
  styleBottom: false,
  showRadio: true,
  loading: false,
  activeMetrics: ['revenue'],
  mainCallOut: ({ name, checked }) => {
    console.log('Radio button clicked:', { name, checked })
  },
}

// Metrics with custom colors
export const WithCustomColors = Template.bind({})
WithCustomColors.args = {
  data: headerMetricData,
  styleBottom: false,
  showRadio: false,
  loading: false,
  colors: [
    'chart-standard-blue',
    'chart-standard-green',
    'chart-standard-purple',
  ],
}

// Metrics with loading state
export const Loading = Template.bind({})
Loading.args = {
  data: headerMetricData,
  styleBottom: false,
  showRadio: false,
  loading: true,
}

// Metrics with otherMetricCount
export const WithOtherMetricCount = Template.bind({})
WithOtherMetricCount.args = {
  data: headerMetricData,
  styleBottom: false,
  showRadio: false,
  loading: false,
  otherMetricCount: 2,
}