import { storiesOf } from '@storybook/react-native'
import React from 'react'
import { Text, View } from 'react-native'
import Svg, { Rect } from 'react-native-svg'

import { colors } from '../../src/Colors'
import { DataTile, DataTileText } from '../../src/components/DataTile'

storiesOf('DataTile', module)
  .add('with title', () => (
    <DataTile dsp="spotify" title="Streams" error={null}>
      <View style={{ minHeight: 200 }} />
    </DataTile>
  ))
  .add('with sub title', () => (
    <DataTile
      dsp="spotify"
      title="Streams"
      subTitle="FEDB 8 - MAR 7"
      error={null}
    >
      <View style={{ minHeight: 200 }} />
    </DataTile>
  ))
  .add('with text', () => (
    <DataTile
      dsp="spotify"
      title="Streams"
      subTitle="FEB 8 - MAR 7"
      error={null}
    >
      <View style={{ minHeight: 200 }}>
        <DataTileText text="This track doesn’t have any streams for this period" />
      </View>
    </DataTile>
  ))
  .add('with content', () => (
    <DataTile
      dsp="spotify"
      title="Streams"
      subTitle="FEB 8 - MAR 7"
      error={null}
    >
      <View style={{ minHeight: 200 }}>
        <Text style={{ color: colors.midWhite }}>
          This is a Tile with height of 200, some random text and a nice
          colorful square.
        </Text>
        <View style={{ marginTop: 24 }} />
        <View
          style={{
            flexDirection: 'row',
            maxHeight: 200,
          }}
        >
          <Text style={{ color: colors.midWhite, fontSize: 10, flex: 1 }}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere
            ultricies mauris, quis mollis purus bibendum id. Lorem ipsum dolor
            sit amet, consectetur adipiscing elit. Nulla nec volutpat ligula.
            Nam pretium dolor non purus vulputate vehicula. Vestibulum et tempus
            nibh, vitae porta augue. Vivamus pharetra dictum ipsum vel bibendum.
            Morbi volutpat porttitor eros, vitae euismod felis volutpat vitae.
            Maecenas nulla dolor, volutpat at sollicitudin sit amet, dapibus et
            metus.
          </Text>
          <View style={{ flex: 1 }}>
            <Svg viewBox="0 0 100 120">
              <Rect
                x="0"
                width="100"
                height="120"
                rx="15"
                fill={colors.purples.purple2}
              />
            </Svg>
          </View>
        </View>
      </View>
    </DataTile>
  ))