import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Knowledge, Learn } from 'icons';
import { colors } from 'theme/color';
import { textVariantList } from 'components';
import { TouchableTile } from './index';

export default {
  title: 'Design System/TouchableTile',
  component: TouchableTile,
  argTypes: {
    variant: {
      options: ['active', 'hover', 'base', 'base-01', 'outline', 'outline-active', 'text'],
      control: { type: 'select' },
    },
    underlayColorVariant: {
      control: { type: 'select' },
      // TODO: add full list those are in other pr
      options: ['base', 'base-01'],
    },
    sizeVariant: {
      options: [
        'undefined',
        'content',
        'extra-small',
        'small',
        'medium',
        'large',
        'extra-large',
        '2-extra-large',
      ],
      control: { type: 'select' },
    },
    shapeVariant: {
      options: ['square', 'round'],
      control: { type: 'select' },
    },
    titleColor: {
      options: colors,
      control: { type: 'select' },
    },
    titleVariant: {
      options: textVariantList,
      control: { type: 'select' },
    },
  },
} as ComponentMeta<typeof TouchableTile>;

export const Interactive: ComponentStory<typeof TouchableTile> = (args) => {
  return (
    <>
      <TouchableTile width={300} {...args} />
    </>
  );
};

Interactive.args = {
  variant: 'outline-active',
  title: 'Dashboard',
  sizeVariant: 'medium',
  titleColor: 'title',
  titleVariant: 'title',
  collapsedWidth: 50,
  isCollapsed: false,
  underlayColorVariant: 'base',
  caption: 'Analytics',
  shapeVariant: 'round',
  leftElement: <Knowledge />,
  rightElement: <Learn />,
};