import React from 'react'
import { storiesOf } from '@storybook/react'
import Image, { ImageProps } from 'atoms/Image'
import { styled } from 'view-container'

/**
 * MAKE SURE THE FOLLOWING WHEN USING styled.withComponent() WITH REACT.COMPONENT
 * -> the css only applied for the wrapper means top of the element / very first element of the component
 * -> className must be declared for the element else extending CSS will not be applied
 */
const CircleThumbnail = styled.withComponent(Image)`
  background-color: grey;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
`

const SquareThumbnail = styled.withComponent(Image)`
  background-color: red;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
`

const ProductImage = styled.withComponent(Image)`
  background-color: #ccc;
  width: 200px;
  height: 240px;
  overflow: hidden;
  padding: 5px;
`

// wrapper
const HyperLinkTag = styled.a`
  width: 180px;
  height: 240px;
  display: inline-block;
  border: 2px solid #dadada;
  overflow: hidden;
  position: relative;
`

const BackgroundImage = styled.withComponent(Image)`
  background-color: red;
`

const ImageNoWrapAdapter = props => <Image {...props} nowrap />
const StyledImage = styled.withComponent(ImageNoWrapAdapter)`
  /* applied to the image, not the wrapper */
  transform: scale(.5, .5);
`

let thumProps = storiesOf('atoms/Image', module)
  .add('Default', () => <Image nowrap />)
  .add('As Background', () => <BackgroundImage isBackground width="800px" height="400px" />)
  .add('Circle Thumbnail', () => (
    <CircleThumbnail doAutoAlign src="https://raderain.sirv.com/Images/BurnBag.png" />
  ))
  .add('Square Thumbnail', () => (
    <SquareThumbnail doAutoAlign src="https://raderain.sirv.com/Images/BurnBag.png" />
  ))
  .add('Product Image', () => (
    <ProductImage
      doAutoAlign
      src="https://raderain.sirv.com/Images/produts/Cat_294x200_Workwear.png"
    />
  ))
  .add('Inside a Tag', () => (
    <HyperLinkTag href="http://uxui.skavaone.com/">
      <Image
        nowrap
        doAutoAlign
        src="https://raderain.sirv.com/Images/produts/Cat_294x200_Workwear.png"
      />
    </HyperLinkTag>
  ))
  .add('adapter', () => <StyledImage />)