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

import { InfoCardWithBars } from './info-card-with-bars';
import type { InfoCardWithBarsProps } from './info-card-with-bars';
import mock from './__mocks__/mockInfoCardWithBars';

export default {
  component: InfoCardWithBars,
  title: 'Deprecated/Templates/InfoCardWithBars',
  argTypes: {
    data: {
      description: 'The data to display inside the component.'
    },
    title: {
      description: 'Title of the component.',
      table: {
        defaultValue: {
          summary: 'Active sessions'
        }
      },
      control: {
        type: 'text'
      }
    },
    subtitle: {
      description: 'Subtitle of the component.',
      control: {
        type: 'text'
      }
    },
    handleClick: {
      description: 'Callback on clicking the top right button.'
    },
    buttonText: {
      description: 'Text for the top right button.',
      table: {
        defaultValue: {
          summary: 'Expand'
        }
      }
    },
    rootWidth: {
      description: 'The width of the component.',
      table: {
        defaultValue: {
          summary: '537px'
        }
      }
    },
    errorMessage: {
      description: 'The error message in case of no data.',
      control: {
        type: 'text'
      }
    },
    titleTooltipText: {
      description: 'Text for the tooltip on the right side of the title.',
      control: {
        type: 'text'
      }
    },
    buttonTooltipText: {
      description: 'Text for the button tooltip.',
      control: {
        type: 'text'
      }
    }
  }
} as Meta;

const Template: Story<InfoCardWithBarsProps> = args => <InfoCardWithBars {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  handleClick: () => alert('Callback'),
  href: `${window.location.origin}/?path=/story/shared-templates-verified-sidebarright--primary`,
  subtitle: 'Apr 12, 09:00am',
  data: mock,
  buttonText: 'Expand',
  rootWidth: '537px',
  errorMessage: '',
  titleTooltipText: 'Active sessions aalal',
  buttonTooltipText: 'Comming ...'
};

export const SingleBar = Template.bind({});
SingleBar.args = {
  handleClick: () => alert('Callback'),
  href: `${window.location.origin}/?path=/story/shared-templates-verified-sidebarright--primary`,
  subtitle: 'Apr 12, 09:00am',
  data: {
    ...mock,
    chart: [
      {
        width: '100%',
        progressBarProps: {
          color: '#4374E0',
          texts: {
            bottom: 'US',
            top: 30
          }
        }
      }
    ]
  },
  buttonText: 'Expand',
  rootWidth: '537px',
  errorMessage: '',
  titleTooltipText: 'Active sessions aalal',
  buttonTooltipText: 'Comming ...'
};