import ScoreDifferenceIndicator from '@composed-components/peopleExperience/surveyResults/ScoreDifferenceIndicator';
import { Stack, Typography } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react';

import EnpsTotal from '.';

const meta: Meta<typeof EnpsTotal> = {
  title: 'Composed Components/PeopleExperience/SurveyResults/Nps/EnpsTotal',
  component: EnpsTotal,
  argTypes: {
    value: {
      control: { type: 'range', min: -100, max: 100, step: 1 },
    },
  },
};

export default meta;

type Story = StoryObj<typeof EnpsTotal>;

export const Default: Story = {
  args: {
    title: 'eNPS Score',
    description: 'Employee Net Promoter Score',
    value: 75,
  },
};

export const Negative: Story = {
  args: {
    title: 'eNPS Score',
    description: 'Employee Net Promoter Score',
    value: -25,
  },
};

export const Zero: Story = {
  args: {
    title: 'eNPS Score',
    description: 'Employee Net Promoter Score',
    value: 0,
  },
};

export const MinValue: Story = {
  args: {
    title: 'eNPS Score',
    description: 'Employee Net Promoter Score',
    value: -100,
  },
};

export const MaxValue: Story = {
  args: {
    title: 'eNPS Score',
    description: 'Employee Net Promoter Score',
    value: 100,
  },
};

export const Null: Story = {
  args: {
    title: 'eNPS Score',
    description: 'Employee Net Promoter Score',
    nullValueTooltip: 'No data available',
    value: null,
  },
};

export const WithFooter: Story = {
  args: {
    title: 'eNPS Score',
    description: 'Employee Net Promoter Score',
    value: 75,
    footer: (
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          gap: 1,
        }}
      >
        <ScoreDifferenceIndicator
          difference={15}
          popoverMeta={{
            score: 75,
            baseScore: 60,
            scoreLabel: 'Current Score',
            baseScoreLabel: 'Previous Score',
            footerLabel: 'vs. last period',
            scoreDifferenceDescription: 'Increased by',
          }}
        />
        <Typography variant="globalXS">vs. last period</Typography>
      </Stack>
    ),
  },
};
