let { Shimmer, ShimmerElementType, Fabric, mergeStyles, Fabric } = window.Fabric;

const wrapperClass = mergeStyles({
  padding: 2,
  selectors: {
    '& > *': {
      margin: '10px 0'
    }
  }
});

class ShimmerBasicExample extends React.Component<{}, {}> {
  public render(): JSX.Element {
    return (
      <Fabric className={wrapperClass}>
        Basic Shimmer with no elements provided. It defaults to a line of 16px height.
        <Shimmer />
        <Shimmer width="75%" />
        <Shimmer width="50%" />
        Basic Shimmer with elements provided.
        <Shimmer
          shimmerElements={[
            { type: ShimmerElementType.circle },
            { type: ShimmerElementType.gap, width: '2%' },
            { type: ShimmerElementType.line }
          ]}
        />
        <Shimmer
          shimmerElements={[
            { type: ShimmerElementType.circle, height: 24 },
            { type: ShimmerElementType.gap, width: '2%' },
            { type: ShimmerElementType.line, height: 16, width: '20%' },
            { type: ShimmerElementType.gap, width: '5%' },
            { type: ShimmerElementType.line, height: 16, width: '20%' },
            { type: ShimmerElementType.gap, width: '10%' },
            { type: ShimmerElementType.line, height: 16, width: '15%' },
            { type: ShimmerElementType.gap, width: '10%' },
            { type: ShimmerElementType.line, height: 16 }
          ]}
        />
        <Shimmer
          width={'70%'}
          shimmerElements={[
            { type: ShimmerElementType.circle, height: 24 },
            { type: ShimmerElementType.gap, width: '2%' },
            { type: ShimmerElementType.line, height: 16, width: '20%' },
            { type: ShimmerElementType.gap, width: '5%' },
            { type: ShimmerElementType.line, height: 16, width: '20%' },
            { type: ShimmerElementType.gap, width: '10%' },
            { type: ShimmerElementType.line, height: 16, width: '15%' },
            { type: ShimmerElementType.gap, width: '10%' },
            { type: ShimmerElementType.line, height: 16 }
          ]}
        />
        Variations of vertical alignment for Circles and Lines.
        <Shimmer
          shimmerElements={[
            { type: ShimmerElementType.circle },
            { type: ShimmerElementType.gap, width: '2%' },
            { type: ShimmerElementType.circle, height: 15, verticalAlign: 'top' },
            { type: ShimmerElementType.gap, width: '2%' },
            { type: ShimmerElementType.line, verticalAlign: 'bottom', width: '20%' },
            { type: ShimmerElementType.gap, width: '2%' },
            { type: ShimmerElementType.line, height: 5, verticalAlign: 'top', width: '20%' },
            { type: ShimmerElementType.gap, width: '2%' },
            { type: ShimmerElementType.line, height: 16, width: '15%' },
            { type: ShimmerElementType.gap, width: '2%' },
            { type: ShimmerElementType.line, height: 10, verticalAlign: 'bottom' }
          ]}
        />
      </Fabric>
    );
  }
}

ReactDOM.render(<ShimmerBasicExample />, document.getElementById('content'));
