import { Story, Meta } from '@storybook/react';
import clsx from 'clsx';

import { ASSETS_URL } from '../../consts/common';
import { makeStyles } from '../@styles/make-styles';
import { Button } from './index';
import type { ButtonProps } from './index';

export default {
  args: {
    active: false,
    disabled: false
  },
  component: Button,
  title: 'Buttons/Buttons',
  argTypes: {
    active: {
      description: 'Set Dot to active.'
    },
    disabled: {
      description: 'Set Dot to disabled.'
    }
  }
} as Meta;

const createClasses = makeStyles(theme => ({
  dotRoot: {
    '& svg': {
      fill: theme.palette.primary[400],
      '&:hover': {
        fill: theme.palette.primary[500]
      }
    }
  },
  active: {
    '& svg': {
      fill: theme.palette.secondary[500],
      '&:hover': {
        fill: theme.palette.secondary[500]
      }
    }
  },
  disabled: {
    '& svg': {
      fill: theme.palette.primary[100]
    }
  }
}));

const Template: Story<ButtonProps> = args => {
  const classes = createClasses();
  return (
    <Button
      {...args}
      className={clsx(
        classes.dotRoot,
        args.active && classes.active,
        args.disabled && classes.disabled
      )}
      clickArea={false}
      startIconUrl={`${ASSETS_URL}/icons/icon_3dots.svg`}
    />
  );
};

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