// @flow
import React from 'react';
import styled from 'styled-components';
import { LoadingIndicator } from './loading-indicator.component';
import { Box } from '../../../primitives';
import { getPaletteColor } from '../../../mixins/branding';
import { MarginChecker } from '../../../mixins/spacing/story-support/margin-checker';
import { PaddingChecker } from '../../../mixins/spacing/story-support/padding-checker';
import { StackeeChecker } from '../../../mixins/stackee/story-support/stackee-checker';
import { StackedChecker } from '../../../mixins/stacking/story-support/stacked-checker';
import docs from './loading-indicator.mdx';

export default {
  component: LoadingIndicator,
  title: 'Feedback UI/Loading Indicator',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

const BorderedLoadingIndicator = styled(LoadingIndicator)`
  border: solid ${getPaletteColor('brand-secondary-fg')} 1px;
`;
const FixedWidthLoadingIndicator = styled(BorderedLoadingIndicator)`
  width: 150px;
`;
export const Default = () => (
  <LoadingIndicator ready={false}>Done.</LoadingIndicator>
);
// TODO: reimplement the loading animation as a CSS animation so
// chromatic can pause it and make deterministic screenshots.
Default.parameters = { chromatic: { disable: true } };

export const Neutral = () => (
  <LoadingIndicator variant="neutral" ready={false}>
    Done.
  </LoadingIndicator>
);
// TODO: reimplement the loading animation as a CSS animation so
// chromatic can pause it and make deterministic screenshots.
Neutral.parameters = { chromatic: { disable: true } };

export const MixinsSpacing = () => (
  <>
    <MarginChecker Component={FixedWidthLoadingIndicator} minHeight="25px">
      Done.
    </MarginChecker>
    <PaddingChecker Component={BorderedLoadingIndicator} ready minHeight="0">
      <Box colorName="brand-secondary-bg">Done.</Box>
    </PaddingChecker>
  </>
);
// TODO: reimplement the loading animation as a CSS animation so
// chromatic can pause it and make deterministic screenshots.
MixinsSpacing.parameters = { chromatic: { disable: true } };

export const MixinsStacked = () => (
  <StackedChecker Component={LoadingIndicator} ready />
);
// TODO: reimplement the loading animation as a CSS animation so
// chromatic can pause it and make deterministic screenshots.
MixinsStacked.parameters = { chromatic: { disable: true } };

export const MixinsStackee = () => (
  <StackeeChecker Component={BorderedLoadingIndicator} ready={false}>
    Done.
  </StackeeChecker>
);
// TODO: reimplement the loading animation as a CSS animation so
// chromatic can pause it and make deterministic screenshots.
MixinsStackee.parameters = { chromatic: { disable: true } };
