import { Meta, Story } from '@storybook/react';
import React from 'react';
import {
  ILeaderboardProps,
  Leaderboard,
} from '../../../components/Leaderboard/Leaderboard';
import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
import {
  leaderboardClassRankingItems,
  leaderboardLevelRankingItems,
  leaderboardSkillRankingItems,
} from '../../../mocks/leaderboard.mocks';

const meta: Meta = {
  title: 'Features/Ranking/Leaderboard',
  component: Leaderboard,
};

export default meta;

const Template: Story<ILeaderboardProps> = args => {
  return (
    <RPGUIRoot>
      <Leaderboard {...args} />
    </RPGUIRoot>
  );
};

export const Default = Template.bind({});

Default.args = {
  items: leaderboardLevelRankingItems,
  rankType: 'Level',
  skillOptions: ['Lumbarjacking'],
  classOptions: ['Warrior'],
  rankOptions: ['Level', 'Class', 'Skill'],
  onChangeRankType: () => {},
  onChangeClassType: () => {},
};

export const ClassRanking = Template.bind({});

ClassRanking.args = {
  items: leaderboardClassRankingItems,
  rankType: 'Class',
  skillOptions: ['Lumbarjacking'],
  classOptions: ['Warrior'],
  rankOptions: ['Level', 'Class', 'Skill'],
  onChangeRankType: () => {},
  onChangeClassType: () => {},
};

export const SkillRanking = Template.bind({});

SkillRanking.args = {
  items: leaderboardSkillRankingItems,
  rankType: 'Skill',
  skillOptions: ['Lumbarjacking'],
  classOptions: ['Warrior'],
  rankOptions: ['Level', 'Class', 'Skill'],
  onChangeRankType: () => {},
  onChangeClassType: () => {},
};
