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

import makeStyles from '@mui/styles/makeStyles';
import { ProgressBar } from './progressbar';
import type { ProgressBarProps } from './progressbar';
import type { Theme } from '../@styles/theme-provider';

export default {
  component: ProgressBar,
  title: 'Deprecated/Components/Progressbar',
  argTypes: {
    color: {
      description: 'The background color of the bar.',
      control: {
        type: 'color'
      }
    },
    texts: {
      description: 'Texts that can be placed around the component.'
    },
    value: {
      description:
        'The value of the progress indicator for the determinate and buffer variants. Value between 0 and 100.'
    }
  }
} as Meta;

const createClasses = makeStyles<Theme>(() => ({
  progressBar: {
    width: '200px'
  }
}));

const Template: Story<ProgressBarProps> = args => {
  const classes = createClasses();
  return <ProgressBar classes={{ progress: classes.progressBar }} {...args} />;
};

export const Primary = Template.bind({});
Primary.args = {
  color: '#6FCDCD',
  texts: {
    topStart: '',
    top: '',
    topEnd: '',
    right: '',
    bottomEnd: '',
    bottom: '',
    bottomStart: '',
    left: ''
  },
  value: 60
};