import {
  Meta,
  Story,
  Preview,
  Props,
} from '@storybook/addon-docs/blocks';
import { action } from '@storybook/addon-actions';
import { Box } from '@material-ui/core';
import Statistic from './Statistic';

<Meta title="Components/Statistic" component={Statistic} />

<Preview>
  <Story name="Positive">
    <Box display="inline-block" p={3}>
      <Statistic
        current={10}
        previous={4}
        title="Positive"
        unit="pcs"
      />
    </Box>
  </Story>
  <Story name="Negative">
    <Box display="inline-block" p={3}>
      <Statistic
        current={4}
        previous={13}
        title="Negative"
        unit="pcs"
      />
    </Box>
  </Story>
  <Story name="Neutral">
    <Box display="inline-block" p={3}>
      <Statistic
        current={22}
        previous={22}
        title="Neutral"
        unit="pcs"
      />
    </Box>
  </Story>
  <Story name="Unavailable">
    <Box display="inline-block" p={3}>
      <Statistic
        current={22}
        title="Unavailable"
        unit="pcs"
      />
    </Box>
  </Story>
  <Story name="Unavailable (Hidden)">
    <Box display="inline-block" p={3}>
      <Statistic
        current={22}
        title="Unavailable"
        unit="pcs"
        hideInsufficentData
      />
    </Box>
  </Story>
  <Story name="Custom colours">
    <Box display="inline-block" p={3}>
      <Statistic
        current={22}
        previous={10}
        title="Custom positive"
        unit="pcs"
        colorMap={{
          '+': 'purple',
          '-': 'orange',
          'n/a': 'brown',
        }}
      />
    </Box>
  </Story>
</Preview>