import { useTheme } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react';
import { IconMoodEmpty, IconMoodSad, IconMoodSmile } from '@tabler/icons-react';

import TableFilterDecorator from '.';

const meta: Meta<typeof TableFilterDecorator> = {
  title: 'Composed Components/PeopleExperience/TableFilterDecorator',
  component: TableFilterDecorator,
  parameters: {
    layout: 'padded',
  },
};

export default meta;

type Story = StoryObj<typeof TableFilterDecorator>;

export const Success: Story = {
  render: () => {
    const theme = useTheme();
    return (
      <TableFilterDecorator
        backgroundColor={theme.palette.new.background.feedback.success}
        textColor={theme.palette.new.text.feedback.success}
        title="Promoters"
      />
    );
  },
};

export const Error: Story = {
  render: () => {
    const theme = useTheme();
    return (
      <TableFilterDecorator
        backgroundColor={theme.palette.new.background.feedback.error}
        textColor={theme.palette.new.text.feedback.error}
        title="Detractors"
      />
    );
  },
};

export const Warning: Story = {
  render: () => {
    const theme = useTheme();
    return (
      <TableFilterDecorator
        backgroundColor={theme.palette.new.background.feedback.warning}
        textColor={theme.palette.new.text.feedback.warning}
        title="Neutrals"
      />
    );
  },
};

export const WithDescription: Story = {
  render: () => {
    const theme = useTheme();
    return (
      <TableFilterDecorator
        backgroundColor={theme.palette.new.background.feedback.success}
        textColor={theme.palette.new.text.feedback.success}
        title="Promoters"
        description="Showing feedback from promoters (scores 9-10)"
      />
    );
  },
};

export const SuccessWithIcon: Story = {
  render: () => {
    const theme = useTheme();
    return (
      <TableFilterDecorator
        backgroundColor={theme.palette.new.background.feedback.success}
        textColor={theme.palette.new.text.feedback.success}
        title="Promoters"
        icon={<IconMoodSmile size={20} />}
      />
    );
  },
};

export const ErrorWithIcon: Story = {
  render: () => {
    const theme = useTheme();
    return (
      <TableFilterDecorator
        backgroundColor={theme.palette.new.background.feedback.error}
        textColor={theme.palette.new.text.feedback.error}
        title="Detractors"
        icon={<IconMoodSad size={20} />}
      />
    );
  },
};

export const WarningWithIcon: Story = {
  render: () => {
    const theme = useTheme();
    return (
      <TableFilterDecorator
        backgroundColor={theme.palette.new.background.feedback.warning}
        textColor={theme.palette.new.text.feedback.warning}
        title="Neutrals"
        icon={<IconMoodEmpty size={20} />}
      />
    );
  },
};

export const WithIconAndDescription: Story = {
  render: () => {
    const theme = useTheme();
    return (
      <TableFilterDecorator
        backgroundColor={theme.palette.new.background.feedback.success}
        textColor={theme.palette.new.text.feedback.success}
        title="Promoters"
        description="Showing feedback from promoters (scores 9-10)"
        icon={<IconMoodSmile size={20} />}
      />
    );
  },
};
